WordPressで見出しをつけてくれるプラグイン「Table Of Contents Plus」略してTOC+ですが、これでAMPのエラーが出ましたよ、というお話。
見出しプラグインTOC+がAMPでオイタをする
このサイトのGoogle Search Consoleを久しぶりに見たのですが、AMPエラーが結構出ていて、あれ？なんで・・・？と1つ1つ修正していました。
その中で1つ、記憶にないidがAMPエラーとして記録されているページがありました。
WordPressのAMPカスタマイズの記事なのにAMPエラー・・・これは恥ずかしい・・・！
ということで早速GoogleのAMPテスターでチェック。すると・・・？
HTML タグの禁止された用法、無効な用法
タグ「span」の属性「id」に無効な値「amp」が設定されています。
1 個のインスタンス
行 451:4
<span id="amp">ampのカスタマイズ前準備</span></h3>
ん？spanにampってidを入れた・・・？覚えがないなぁ・・。該当箇所のhtmlを見ていると・・・ん？これってプラグインで追加されてる？
h3タグにid付きのspanが追加されているので、見出し絡みのプラグイン・・・TOC+か！と原因は特定できました。
AMPでエラーが出ている原因は、どうやらampという文字列をidに指定しているその事自体のようです。
TOC+はhタグ内の日本語を無視してアルファベットだけ拾ってID指定しているようなので、「ampのカスタマイズ前準備」という見出しは「amp」になってしまうよう。
そしてid=”amp”はAMPではエラーになっちゃうんですね。じゃぁTOC+の設定で・・・とおもったら見出しの命名をコントロールするパラメータがない・・。
とりあえず、設定の上級者向けオプションで「アンカーに必ず小文字を使用」はチェックを入れて、id=”AMP”とid=”amp”が混在しないようにはしましたが、それでも見出しで「AMPの・・・」というのは結局id=”amp”になってしまう。
インデックス部分のCSSに接頭辞をつける事は出来るようですが、見出しのIDには接頭辞をつけられない・・・。
ということは見出しそのものをもうちょっと別のアルファベットを混ぜるものに変えるしかないのか・・・。それって本末転倒だなぁ・・・。