AMPエラー

AMPエラー spanのHTML属性idの値が無効【解決法】


スポンサーリンク

タグspanの HIML属性idの値が無効

Search Consoleから、AMPページにエラーがある通知がきました。

通知の内容

AMP ページのエラーを修正してください

お客様の一部の AMP ページが弊社のガイドラインに準拠していないことが判明しました。

そのため、該当するページは Google 検索の AMP 関連機能の対象とはなりません。

スポンサーリンク

AMPエラーの確認

まず、エラーの確認をします。

  1. Search Consoleを開く
  2. 詳細を表示をクリック
  3. Search Consoleを使用してAMPの問題を修正をクリック

AMPエラー

エラーの内容と該当ページとページ数が表示されます。

「タグ「span」の HTML 属性「id」の値が無効です」とのこと。AMPエラーのページの詳細を見てみます。

詳細を見る

  1. ①理由の部分をクリックする
  2. ②URLをクリックする
  3. 「公開中のバージョンをテスト」をクリック

AMPエラー

①をクリックする

AMPエラー

②をクリックする

公開中のバージョンをテストをクリックすると、問題のある箇所が表示されます。

AMPテストの結果

有効なAMPページではありませんと表示されています。

HTMLタグの禁止された用法、無効な用法とのこと。ソースを表示して問題のある箇所をクリックするとソース上の問題の箇所がわかります。

  1. ①ソースコードを表示をクリック
  2. ②問題の箇所をクリック

AMPエラー

問題箇所

問題は、タグ「span」の属性「id」に無効な値「AMP」が設定されています。

  • ②は、<span id=”AMP”>AMP・・・</span>
スポンサーリンク

AMPエラーの原因

IDs
Internal AMP IDs prefixed with -amp- and i-amp- are disallowed in AMP HTML.

タグ「span」の属性「id」に「AMP」は設定できないようです。

  • <span id=”AMP”>AMP・・・</span>

id=”AMP”になっています。

このエラーはプラグイン「TOC+(Table of Contents Plus)」が関与しているようです。

エラーの原因はTOC+

「TOC+(Table of Contents Plus)」は見出しのタグより目次を自動で作るプラグインです。プラグイン「TOC+」がHTMLタグを自動生成し、AMPエラーを引き起こすようです。

AMPエラーの解決方法

AMPエラーの解決方法は2通りあります。

  1. AMPという言葉を見出しから削除する
  2. TOC+を使って目次を表示させない

AMPエラーの解決法 1.見出しからAMPという言葉を削除する

TOC+が見出しにするhタグからAMPを削除します。

AMPを削除したくない場合は次の方法があります。

AMPエラーの解決法 2.目次を表示させない

TOC+を使って目次を表示させなければ、TOC+はそのページにタグを自動生成しません。

目次を表示させない方法は2通りあります。

  1. 上級者向け設定で「除外する見出し」に「*AMP*」を入れておく
  2. 除外する投稿にショートコードを記述する

1.除外する見出しに「*AMP*」を入れておく

hタグにAMPを記載したすべてのページの目次は表示されません。

設定方法

  1. TOC+の設定を開く
  2. 上級者向け設定を開く
  3. 「除外する見出し」に「*AMP*」と記載

2.ショートコード[no_toc]を記述する

投稿の編集で、ショートコード

[no_toc]を記述すると、その投稿ページでは目次が表示されません。

※注[no_toc]は半角で記載

AMPエラー解決の結果

  • hタグからAMPという文字を削除する
  • 「除外する見出し」に「*AMP*」を記載
  • ショートコード[no_toc]を記述

3通りの方法を試した結果、すべて、AMPエラーは解決しました。

AMPエラー