AMP(Accelerated Mobile Pages)に手を出してみたら文字コードにやられた話

ランチェスターからおはこんばんちわ。

唐突ですが、チゲ鍋とかサハラ砂漠とかフラダンスとかサルサソースとかナイル川とか、同じ意味の言葉が繋げられて使われてるケースって結構多いですよね。
※ チゲは鍋という意味なので「鍋鍋」になっちゃってる、的な感じです

話は変わりますがAMPページってご存知でしょうか？
AMPは「あんぷ」と発音し、Accelerated Mobile Pages（あくせられいてっどもばいるぺーじ）の略なんですが、AMPページだとページページになっちゃうじゃん！とか思っていました。
思っていたんですが、あのGoogleさんが「AMPページ」とか言っちゃってて、でもこれもしかしたら日本語だからそうなっちゃってるだけで英語ではそうなってないんじゃないの？って思ったのに英語でも「AMP pages」だったんでもう諦めました。
チゲ鍋美味しいですしね。

さてそんなAMPページですが、その名の通り「モバイルで（読み込みが）速いページ」なのですが、どちらかというとGoogleさんで検索した際にAMPページがある場合には（GoogleさんがAMPページをキャッシュした上で）カルーセル表示をしてくれる場合がある、というSEO方面の意味が強い気がしています。
※ カルーセル表示ってのは横スクロールで表示されるギャラリーのようなものだと思ってください

これは「サッカー」で検索してみた例ですが、赤枠のところがカルーセル表示となっています。
このカルーセルをタップするとGoogleさんがキャッシュしたAMPページ本体が表示され、そこでもさらに左右スワイプで前後の記事に移動できるようになっています。

さて、そんなAMPページですが詳しい仕様とかはご本家にお任せするとして、ちょっとだけハマったお話をしてみたいと思います。

さぁAMPページを書いてみようとドキュメントを参照したり、他社様のAMPページを見ていたりしたわけですが、ドキュメントで

最上位階層のタグを<html ⚡>（<html amp>でも可）にする。

と書かれているにも関わらず、私が観測した範囲では後者（<html amp>）の書き方で書かれたAMPページしか見つかりませんでした。
<html amp>は代替表記であって正しくは<html ⚡>であり、
「これ、もしかして⚡の方を使えばちょっとだけ珍しいAMPページになるんじゃね！？（自己満足）」
という良く分からない情熱を持ってしまったところから間違いは始まりました。

そんなこんなでAMPページを実装し、バリデータを通してみたところ