Google Search Console で AMP の問題へ対応

先日、Search Console から以下のようなメールが届きました。

サイト https://wnkhs.net で「AMP」の問題が新たに検出されました

Google様からメールが来ると、若干焦ります。。
しかも検索に直截関係しそうな問題です。

メールに記載されていた問題は以下でした。

タグ「span」のHTML属性「id」の値が無効です

はい。span使っています。ダメですか？
たしかにAMPページではデコレーションは適用されていませんよね。
あれ？ちがいます？？

結論としては、プラグイン「TOC+」の仕様でした。
やってはいけないことが分かったので、回避策を含め、備忘録を残しておきます。

発生していた問題

メールに記載されていたとおり、spanのidに「amp」という値を設定してしまっていました。
AMPの仕様では、これはいわゆる予約語です。そのためのダメ出しでした。

ちなみに、この値は、目次を自動生成してくれるプラグイン「TOS+」が設定してくれていたものでした。
自分の手で記載したものではなかったので、仮説を立てるまで時間がかかりました。
Search Console で対象ページをクリックすれば、公開中のHTMLと問題個所が表示されるので、結論を見ながら考えることはできます。

解決策と回避策

「TOC+」では、半角英数字の見出しをそのままid属性として使っています。
全角文字に関しては、「あらかじめ指定した接頭語 + 半角ハイフン + 通し番号」という仕様です。

今回、見出し（h4）を「AMP」としていたために上記の問題が発生していました。

そこで、今回の解決策は、「AMP」を「AMP Setting」に変更しました。
結果、id知は「amp」から「amp-setting」になり、予約語ではなくなったのでした。

ちなみに、修正後は、Search Consoleの画面で公開バージョンのHTMLをチェックして、変更したことを報告します。

回避策として、今回の解決策以外にも以下が考えられます。
実際、動かしてみたのですが、今回の解決策としては採用しなかったものです。

• 見出し文字を「AMP」だけにしない（今回の解決策）
• 見出し文字の「AMP」を全角にする
• 自動目次（TOC+）を無効化する
• 見出しを書かない

2番目と3番目は現実味がありそうなので、少し詳しく書きます。
4番目はそのままなので、特に触れません。

「AMP」を全角で書く

全角文字のアルファベットは、システム的には「半角文字ではない何か」です。
おかしな書き方ですが、そういうことなのです。
禁則処理などにも影響するので、覚えておくとよい豆知識ですね。

実際、全角で見出しを書いたところ、id値は規定の通し番号体系になりました。

今回は、格好悪いと思ったので採用しませんでした。
システム的にどう読まれるかは微妙なところだと思います。（← 気にしているのはSEOです。）

TOC+を無効化

以下のショートコードを投稿内のどこでもよいので書いておきます。

[no_toc]

ヘルプページに書いてありました。

なお、上記はショートコード判定されないように、カッコをエスケープ文字にしてあります。（半角カッコにすると、この投稿もTOC+が無効になってしまうのです。）

調査過程

「span」タグという文字ずらに引っ張られて、お門違いのところを調査してしまっていました。
この投稿でもそうですが、文字装飾としてspanを手で書いているので、どうしても頭がそちらに行ってしまうのです。。

一生懸命、投稿の編集画面でspanタグを検索してしまいました。
そもそもid値など設定していないので、問題が見つかるはずもなく。。
まったくの徒労です。。

正しい調査経路をたどれば、今回の問題はそこまで複雑ではありません。

特に、新しくなったGoogle Search Consoleの画面では、今回のような問題発生部分などははっきりと示してくれます。
使いやすいです！

まとめ

Google様を信じたらいいことがありました。
Search Console からメールが来ていることを知った時にはどうしようかと思いましたが、結果としては、画面の指示どおりに作業を進めれば、最短距離で解決策にたどり着けたのです。（今回は遠回りしましたがｗ）

恐れなくてよいのです。
助けてくれる頼もしいパートナーです！！

そして、AMPの仕様はいまだに真面目に見ていませんが、やってはいけないことの1つを知りました。プラグインも絡みながら、id値がどうなるのかも意識しながら記事を書いていきます。