何故か「タグ「span」の HTML 属性「id」の値が無効です」が出たら原因はこれだ！

AMPの制約ってホント多いですね。ブログをAMP対応にすると、最初は問題無かったとしても、ふとした時に結構エラーが出ちゃって困ります。
HTMLに精通している人ならともかく、趣味程度でやってる身としては原因判明と対応するまでにどうしても時間がかかってしまいますよね。

さて、今回普通にブログをアップしたのに、後日Google search consoleから、

「Accelerated Mobile Pages」の問題が新たに検出されました

ときまして。

確認してみると、「タグ「span」の HTML 属性「id」の値が無効です」とのこと。

初歩的な部分だとは思うのですが、若干手間取ってしまったのと、忘れた頃に同じことやりそうな気がするので備忘録として書いておきます。
同じような現象で困った方も参考になれば幸いです。

TOC+プラグインが原因だった

今回この問題が発生した記事は1つだけ。
内容的には、この記事でした。

今回、AMP関連の記事を書いたときに発生しました。

Google search consoleのエラーを見たときに思ったのが、「span」なんて使ってないってこと。

で、エラーが出ているところを見ると、あー入ってる。
でもなんで？意味わからん！

で、よくよく考えると、TOC+プラグイン入れてるじゃないか！と気づいたわけです。

TOC+プラグインは、wordpress内で簡単に目次の生成が出来るし、ショートコードで呼び出しもできるので、長くてhタグも多用しているときは、メッチャクチャ便利なプラグインです。

目次を作る必要があるときって、私の場合は正直限られるんですが、それでも必要な時にわざわざコード書きたくないです。

そんなTOC+プラグインですが、これを有効化すると、spanタグが生成されるんですね。
で、なぜこれが悪さをしてる原因になったのか、というのが、TOC+プラグインの仕様という。

単語を自動的に属性にしちゃうマン

TOC+プラグインは、該当する見出しに半角英数の文字列が入っていると、それを属性とするように設定されています。

今回起きたのは、「AMP」という文言が入ったタイトル。
SpanタグのID=”AMP”は過去に禁止になっています。

自分では属性に設定していないものの、TOCが勝手に設定してくれちゃってるんですね。。
困ったー！　

対処方法

今回のようにならないために、大きく3つ対処法があります。

タイトルに半角英数を入れない

一番安全なのはこれですかね。
半角英数でなければ、「i-1」など、見やすい感じで振ってくれるので。

半角英数を複数入れる

そんなこと言っても難しいので、半角英数を複数入れると良かったり。
例えば、
「AMPはspanタグに使えない」
という見出しだった場合、
「id=amp_span」
と言うようになるので、うまく英数を組み合わせつつ見出しをかんがえるのがいいかも。

TOC+プラグインを使わない

ぶっちゃけこれが一番かもだね。
エラー出さないようにするには一番です。

でも他に方法あるような気がする

現在の対処法としては以上ですが、もっと設定変えたらこんなこと起きない気もするんだけど、どうなんでしょ。
見つけたら追記します。

そんなわけで、

「タグ「span」の HTML 属性「id」の値が無効です」
と何故か出てきた方、焦らずにやればかんたんに直せますので、ご参考まで！