スポンサーリンク

GoogleパイセンにAMPページエラーでボコられた件

プログラミング
にしけん
にしけん

つい先日、GoogleパイセンからAMPページエラーが出てるからすぐに直しやがれ!!と鋭いツッコミメールが届きました。
エラーは2つ。

AMP HTMLタグの属性で指定されたレイアウトが無効です。
amp-video」の属性「src」のURLプロトコルが無効です

これらにどんな対応したかを書きます!!

スポンサーリンク

AMP HTMLタグの属性で指定されたレイアウトが無効です。

実際にエラーが出たのは当ブログの “タイ バンコクのおすすめホテル” という記事の
ページです。Google search consoleに登録したメールアドレス宛にエラー報告が
来ました。

Google Search Consoleのページに飛びます。
今回はAMPページエラーと指摘されたので画面左のメニューからAMPを選択するとAMPに
ついてのエラー情報が見れます。ちなみにAMPとはざっくりいうとモバイルページで高速で
表示するための処理ですね。AMPエラーというのはおそらくモバイルで表示するときに
高速にならねぇじゃねぇかよ、オメェ!!ということだと思います。

エラーが出ているページのURLが出ているので、それをクリックすると画面右にそのページの
エラーが出ているコードが赤くフォーカスされます。ここで、ページのどこが悪いのかを
ある程度予測することができます。
※図はエラーを解決した後にスキャンしてしまったのでエラー部分は表示されていません。
エラーがある場合は図の青丸の部分に表示されます。

何が悪かったか?

今回、このエラーについて何が悪かったかというと、Googleアドセンス以外で貼っていた
アフィリエイトの広告が原因になっていました。
広告のHTMLがAMPに対応したものになっていなかったようです。
AMP対応広告に貼り直しましたが、画像付きの広告だとAMP対応でもエラーは直らなかったので
最終的に文字のみの広告にしました。

スポンサーリンク

「amp-video」の属性「src」のURLプロトコルが無効です。

こちらも実際にエラーが出たページは当ブログの”タイ バンコクのおすすめホテル” という記事の
ページです。
こちらは画面をスキャンしてないのですが、エラーの文章中の amp-video という言葉から
わかる通り、動画が原因でした。
携帯で撮ったホテルの部屋内をぐるっと見回した動画をあげていたのですが、これを削除したら
エラーが無くなりました。
動画のサイズを軽くすれば良かったのかもしれませんが、それだとよくわからない動画に
なってしまうと思ったので泣く泣く削除しました。
次回からは動画を乗せるときはYoutubeにあげて埋め込んだほうがいいかも。

以上です。