「エラーになっても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);
以上、ご参考までに!(`・ω・´)ゞ