最近、当サイトをAMP化しました。とりあえずAMPのページも表示できるようになっただけでカスタマイズしないといけません（メニューがまだでていない・・・）が、やはりサイトの表示が速いというメリットは大きいと思われます。
Googleのサーチコンソール（旧ウェブマスターツール）にAMPのインデックス状況、エラー状況を教えてくれるメニューができているので見てみたところ、残念ながらエラーが出ています。
根本的にはHTMLの仕様に原因があるようですが、比較的簡単に対処できました。
サーチコンソールのエラー
サーチコンソールで見てみるとエラーが起こっているページがあります。
禁止されたHTMLタグ？
エラーの理由は、認められていないHTMLタグを使用しているためと書かれています。丁寧に詳細が書かれています。
The attribute ‘id’ in tag ‘span’ is set to the invalid value ‘AMP’.
＜SPAN＞要素のID属性に’AMP’を使っていて、それは禁止されている、ということだそうです。<span id=’AMP’></span>のようなコードがどこかにあるということですね。
原因は目次プラグイン
元々、特に自分でコーディングした場合でなければワードプレスのHTMLに<span>がでてきてID属性が付いていることはありません。今回のページにも自分で<span>をを書いてはいませんでした。
公開されたページを見ると確かに<span id=”amp”>が挿入されていて、Table of Contents Plus（TOC+）という目次を作ってくれるプラグインによるものでした。
今回のエラーの対処法
今回発生してしまったAMPエラーの対処法は3つ考えられますが、今回は最初に挙げる「見出しを変える」で対策しました。たぶん、これが一番確実です。
見出しを変える
見出し（H2、H3など）を使って目次を作ってくれるプラグインを使っていたことが直接の原因になってしまいました。ただ、すべてのページが悪いわけではなく、ID属性がAMPであったことが問題でした。他に、-amp-、i-amp-、amp-といった「AMP（Accelerated Mobile Pages）」で使用される言葉を使っているとエラーになります。
HTML4.xでは見出しに日本語を使えないので、日本語と英語が混ざった見出しから目次を作るときに英語だけを抜き出してしまっていたのがエラーになった原因でした。
例えば、「これでわかったAMPの凄いところ」ではエラーになってしまい「やっぱりGoogle開発のAMPは凄い」ならたぶん大丈夫で、「すごいぞAccelerated Mobile Pages」なら問題にならないのです。
プラグインを変える
今回のTable of Contents Plusプラグインは最終更新日が2015年の古いプラグインですので対策されていない可能性があります。
他のプラグインはしっくりこなくてまだ試していませんが、AMPが出てから更新されているプラグインなら直されているかもしれません。
置換するプラグインをいれる
出力される記事のHTMLをスキャンして<span id=’AMP’>と<a href=”#AMP”>の「AMP」を何かに書き換えてくれるプラグインを入れれば一挙に解決できます。
以前記事に書いたことがあるCM Search & Replaceのようなプラグインを使えば一発です。
サイトが遅くなりそうですが、キャッシュされるAMPページに表示する分には問題なさそうですし、キャッシュ系プラグインでも何とかなる気はします。
当サイトのようなAMPについて語らなくても問題ないページならここまで要らない気はしますが、万能な方法です。
インターネットのAccelerated Mobile Pagesの略としてのAMPなら良いですが、会社名のAMPとか、オーディオ機器のアンプとか、電流のアンペアとか、「AMP」が頻繁に出てくるサイトならどこで問題になるかわからないので、置き換えがベストではないかと。
「CM Search & Replace」以外に、「Search & Replace by Inpsyde」、「Better Search Replace by Delicious Brains」、「Search Regex Plugin」、「Real Time Find & Replace」といったプラグインでもできるようです。
コメント