当サイトのリンクにはアフィリエイト広告が含まれています

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

豆知識 By シェフ

「エラーになっても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);

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


カテゴリー:豆知識

シェフ

このサイト「Fantastech」を運営している人