ブログ運営

AMP対応の「コンテンツの不一致: 埋め込み動画なし」問題の対処方法

どうも、フリーランスのITエンジニア兼ブロガー兼投資家のKerubitoです。

先日、Google先生からこのようなメールが届きました。

メール本文

AMPhttps://kerubito.net/で問題が検出されました

https://kerubito.net/ の所有者様

Search Console により、貴サイトに影響する「AMP」関連の問題が 1 件検出されました。

主な警告

警告は、サイトの改善のための推奨項目です。警告によっては、検索結果での表示に影響がある場合がございます。また、警告が今後エラーになることも考えられます。貴サイトでは、以下の警告が検出されました。

コンテンツの不一致: 埋め込み動画なし

上記の問題をできる限り解決されることをおすすめいたします。こうした問題を解消することで、サイトのエクスペリエンスや Google 検索結果での表示を最適化できます。

いきなり警告とか言われるとドキッとしてしまうのですが、おおよそ原因はわかっています。

数日前に行ったこちらの記事へのAMP対応。

GoPro7で自転車(クロスバイク)の動画とタイムラプスを撮影してみた

「埋め込み動画なし」とあり、確かにこの記事でYouTubeの動画を埋め込んでいます。

実際にスマホでモバイルの画面を確認

実際どのような表示になっているのか、自分のスマホで確認してみることに。

確かに画面真ん中に表示されるはずの動画がリンク・・・しかもただの文字列に!

AMPの問題をスマホで確認

これは自分的には警告レベルではなく、完全にアウトな状況。

「AMPの問題を解決する」で詳細を確認

さっそくメール本文にある「AMPの問題を解決」するからGoogleSearchConsoleに飛びます。

AMPの問題を解決

問題が1件検出されています。

Google先生的にはこれは「エラー」ではなくて「警告」。

さらに詳細を確認すると

正規のウェブページに埋め込まれている動画が、対応する AMP バージョンに埋め込まれていません。通常、正規のウェブページにある重要なコンテンツ リソースはすべて、対応する AMP バージョンに含めることをおすすめします。注: 動画は URL で検出されるため、同じ動画を 2 つの異なる URL で参照している場合は、この警告が表示されます。

とあります。

どういうことかというと、正規のウェブページとはPC向けの通常ページです。

で、そこに埋め込まれている動画が、AMP対応ページでは正しく表示できていないと言われています。

両方で同じコンテンツをユーザーが見れるようにしましょう、ということですね。

そりゃそうだ。

ネット上でちょこっと調べてみると、昔のYouTubeの動画だとこのような現象になるということですが、貼り付けてある動画は2019年9月にアップしたものです。

なので、何か他の原因がありそう。

YouTubeの埋め込みコードを使用することで解決

ちょっとハマってしまいました。

最近アップした動画ならいけそうな感じだったので。

で、ふと気づいたのがGoogle系のこういったコンテンツ貼り付けって「埋め込み専用のURL」があったよなということ。

Googleマップなんかもそうですし。

現在貼り付けているのは普通のYouTubeのURLです。

もしかしたらこれが悪いのかもと、埋め込みコードを貼り付けてみました。

やり方は簡単で動画ページの右下にある共有をクリック。

YouTube の埋め込みコードを取得

表示されたポップアップの埋め込みコードをコピーするだけです。

YouTube の埋め込みコードを取得

上が通常のURLで下が埋め込みコードです。

「https://www.youtube.com/watch?v=95__U-pIDC0」

「https://youtu.be/95__U-pIDC0」

ご覧のとおり、ちょっと違うんですよね。

で、埋め込みコードをブログに貼り付けるだけでこのとおり。

AMP対応の画面で動画が表示されました

無事、AMP対応のページでYouTubeの動画が表示されました!

-ブログ運営

© 2023 FIRE達成のフリーランスエンジニアブログ