【解決済】CocoonでAMP対応にしたらアマゾンアソシエイトがエラーになった件【WordPress】

サーチコンソールのエラー WordPress
[PR]

サーチコンソールに怒られる

WordPressでテーマでCocoonを使わせてもらってますが、AMPを設定したらGoogleさんのサーチコンソールに怒られました。

思い当たるのは、アマゾンアソシエイトを導入した直後からのようです。

グーグルのページインデックスができなくなるわけではないのですが、AMPページは当然インデックスされなくなります。

GoogleさんはAMPを重要視しているようなので、対策します。

cocoonのAMPでheightエラー

>必須属性「height」がタグ「amp-iframe」にありません。

height タグが無いらしいです。 確かにAMPは画像などのサイズを明確化する必要があるので、引っかかったのかと・・・

サーチコンソールでAMPエラーが出たheight

サーチコンソールでエラーを確認すると、確かにAmazonのタグで引っかかっているようです。

確かに <amp-iframe> ~<amp-iframe> 内に「height」タグがありません。
原因が判明したので、早速、「height」タグの対策をしてみます。

[PR]

AMPエラー ”height” の対策方法

Cocoonのアフィリエイトタグを使う場合

対策方法は、ログイン→COCOON設定→アフィリエイトタグ 内に張り付けたコードに赤字の部分の「height=”240”」タグを追加します。

<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=chief-t-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B094TZVQTQ&linkId=aaaaaaaaaaaaaaaaaaaabbbbb39d" height="240"></iframe>

追加したら、cocoon設定→キャッシュ削除→AMPキャッシュ削除 で完了です。

記事に直接タグを入力する場合

Gutenbergを使っている場合は、投稿画面から左上の「オプション」をクリック。

コードエディターをクリックしてコードを直接編集します。

20220728102750.jpg

Classic Editorを使用している場合も、コード編集画面を開いて同じ要領で「height=”240”」を追加します。

[PR]

AMPの動作テストをしてみる

height タグの修正が終わったらAMPのテストを行います。
Googleサーチコンソールが提供しているテスト用サイトに当該記事のアドレスを入力します。

AMP テスト - Google Search Console

対策後はエラーが消えました。

AMPでエラーが無くなった

一見、<amp-iframe> タグを修正しなければならないのに、<iframe> タグを修正するのか?と思われるかもしれませんが、CocoonのAMP変換で自動的に<iframe>が<amp-iframe>に置き換わる仕様になっています。

コメント

タイトルとURLをコピーしました