東港研究所給湯室

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

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

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

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

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

 

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

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

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

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

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=tkittijp-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を使っている場合は、投稿画面から左上の「オプション」をクリック。

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

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

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

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

https://search.google.com/test/amp?hl=JA

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

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