Google Search Console AMP HTML タグの属性で指定されたレイアウトが無効です必須属性「height」がタグ「amp-video」にありませんの対処方法

Google Search Consoleからメールがきて
「AMP HTML タグの属性で指定されたレイアウトが無効です」
というエラーが表示されいてた

Google Search Consoleの管理画面を開き
該当ページのURLをクリックすると右側の詳細画面に
「必須属性「height」がタグ「amp-video」にありません」
という表示

どうやら、<video>タグにwidthやheightを指定していないとこのエラーが出るみたい

アスペクト比を維持しつつ画面の横幅いっぱいに動画が表示されるように設定するため
<video>タグにはwidhtとheightを指定しないで、CSSを使ってレイアウトを決めていたので、その影響みたい

WordPress本体の機能なのかCocoonテーマの影響なのかは不明なのだが
テキストモードで<video>タグを書いていて、widthとheightを指定していなかったはずなのに、
ビジュアルモードに切り替えると、width=”300″ height=”150″という属性値が勝手に追加される

たぶん、一度もビジュアルモードに切り替えずにテキストモードだけで投稿を保存すると、widthとheightがないままなので
「必須属性「height」がタグ「amp-video」にありません」
というエラーに繋がるのだと思われる

Google Search Consoleの中に「AMPテスト」というのがある

widthとheightを指定し忘れていないか見直した後はAMPテストから確認をする

キャッシュの問題なのか、WordPress側で問題点を修正した直後にAMPテストをしても、相変わらずエラーが表示されたままだった

WordPressの管理画面で
Cocoon設定　＞　キャッシュの削除　＞　AMPキャッシュの削除
を実行

WordPress側でキャッシュをクリアしても変更が反映しない

正確に言うと
ttps://example.com/xxx?amp=1
みたいなURLにアクセスしたとき

WordPressの管理者としてログインしているときは
F12(Chromeの管理ツール)でHTMLのソースコードを確認すると変更が反映しているけど

管理者にログインしていない状態だと
F12(Chromeの管理ツール)でHTMLのソースコードを確認しても変更が反映していない

どうやらWordPress側の問題ではなく
amp用のページというのは
https://cdn.amproject.org/
というサイトにデータがキャッシュされていて

ブラウザにamp用のURLを打ち込んだときや、Googleの検索結果からクリックしてamp用のページに移動したときは、自分のサイトではなくcdn.amproject.orgからデータを受け取って画面に表示しているっぽい

cdn.amproject.orgからキャッシュを削除するには
RSA鍵を発行してサーバーに登録したりといろいろと面倒な手続きが必要になる

ampのキャッシュは24時間で更新されるようなので、とりあえず放置

しらばく待てば変更が自然と反映されるはず

Google Search Console AMP HTML タグの属性で指定されたレイアウトが無効です 必須属性「height」がタグ「amp-video」にありません の対処方法