AMPページの目次が原因でエラーに!見出しに「AMP」はダメ?

「エラーになってもAMPページが生成されないだけで、悪影響はないからなぁ」と、サーチコンソールに表示されていたAMPエラーをずっと無視していたんですが、先日ようやく対処しました。

エラーになった記事が全然少なかったので、すぐに終わったんですが、中には「へ〜、これもダメなんだ」というものもありました。

例えば、タグ「span」の属性「id」に無効な値「AMP」が設定されています。というエラー。コードを確認する前は「?」という感じでした。

idに「AMP」を指定するとエラーになる

実は、AMPページでは、<span id="amp">AMP</span>のように、idに「AMP」か「amp」を指定するとエラーになります

  • ampere
  • mamp
  • VAMPS

など、amp、AMPが含まれている文字列であれば大丈夫ですが、「AMP」「amp」だけではダメです。

ですので、コードを書く時はハイフンを付けて「amp-1」のような名前にするか、「amp-page」などの固有名詞にするのが良いでしょう。

目次プラグインでエラーが発生?原因は?

「idにAMPと指定しなければいいんでしょ?」ということなんですが、実は、WordPressプラグイン「Table of Contents Plus」を使って目次を生成すると、冒頭のエラーが発生することがあります。

というのも、Table of Contents Plusは、見出しから目次を生成してくれる便利なプラグインなんですが、アンカーリンクには見出しの中にある英数字が使われるからです

(英数字が存在しない場合、デフォルトでは「i」という文字列が使われる)

そして、厄介なのは、英数字がプラスされた文字列がidに指定されること。いくつか具体例を挙げますが、AMPについての記事を書かない場合でも同様のエラーが発生することがあります。

良い見出し

  • AMP対応で表示速度が1秒以下に!
  • AMP(Accelerated Mobile Pages)とは?
  • AとMとPとA

ダメな見出し

  • AMP最高!めっちゃ早い!
  • AMPとは?
  • 読み込みが遅いページは最悪!みんなもAMPに対応しよう!
  • AとMとP

対処方法

さて、この問題への対処方法ですが、実は、とても簡単です。AMPを「AMP」と全角で入力するだけでOKです。見出しだけで使うので、見た目もそこまで気にならないでしょう。

また、下記のコードをfunctions.phpにコピペすることで、半角のまま使うこともできます。当サイトはこちらの方法を採用しています。

function convert_toc_to_amp ($the_content) {
//目次修正
 $pattern = '/<span id="AMP">/i';
 $append = '<span id="AMP-1">';
 if(preg_match($pattern,$the_content,$matches) === 1){
 $the_content = preg_replace($pattern, $append, $the_content);
 }
 $pattern = '/<a href="#AMP">/i';
 $append = '<a href="#AMP-1">';
 if(preg_match($pattern,$the_content,$matches) === 1){
 $the_content = preg_replace($pattern, $append, $the_content);
 }
return $the_content;
}
add_filter('the_content','convert_toc_to_amp', 999999999);

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

カテゴリーWordPress豆知識

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!