keityさん

投稿者:: @keity

↑

「このブロックには、想定されていないか無効なコンテンツが含まれています。」

これが表示されるということは、ブロックエディタをご利用かと思います。

投稿者:: @keity

↑

ボタンリンクにしている箇所

上記は、どのブロックなのでしょうか。

編集画面などのキャプチャ画像（スクリーンショット）などいただけますと、より伝わり易いかと思います。

@mk2_mk2 様

ご確認いただきましてありがとうございます。

添付の通り、ボタンブロックの大きいサイズを使用しております。よろしくお願いいたします。

keityさん

すみません、只今スマホなもので、こちらで確認ができません。

ボタンブロックには、2つあるかと思います。

WordPress本体のものと、Cocoonのものです。

どちらでしょう？（見た目で分かるはずですが、記憶が・・・）

Cocoonのボタンブロックであれば、「nofollow」は、右の設定サイドバーのURL部分に含めれば良い気がします。（今試せないもので、間違っていたらすみません）

別タブについては、トグルスイッチでオンオフできたと思います。（うろ覚えですが。プルダウンだったかも？）

囲みボタンだと、そのままタグを丸ごと入力できた気がします。

ブロックエディタは、ブロックの設定以外のことをすると、すぐに「無効なコンテンツ扱い」になってしまうんですよね。（HTMLに問題がなくても。そのため、ブロックエディタで再編集が簡単ではなくなってしまいます）

keityさん

ご提示いただいたものを、Cocoonの「ボタン」ブロックと「囲みボタン」ブロックに入力してみました。
（右の設定サイドバーで、ある程度設定内容も伝わるかと思います。画像添付の際は、この範囲も欲しいです）

投稿者:: @mk2_mk2

↑

この「現在」と「変換後」を、コピーして機械的にDiffしてみましたが、完全に同一でした。

ここで、「ブロックに変換」すると、「カスタムHTML」ブロックになってしまいすね。

「Cocoon設定」で、「target="_blank"の際はnoopenerを追加」のチェックを外すと、以下のようになりました。

@mk2_mk2 様

お忙しい中色々と検証いただきありがとうございます！

素人なものですから、私自身の検証も少し時間がかかってしまいますがいただいたヒントを元に試してみます。

>>ただ、「noopener」がなくても良いものか・・・。

→noopenerは設定したいですね…

引き続きよろしくお願いいたします。

Cocoonブロックの以下を利用について。

• ボタン
• 囲みボタン

まず、ボタンについて話します。

●現象

コードエディターに変え、HTMLに「rel="nofollow"」を追加すると、リカバリーとなる。

●対応策

以下の手順で対応します。

図①の「...」をクリックする。
図②のHTMLに変換をクリックする。
図③の「カスタムHTML」ブロックとなるので、属性を編集、追加する。
HTML表示のままが嫌なら、図④のプレビューをクリックし、ボタン表示にする。

@keity さん

以前のトピックで私がアフィリエイトタグをおすすめしたのは、このような問題が起きるのも理由の 1 つでした。

「このブロックには、想定されていないか無効なコンテンツが含まれています。」と出る理由は、Cocoon のボタンブロックや囲みボタンブロックが rel="nofollow" に対応していないためです。rel 属性の値には、noopener しか書けません。そのため、rel="noreferrer" でも同じようにエラーメッセージが出ます。

テキストリンクにしている箇所もあれば、ボタンリンクにしている箇所もあるなど、複数の出し方をしているため、設置の方法がわからず断念してしまいました。

テキストリンクとボタンリンクとで別々にアフィリエイトタグに登録するのはご希望に合わないでしょうか？

例えば、A8 での楽天モバイルのアフィリエイトと仮定します。

テキストリンクの場合は、アフィリエイトタグのタイトルに「テキストリンク - A8 - 楽天モバイル」などと書き、内容に <a> タグを書きます。この <a> タグは、A8 などからコピペするだけでいいと思います。

<a href="https://sample.com/" rel="nofollow noopener" target="_blank">何かしらのテキスト</a>

ボタンリンクの場合は、アフィリエイトタグのタイトルに「ボタンリンク - A8 - 楽天モバイル」などと書き、このような HTML を内容に書きます。

<div class="wp-block-cocoon-blocks-button-1 button-block">
  <a href="https://sample.com/" class="btn" target="_blank" rel="nofollow noopener">ボタン</a>
</div>

この HTML であれば、Cocoon のボタンブロックの小サイズと同じボタンになります。HTML は簡単に作れます。投稿ページの編集画面で Cocoon のボタンブロックを使っておいてコードエディターに切り替えれば、HTML をコピーできます。コピーした HTML に nofollow を追加すれば完成です。

アフィリエイトタグよりコードエディターで編集されるのがお好みでしょうか？

ちなみに、WordPress のボタンブロックであれば、コードエディターで nofollow を追加できます。

@chu-ya 様

リカバリーについて教えていただき、ありがとうございます！

カスタムHTMLに変換して修正できることは知りませんでした。。

今後の編集作業において貴重な知識となりました。ありがとうございます。

@akira 様

再びご確認いただきましてありがとうございました！

色々とご配慮いただいた上でアフィリエイトタグを推奨してくださったのに、一度断念してしまいすみません。。

今回さらに詳細に教えていただいたことで、やっとやり方がわかりました。

テキストリンク、ボタンリンクを検証してみましたが、どちらも問題なく実装できそうです！

アフィリエイトタグを使用する方向でやらせていただきます。本当にご丁寧にありがとうございます。

今後ともどうぞよろしくお願いいたします。