GoogleサーチコンソールでAMPのエラーが表示された時の対処方法

GoogoleサーチコンソールでAMPのエラーが検出された。どうすればいいの？

こんな疑問にお答えします。

本記事の内容

Googleサーチコンソールで『「AMP」の問題が新たに検出されたました』というメッセージが来ていたりしていませんか？

私自身もGoogleからメールが来ており、対処方法に少し苦労しました。

本記事では、GoogleサーチコンソールでAMPのエラーが表示された時の原因と解消方法をわかりやすく解説していきます。

AMPとは

AMP（アンプ）とは、「Accelerated Mobile Pages」の略で、2015年10月にGoogleとTwitterが共同で立ち上げたモバイルページを高速に表示するためのオープンソースプロジェクトです。

このAMPに対応すると、ユーザー側でサイトのページが高速で表示されるようになり、待ち時間が少なくなったり、ユーザーの使いやすさが格段に上がったりとサイトを運営する上ではいいことがたくさんあります。

エラーの原因

AMPのエラーが検出されるとGoogleからメールが届きます。

私の雑記ブログの方でAMPエラーが出ていたようで、メールでもエラーが起きていることがわかりますが、Googleサーチコンソールにもお知らせがきているので、どちらかで確認することができます。

Googleサーチコンソールの「AMP」をクリックするとページの下部にエラーの原因が表示されています。

エラーの原因を1つずつ解説していきます。

エラー①：許可れていない属性または属性値がHTMLタグにあります。

文字の通りですが、AMPのページにおいて使えない属性や属性値が挿入されているためエラーになっていました。

この使えない属性を解消する必要があります。

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

これも文字の通りですが、AMPのHTMLが無効のためエラーになっていました。

該当のHTMLを解消する必要があります。

エラーを解消する方法は、それぞれのエラー内容を確認する必要があるので次項からエラー内容の確認方法について解説していきます。

エラー内容の確認方法

AMPテストページを活用してエラーの内容を確認していきます。

エラー原因をクリックするとエラーになっているURLが表示れます。

修正したいURLをコピーして下記のAMPテストページでエラー内容を確認します。

「?type=AMP」までコピーをしましょう。

AMP テスト - Google Search Console

…

「テストするURLを入力」の欄にコピーしたURLを入力し、活性化された「URLをテスト」をクリックします。

AMPエラーになっていると「有効なAMPページではありません」と記載されています。

「検証の問題」からエラーの確認をしていきます。

エラーの対処方法

ここからエラーの対処方法について解説していきます。

難しいと思われる方も多いと思いますが、エラーの意味を理解していけば誰でも簡単に対処することが可能です。

下記より1つずつ解説していきます。

属性「loading」はタグ「amp-img」で使用できません

WordPressのバージョンを5.5に更新したことで、画像遅延読み込み機能 loading=”lazy” が、AMPページでは使うことができないため、エラーになってしまいした。

本ブログのテーマ「THE THOR」の対処方法を記載させていただきます。

WordPressの左のメニューから「外観」＞「テーマエディター」＞編集するテーマ「THE THOR」を選択＞テーマのための関数（functions.php）を選択し、下記コードを追加してください。

add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );

このコードを「functions.php」に追加すれば、「loading=”lazy”」 が自動的に追加されるのを防ぐことができます。

属性「border」はタグ「amp-img」で使用できません

画像にボーダータグを使用してしまったことで起こるエラーで、アフィリエイト広告などの画像のタグに使用されています。

該当のHTMLの中から「border=”0″」を削除すれば解消されます。

またアフィリエイト広告を載せるときにAMPに対応している広告を予め生成することができるASPもあるので、その場合はAMP対応リンクを生成し、ブログに貼り付けましょう。

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

画像のHTMLコードの中の表示サイズを表す「width」や「height」といったコードが不足している可能性があるためエラーになっています。

該当の画像をクリックして「鉛筆マーク」をクリックしてください。

画像詳細が表示されますが、そのまま何もせず「更新」をクリックすれば解消されます。

エラーを対処した後に、再度テストページで確認し、「有効なAMPページです」と表示されれば完了です。

まとめ

いかがでしたでしょうか。

私のブログでは有料テーマ「THE THOR」を使っているためAMP対応していますが、テーマによってはAMP対応しておらず、今回のような問題は起こらないかと思いますが、AMP対応している方はご参考にしてください。

また、エラーを解消した後すぐにはGoogleサーチコンソールのAMPで反映されません。

数日経ってから確認をしてください。

それでは。