当ブログへのアクセスを分析してみると、モバイル端末でアクセスされている方が半数以上を占めていました。
Cloud CDNに連携したとはいえ、キャッシュの問題がまだ未解決なので、当ブログにお越し頂いているモバイルユーザーの皆様の快適性を向上させたいなーと思ったので、AMP対応することにしました。
CocoonはAMP対応している無償テーマでかつ、AMP適合性も優秀とのことで、すんなりいくかな、、、と思いきや。。。
はい、タイトルの内容にてハマりましたorz
当記事はその対応の備忘録です。
What is AMP??
その前にAMPとは何？って方もいらっしゃると思います。
端的に言えば、Googleが推進するモバイルページを高速に表示させるための手法で作成されいるWebページのことです。
詳しくは下記記事をご覧下さい。
CocoonでのAMP設定
設定についても触れておきます。
設定自体は簡単です。
下記、Cocoon作者・わいひらさんの記事をご覧下さい。
また、AMP化するとGoogle Analyticsのトラッキング設定の変更が必要になるので、下記記事の内容を参考に対応をして下さい。
上記手順で作成された、
- タグマネージャーID
- AMPタグマネージャー用ID
を、[Cocoon設定]->[Googleタグマネージャー設定]欄に設定し、
[Google AnalyticsトラッキングID]の入力値を削除します。
Google AMPテスト実施、そしてエラー発生
前振りが長くなりました、本題に入ります。
すんなり動くかなーと思い、気楽にGoogle AMPテストを実施たところ、当記事タイトルの内容にてGoogle様に怒られました。
iframeと出ているのですが、使っている箇所で思いつくのはAmazon アソシエイトの商品リンクしか思いつきません。
検索してみると推察通り、Amazon アソシエイトの商品リンクが悪さしていることまでは分かりましたが、じゃあどう対応するの？という訳で、Cocoonのフォーラムに質問しました。
AMP固有の知見が必要な場合、サーバーサイド一筋マンの私では自力対処が難しいので汗
Cocoonフォーラムからの回答そして解決
こちらがフォーラムでのQ&A内容になります。
CSSでwidth,height属性指定しているのみで、iframeタグ内でのwidth,height属性がないというオチでした。
※フォーラムで回答頂いた皆様、ありがとうございました(深く感謝)。
対応しGoogle様のAMPテスト再実施、無事合格しました。
AMP対応後、モバイルページのレスポンスが良くなったような気がします。
まとめ
Amazon アソシエイトをご利用中の方、ご注意下さい。
(CSSで縦横指定しているからいいじゃねーかよーと、Amazonさんの反論があるかもしれませんが、Google神の裁定ではNGな属性付与の方法かもしれませんね)
Google AMPテストは無事通っていますが、Google様のクロール結果の判定が下るまでは安心出来ません。
Google様のお怒りメールが飛んでこない事を祈ります。