AMPエラー 「id」に無効な値 | AMPでID属性に使用できない文字を調べてみた

最近僕が趣味で運営しているサイトをAMP化した。
しばらくすると、グーグルさんのSearch Consoleから次のようなエラーを受け取った。

タグ「h4」の属性「id」に無効な値「toString」が設定されています。

HTMLのID属性としては問題ない。
AMPの独自仕様だと思われる。

ネットで調べてみた

まずは同じようなエラーを受け取っている人がいないか調べてみました。
すると、次のようなエラーを受け取った人が続出しているらしいことがわかりました。

タグ「span」の属性「id」に無効な値「AMP」が設定されています。

どうやらAMPサイトは「AMP」という文字をIDとして使用できないようだ。
そして、このIDを使っているのはWordPressのとあるプラグインらしい。

僕のケースとは全く関係がないということがわかった。

AMPのドキュメントを見てみる

次にAMPの仕様または使用がわかるドキュメントがないか探してみた。

あった↓
AMP Websites Guides & Tutorials

この中でHTMLでのIDについて書かれているのが、次の部分だ。

IDs

Certain ID names are disallowed in AMP HTML, such as IDs prefixed with -amp- and i-amp- that may conflict with internal AMP IDs.

Consult the AMP documentation for specific extensions before using amp- and AMP IDs to avoid conflict with the features provided by these extensions, such as amp-access.

View the full list of disallowed ID names by searching for mandatory-id-attr here.

これを日本語訳すると次のようになる。

「AMP HTMLでは、内部AMP IDと競合する可能性のある-amp-およびi-amp-で始まるIDなど、特定のID名は許可されていません。
amp-およびAMPIDを使用する前に、特定の拡張機能についてAMPのドキュメントを参照して、amp-accessなどのこれらの拡張機能によって提供される機能との競合を回避してください。
ここでmandatory-id-attrを検索して、許可されていないID名の完全なリストを表示します。 」

この文章は僕のケースに当てはまらないような気がするけれど、原文の『here』の部分がリンクになっていて、詳しくはそちらを見ないといけないようだ。

見てみるとプログラムのソースファイルだった。
これみて使用できないIDを把握しなさい、というわけだ。

あほかと思ったが、幸いにも少しだけプログラミングの心得があったので解析してみた。

AMPでID属性として使用できない文字

次表がAMPでID属性として使用できない文字だ。
表中の「〇〇で始まる文字」は、〇〇だけの場合も含んでいる。

__amp_で始まる文字 __count__ __defineGetter__
__defineSetter__ __lookupGetter__ __lookupSetter__
__noSuchMethod__ __parent__ __proto__
__AMP_で始まる文字 $p $proxy
acceptCharset addEventListener appendChild
assignedSlot attachShadow AMP
baseURI checkValidity childElementCount
childNodes classList className
clientHeight clientLeft clientTop
clientWidth compareDocumentPosition computedName
computedRole contentEditable createShadowRoot
enqueAction firstChild firstElementChild
getAnimations getAttribute getAttributeNS
getAttributeNode getAttributeNodeNS getBoundingClientRect
getClientRects getDestinationInsertionPoints getElementsByClassName
getElementsByTagName getElementsByTagNameNS getRootNode
hasAttribute hasAttributeNS hasAttributes
hasChildNodes hasPointerCapture i-amphtml-で始まる文字
innerHTML innerText inputMode
insertAdjacentElement insertAdjacentHTML insertAdjacentText
isContentEditable isDefaultNamespace isEqualNode
isSameNode lastChild lastElementChild
lookupNamespaceURI namespaceURI nextElementSibling
nextSibling nodeName nodeType
nodeValue offsetHeight offsetLeft
offsetParent offsetTop offsetWidth
outerHTML outerText ownerDocument
parentElement parentNode previousElementSibling
previousSibling querySelector querySelectorAll
releasePointerCapture removeAttribute removeAttributeNS
removeAttributeNode removeChild removeEventListener
replaceChild reportValidity requestPointerLock
scrollHeight scrollIntoView scrollIntoViewIfNeeded
scrollLeft scrollWidth setAttribute
setAttributeNS setAttributeNode setAttributeNodeNS
setPointerCapture shadowRoot styleMap
tabIndex tagName textContent
toString valueOf webkitdropzone
msdropzone mozdropzone odropzone
webkitMatchesSelector mozMatchesSelector msMatchesSelector
oMatchesSelector webkitRequestFullScreen mozRequestFullScreen
msRequestFullScreen oRequestFullScreen webkitRequestFullscreen
mozRequestFullscreen msRequestFullscreen oRequestFullscreen

今回の僕が直面したエラーは次のようなものだった。

タグ「h4」の属性「id」に無効な値「toString」が設定されています。

表中に「toString」がある。使えない文字だった。

ここで気になるのが、大文字と小文字を区別するかどうかだ。
これについてはコードを解析しただけでは判別できなかった。
しかし実際に小文字に置き換えてAMPテストをおこなったところエラーになったので区別をしていないようだ。

とりあえず「toString1など、文字を追加して対応しておこうと思う。

使用できない文字が増える可能性あり

使用できないIDは、現在AMP関連の機能で使用されているIDである。
そのため、今後新しい機能がAMPに追加されると、その機能で使用しているIDが使用できなくなる可能性がある。

今使用できるとしても、他者が使用しそうなものは避けておいた方がいいかもしれない。