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.

IDs | AMP HTML Specificationより

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

「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