AMPエラーの第3弾です。
前の二つ
今回もSearch Consoleからのメールが来ました。
こんなのいただきました。
早速「AMPの問題を解決する」ボタンでSearch Consoleへ。
Search Consoleからのメール
サチコ（Search Console）の言う事にゃ、
「AMP HTML タグの属性で指定されたレイアウトが無効です。」ですと。
「何のこっちゃ」と思ったら前回と同じエラーでした。
さてSearch Consoleに戻って見てみると下の方に該当するページのURLがあります。
ちなみに末尾の「/?amp=1」がAMPページを表しています。
これを取れば通常のページが表示されます。
「AMPページって何？」って言う人はそもそもこの記事にたどり着いていないと思うので説明は省略します。
該当するページに行ってみました。
ア〜、画像のほとんどが表示されていないですね。
試しに「/?amp=1」を取って見ると普通に表示されます。
モバイルに最適化されたページだけの問題です。
問題の箇所を確認
前回までchromeの拡張ツール「AMP Validator」を使っていたのですが、今回は、ここへ行きます→AMPテスト
（どちらでも大丈夫ですけど）
該当するページのURLを入れましょう。
（処理に若干時間がかかります）
結果は？
なるほど〜、わかってましたけど〜。
「検証の問題」ブロックの該当箇所クリックでソースが右に表示されます。
エラー部分のソースコードが見れますね。これはいいね。わかりやすい。自分でソースコードを開かなくてもいいんだ。
該当する部分のソースコードはサチコでも見れます。
表示されてるページのURLをクリックすると右側に表示されます。
何がいけない？
さて、何がいけないのかというと今回の場合はimgタグの属性heightに「auto」が指定されていたからです。
（あれ、これ前回もそうだった）
AMPの時は「auto」はエラーになってしまうのですよ。
このへん詳しくは今回触れません。
別の記事で書きます。
エラーの原因は？
今回エラーのあったサイトはCocconテーマを使っています。
そしてAMPページを自動生成する設定にしています。
ネットの情報ではCocconの不具合でAMPエラーが起きてるみたいな事があってアップデートすると解消云々というのがありますが、今回はまったく関係なく私の設定ミス。
すごく簡単な事で画像を任意の幅で表示させようとwidthだけ数値を入れてheightはautoにしたのです。
画像それぞれに手動で設定しました。昔ながらのやり方です。
これがAMPのリファレンスに合っていなかったわけなんですね。
直し方はシンプル
直し方はじかに書き直しますよ。変更箇所がいくらもなかったのでね。
該当するimgタグのheightを「auto」から実数に書き換えました。
これ、大量にあったら地獄ですね。
一応画像のサイズを調べてheightを埋めていくので地味にめんどくさい。
結果は？
修正してもう一度
→AMPテスト
をしてみると
見事解決しました。おー疲れちゃん〜。
AMPエラーまとめ
今回修正箇所が少なくてよかったけど大量にあったら大変だよね。
Cocconの自動AMP化を利用しているわけだけど、タグの属性値が規定外だった場合は適当に調べて埋めてくれるといいね。
今回の場合だと「画像のサイズを取得してwidthに比例したheightの数値を自動で取ってきて設定する」、これをやってほしい。
誰か作って！
以上「AMPエラー：AMP HTML タグの属性で指定されたレイアウトが無効です」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。