AMP HTML タグの属性で指定されたレイアウトが無効です!?〜 video 動画のサイズ指定

スポンサーリンク

「グーグル・サーチ・コンソール」の通知に「AMP HTML タグの属性で指定されたレイアウトが無効です。」というエラーが表示されました。

今回は、動画ファイルをアップロードするときの注意点を書きました。

スポンサーリンク

表示されたエラーメッセージを読むと

通知メッセージによると、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″」と要素のサイズ指定を明示しました。

以下の状態で、「修正を検証」し、「検証:開始」状態になりました。

数日のうちに結果がわかると思います。

追記(2020-09-05):無事に修正されました

Google Search Consoleの通知で、無事に修正が確認できました。

1日で結果が出ていますね!

AMP版のHTML

ちいラボ
ちいラボ

AMPって何?

AMP」というのは、過度な装飾を省いてあるページで、いわばスマホ用の簡易版のことです。

AMP(アンプ)は「Accelerated Mobile Pages」、つまり「高速モバイル用ページ」という意味です。

もともと、スマホ版というとレイアウトや大きさを変更したページのことでしたが、AMPはさらにデータを軽量化して、モバイル通信でも高速で表示されるように工夫したページです。

ウェブサイトの方でAMPページを生成する設定にしておくと、ページURLの最後に「?amp=1」をつけて簡易版を表示させることができます。

スマホのユーザーが、Googleなどの検索エンジンで検索すると、検索結果のページにAMPページがあれば、そちらに誘導します。

そうすることで、スマホのユーザーがストレスなく、スムーズにページを閲覧することができるのです。

AMP版ではHTMLコードが変わっている

ちなみに、エラーメッセージで表示されたHTMLと、ブログ上で編集したHTMLには違いがあります。

ブログシステムは、もとの記事のHTMLコードを改変して、AMP版を生成しているのがわかります。エラー表示されたコードが、そのままもとの記事あるわけではないので、エラー箇所を探すのには注意が必要ですね。

こちらもどうぞ

タイトルとURLをコピーしました