はじめに
メールチェックしてたら、「 「AMP」の問題が新たに 検出されました 」というタイトルのメールが来ました。「Search Console」で確認した結果、「AMP HTML タグの属性で指定されたレイアウトが無効です」というエラーが発生しました。いろいろ試した結果、簡単に解決することができましたので、解決方法について共有していきたいと思います。
エラー箇所を確認
エラーを解決するためには、どこでエラーが発生しているのか把握しなければなりません。「Search Console」 でエラーのURLをクリックすると、エラーが発生しているコードが表示されます。
今回エラーが発生した箇所は以下の画像のように全部で4箇所で、1つ目のエラー箇所は327行目の赤い部分となっています。画像の名前も記載されていますので、エラーが発生している画像がわかります。
エラー原因を確認
エラー発生箇所を「Search Console」で確認できましたが、エラーの原因について書かれていないので、AMPテストでエラーの原因を確認します。エラーが発生しているURLを入力すると、エラーの詳細が表示されます。
「検証の問題」欄に「必須属性「height」がタグ「amp-img」にありません」が書かれています。 タグ「amp-img」に「height」がないことが原因であることがわかります。
AMPテストのページでもエラー箇所を確認することができます。「検証の問題」欄をクリックするとエラーが発生しているコードの一覧が表示されます。それぞれのコードをクリックすると詳細が表示されます。
タグ「amp-img」に「height」がないことがエラーの原因ですが、コードを確認すると、確かに赤い部分に「height」がありません。「IMG_0079.jpg」という名前の画像がエラー対象となります。
解決方法
エラーの原因は 「必須属性「height」がタグ「amp-img」にありません」 であることがわかりました。「height」は画像のサイズである「高さ」を表しています。つまり、画像サイズの情報を追加すれば大丈夫です。
ワードプレスの記事編集画面を開いて、エラーが発生しているコードに記載されている画像の名前をもとに、該当する画像をクリックしてください。「画像の寸法」欄を確認してください。
「画像の寸法」 欄では、幅と高さには数値が記載されていますが、下にある「25%」～「100%」の項目が何も選択されていないことがわかります。
以下のように 「25%」～「100%」 の任意の項目をクリックしてください。これでエラーが解消されます。
該当する画像の修正が完了したら、記事を「更新」してください。以上で修正が完了となります。お疲れさまでした。
エラーが解消されたことを確認
AMPテストでもう一度URLを入力し、テストをしてみてください。以下のように「有効なAMPページです」が表示されば大丈夫です。
エラーが発生していたコードをもう一度確認すると、タグ「amp-img」に「height」が追加されたことを確認できます。
エラー解消後対応
AMPテストでエラーが解消することを確認したら、「Search Console」で修正した内容の検証を依頼してください。「修正を検証」をクリックするだけで完了です。
検証に数日間掛かるかもしれませんが、気長に待ちましょう。
まとめ
エラー「AMP HTML タグの属性で指定されたレイアウトが無効です」の解決方法を紹介しました。初めてこのエラーが発生したので、いろいろ試行錯誤しました。
途中でわかったことですが、 AMPテストでしかリアルタイムで修正結果を確認することができません。最初は「Search Console」で修正した結果を確認しましたが、何回修正してもコードが変わってないから、さすがにおかしいと思って、調べてみたら、AMPテストの存在を知りました。
修正方法は簡単なので、同じエラーが発生した場合は参考にしてみてください。