はじめに
『AMP(Accelerated Mobile Pages)』というモバイルでのウェブサイト閲覧を高速化する仕様があります。
Googleが中心となって立ち上げたオープンソースプロジェクトらしいです。
対応しているとモバイル端末でのウェブサイト表示が高速化されます。
利用する側は便利ではあるのですが、サイトを作る側は注意が必要です。
シンプル表示にするために制約が厳しく、「width」と「height」が必須だったり特定のHTMLやタグは使用できません。
違反すると問答無用で『Google Search Console』様からエラーのお達しが届きます。
無視しても良いらしいですがどんな制裁が待っているのか不安で眠れなくなります。
そこで今回は私が一番よくやらかすエラー報告について、備忘録としてこの記事を残します。
解決したのが嬉しくて記事にしましたが、私のような初心者以外には当たり前過ぎて役に立たないかもしれません！
予めご了承ください。
問題
『AMP HTML タグの属性で指定されたレイアウトが無効です。』
YouTubeの動画を埋め込んで数日後、こんなエラーが発生する事があります。
埋め込むときのHTMLでは「width」や「height」を指定しているにも関わらず、詳細を確認するとAMPのページではそれらが有効になっていません。
何故だか知りませんが「width」や「height」が消えているのです！！！
私の場合、これらはYouTubeの動画を埋め込む時に「開始位置」を変更していると発生します。
ここらへんはYouTube側の設定はもちろん、それ以外にワードプレスで使用しているテーマやプラグインによっても変わってくるかもしれない。
かなり限定されるエラーだと思います。
解決法を探り無駄な時間を浪費していたのですがあっけなく解決しました。
解決法
YouTubeの動画を埋め込む時の画面を見比べてみます。
上が「開始位置」を指定していない状態。下が開始位置を指定している状態です。
HTMLのURLを指定する部分の末尾のIDアドレス（赤枠）が若干変化しているのが分かります。
※動画は前回のMPOのものを使わせてもらいました。（IGNさん勝手にありがとぉ！）
該当箇所
開始位置を指定しない："https://www.youtube.com/embed/16DQ3xyO3Hc"
開始位置を指定する："https://www.youtube.com/embed/16DQ3xyO3Hc?start=2"
あれ？おかしくない！？開始位置を指定した時の「start」の前にある「?」って何だ！？
そうです。こいつがエラーの原因だったのです！！！！！！！！！！！
このID末尾の「?」を消したら呆気なくエラーは解消されました…。
もしかすると皆知ってて当たり前の事だったり、見当違いの事を言っているかもしれません。
こんなしょーもない事に1時間以上かけてしまったなんて言えない！！！！！
あと、作成した記事がAMPのページとして正常に生成されているかの確認に便利な拡張機能があります。
滅茶苦茶便利なので「Google Chrome」を使用している方は「AMP Validator」をゲットしておきましょう。
記事作成して直ぐにAMPのページを確認することができるのでとっても便利です！
------（追記）-----------------------------
すみません…あのあと動画見てみたら、動画がはじめから再生されてしまいました…。
この方法だとどうやら途中から再生することはできないようです…。
無能すぎてすみません…。生きててすみません！！！
これからもエラーあると思うので、打開策が見つかれば追記させていただきます！
この記事は戒めとして残しておきます。
