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

[AMP HTMLタグの属性で指定されたレイアウトが無効です。]を対策 WordPress

Search Consoleから突然以下のようなメールが送られてきた。

Search Consoleから送られてきた「AMP関連の問題検出」メール

「貴サイトに影響するAMP関連の問題が 1 件検出されました。 」「エラーにより、貴サイトのページまたは機能が検索結果に表示されなくなる可能性があります。」などと書かれている。

早速調査して対策します。

調査

Search Consoleで調査

送られてきたメール内に「AMPの問題を解決する」というボタンがあるのでクリックして詳細を見てみます。

「AMPの問題を解決する」をクリック

Search Consoleが開き、内容を確認すると「AMP HTML タグの属性で指定されたレイアウトが無効です。」の表示の下の該当ページの部分に、「7月8日水曜日」の時点で「該当ページ 1」が表示されている。

Search Consoleの「AMP HTML タグの属性で指定されたレイアウトが無効です。」表示

更に下にスクロールして見てみると、エラーの発生しているAMP用のURLがあるので、クリップボードにコピーする。

エラーの発生しているAMP用URLをコピー

「AMPテスト」ページで詳細を調査

このような時は、Googleが提供している「AMPテスト」を利用するのが一番早いです。エラーの原因を細かく詳細まで特定できます。

■AMP テスト – Google Search Console
URL:https://search.google.com/test/amp

「AMPテスト」ページを開き、先ほどコピーしたエラーが出ているURLを入力して「URLをテスト」をクリックします。

「AMPテスト」でAMP URLのテスト開始

テストの結果を見ると、「有効なAMPページではありません。」と表示され、「次の問題を修正してください」の部分に、『必須属性「height」がタグ「amp-iframe」にありません。』と表示されている。

「AMPテスト」のテスト結果

エラーが発生している行番号をクリックすると、右側に問題のあるHTMLソース内のインスタンスが表示されます。

行番号をクリックしてエラーが発生しているインスタンスを表示

ソースを見たところ、エラーのある2つのインスタンスは両方ともAmazonアソシエイトのリンクを入れた箇所です。このAmazonアソシエイトのリンク(iframe)を修正する必要がありそうです。

原因判明

WordPressにログインし、エラーが出ている記事のHTMLソースを見てみたところ、Amazonアソシエイトの<iframe>タグ内に、height属性がありませんでした。

style属性内にCSSでheight「240px;」と記述してありますが、style属性内ではなく、直接height属性でiframeの高さを記述する必要があります。

対策

記事の「カスタムHTML」内にあるAmazonアソシエイトの<iframe>タグの高さを、直接height属性で記述して追加します。

【修正前】

【修正後】

以下のように修正しました。(※<iframe>タグ内の最後に「height=”240″」を追加し、念のため、「width=”120″」も追加しておきます。)

以上で対策は完了です。(※2つ目のAmazonアソシエイトの部分も上記と同様に修正しました。)

【通常のブロックエディターを利用している場合】
ブログにAmazonアソシエイトの<iframe>タグを挿入する場合は、「カスタムHTML」を利用して挿入しますが、HTMLソースを書き込んだ後に「ブロックへ変換」をクリックしてしまうと<iframe>タグ内のコードが自動的に変更(改変)されてしまうので注意しましょう。

【Classic Editorを利用している場合】
Classic Editorを利用している場合は、HTMLソースを変更後に「テキスト」タブから「ビジュアル」タブに変更すると、<iframe>タグ内のコードが自動的に変更(改変)されてしまうので、HTMLソース変更後は「テキスト」タブのまま保存しましょう。

再度「AMPテスト」でチェック

エラーが修正されたか、もう一度「AMPテスト」を実行してチェックします。

■AMP テスト – Google Search Console
URL:https://search.google.com/test/amp

「有効なAMPページです」と表示されればOKです。問題は解決しています。

「AMPテスト」で問題無し

Search Consoleで修正を報告

エラーの修正は完了したので、最後にSearch Consoleから修正完了の報告をします。

Search Consoleの「修正を検証」ボタンをクリックします。

Search Consoleの「修正を検証」ボタンをクリック

しばらく時間がかかります。

Search Consoleの「初期検証中」表示

検証が開始されたらエラー修正の報告は完了です。

Search Consoleの「検証開始」の表示

検証には少々時間は掛かりますが、エラー修正の検証が成功していればSearch Consoleからメールが送られてきますのでしばらく待ちましょう。

【2020年7月10日追記】

翌日、Search Consoleから『「AMP」の問題が修正されました』というメールが届きました。以下がそのメールです。

『「AMP」の問題が修正されました』というSearch Consoleからのメール

まとめ

Search Consoleから「AMP HTML タグの属性で指定されたレイアウトが無効です。」というエラー報告のメールが送られてきて、そのエラーの詳細が『必須属性「height」がタグ「amp-iframe」にありません。』だった場合は、<iframe>タグ内にheight属性にて直接高さを記述すればOK。(※念のため、同時にwidth属性で横幅も直接記述しておきましょう。)

以上で解決です。

タイトルとURLをコピーしました