「グーグル・サーチ・コンソール」の通知に「AMP HTML タグの属性で指定されたレイアウトが無効です。」というエラーが表示されました。
今回は、動画ファイルをアップロードするときの注意点を書きました。
1. 表示されたエラーメッセージを読むと
通知メッセージによると、AMP（スマホ用に高速表示されるページ）のタグに問題があるようです。
Search Console により、貴サイトに影響する「AMP」関連の問題が 1 件検出されました。
主なエラー
エラーにより、貴サイトのページまたは機能が検索結果に表示されなくなる可能性があります。貴サイトでは、以下のエラーが検出されました。
AMP HTML タグの属性で指定されたレイアウトが無効です。
上記の問題をできる限り解決されることをおすすめいたします。こうした問題を解消することで、サイトのエクスペリエンスや Google 検索結果での表示を最適化できます。
「AMPの問題を解決する」をクリックしてみると、詳しいエラー箇所がわかります。
なぜか、選択範囲が広すぎますが、どうも<video>のタグに以上があるようです。
該当記事の編集ページで、動画を挿入したブロックをHTML表示にしてみます。
こちらがそのコードです。
<figure class="wp-block-video"><video controls src="https://chiilabo.com/wp-content/uploads/2020/08/1ac2d67769424bcb57768dd2004df0b4.mp4"></video></figure>調べてみると、どうも幅、高さの指定がないのがよくないようです。
そこで、以下のように修正しました。
<figure class="wp-block-video"><video controls="" width="660" height="660" src="https://chiilabo.com/wp-content/uploads/2020/08/1ac2d67769424bcb57768dd2004df0b4.mp4"></video></figure>「video controls」の後に、「width=”660″ height=”660″」と要素のサイズ指定を明示しました。
以下の状態で、「修正を検証」し、「検証：開始」状態になりました。
数日のうちに結果がわかると思います。
2. 追記（2020-09-05）：無事に修正されました
Google Search Consoleの通知で、無事に修正が確認できました。
１日で結果が出ていますね！
3. AMP版のHTML
AMPって何？
「AMP」というのは、過度な装飾を省いてあるページで、いわばスマホ用の簡易版のことです。
AMP（アンプ）は「Accelerated Mobile Pages」、つまり「高速モバイル用ページ」という意味です。
もともと、スマホ版というとレイアウトや大きさを変更したページのことでしたが、AMPはさらにデータを軽量化して、モバイル通信でも高速で表示されるように工夫したページです。
ウェブサイトの方でAMPページを生成する設定にしておくと、ページURLの最後に「?amp=1」をつけて簡易版を表示させることができます。
- （通常版のURL）https://chiilabo.com/2020-07/line-firework-message-movie/
- （AMP版のURL）https://chiilabo.com/2020-07/line-firework-message-movie/?amp=1
スマホのユーザーが、Googleなどの検索エンジンで検索すると、検索結果のページにAMPページがあれば、そちらに誘導します。
そうすることで、スマホのユーザーがストレスなく、スムーズにページを閲覧することができるのです。
4. AMP版ではHTMLコードが変わっている
ちなみに、エラーメッセージで表示されたHTMLと、ブログ上で編集したHTMLには違いがあります。
ブログシステムは、もとの記事のHTMLコードを改変して、AMP版を生成しているのがわかります。エラー表示されたコードが、そのままもとの記事あるわけではないので、エラー箇所を探すのには注意が必要ですね。
![[WordPress] 急に番号付きリストが表示されなくなった 【VK All in One Expansion Unit プラグインのリストスタイル】](https://chiilabo.com/wp-content/uploads/2020/09/59ee8983af407434d4e3f0a022c43e9e.png)
