Google AMPテストで、AMPエラー:「必須属性heightがタグamp-iframeにありません」と怒られた場合の対応(Cocoon+Amazonアソシエイト)

この記事は約4分で読めます。

当ブログへのアクセスを分析してみると、モバイル端末でアクセスされている方が半数以上を占めていました。

Cloud CDNに連携したとはいえ、キャッシュの問題がまだ未解決なので、当ブログにお越し頂いているモバイルユーザーの皆様の快適性を向上させたいなーと思ったので、AMP対応することにしました。

CocoonはAMP対応している無償テーマでかつ、AMP適合性も優秀とのことで、すんなりいくかな、、、と思いきや。。。

はい、タイトルの内容にてハマりましたorz

当記事はその対応の備忘録です。

スポンサーリンク

What is AMP??

その前にAMPとは何?って方もいらっしゃると思います。

端的に言えば、Googleが推進するモバイルページを高速に表示させるための手法で作成されいるWebページのことです。

詳しくは下記記事をご覧下さい。

【AMP】Googleが推進するAMPとは?概要と対応方法まとめ
【2018年4月更新】AMPとは、Googleが推奨しているコンテンツを高速に表示させるための手法のことです。2016年にリリースされ、現在ではECサイトやグルメサイトなどにも対応できるフレームワークやテンプレートがオープンソースで公開されています。この記事では、AMPの概要に関する説明や実際のソースコードの解説などを...
スポンサーリンク

CocoonでのAMP設定

設定についても触れておきます。

設定自体は簡単です。

下記、Cocoon作者・わいひらさんの記事をご覧下さい。

ページが存在しません | Cocoon
WordPress無料テーマ

また、AMP化するとGoogle Analyticsのトラッキング設定の変更が必要になるので、下記記事の内容を参考に対応をして下さい。

ページが存在しません | Cocoon
WordPress無料テーマ
ページが存在しません | Cocoon
WordPress無料テーマ

上記手順で作成された、

  • タグマネージャーID
  • AMPタグマネージャー用ID

を、[Cocoon設定]->[Googleタグマネージャー設定]欄に設定し、

[Google AnalyticsトラッキングID]の入力値を削除します。

スポンサーリンク

Google AMPテスト実施、そしてエラー発生

前振りが長くなりました、本題に入ります。

すんなり動くかなーと思い、気楽にGoogle AMPテストを実施たところ、当記事タイトルの内容にてGoogle様に怒られました

iframeと出ているのですが、使っている箇所で思いつくのはAmazon アソシエイトの商品リンクしか思いつきません。

検索してみると推察通り、Amazon アソシエイトの商品リンクが悪さしていることまでは分かりましたが、じゃあどう対応するの?という訳で、Cocoonのフォーラムに質問しました。

AMP固有の知見が必要な場合サーバーサイド一筋マンの私では自力対処が難しいので汗

スポンサーリンク

Cocoonフォーラムからの回答そして解決

こちらがフォーラムでのQ&A内容になります。

AMPエラー「必須属性「height」がタグ「amp-iframe」にありません」
AMPを有効にし、Google AMPテストを実行したところ、 「必須属性「height」がタグ「amp-iframe」にありません」と表示されております。 検索したところ下記投稿同様、Amazonアソシエイトまわりのところでエラーとなっているのでは?と、推測しています。 エラーソ...

CSSでwidth,height属性指定しているのみで、iframeタグ内でのwidth,height属性がないというオチでした。

※フォーラムで回答頂いた皆様、ありがとうございました(深く感謝)。

対応しGoogle様のAMPテスト再実施、無事合格しました。

AMP対応後、モバイルページのレスポンスが良くなったような気がします

スポンサーリンク

まとめ

Amazon アソシエイトをご利用中の方、ご注意下さい。

(CSSで縦横指定しているからいいじゃねーかよーと、Amazonさんの反論があるかもしれませんが、Google神の裁定ではNGな属性付与の方法かもしれませんね)

Google AMPテストは無事通っていますが、Google様のクロール結果の判定が下るまでは安心出来ません。

Google様のお怒りメールが飛んでこない事を祈ります。