カエレバリンクがAMPエラーになる場合の対処法

本ホームページではAffinger6 (Action)を利用しています。

なんとチェックを付けるだけでAMP対応もできます！※ベータ版の機能です

意気揚々と「AMP対応する」チェックを付けて満足していたのですが、

ある日Google Search Consoleを見ていると、カエレバリンクを貼った場所で以下のようなAMPエラーが表示されていました。

ハリネズミくん

なんぞこれ

商品を紹介する際は、カエレバリンクをカスタムHTMLブロックで表示させています。

どうやらカスタムHTML内でエラーが出ているようです。

この記事ではカエレバリンクを張った記事にでる「AMP HTML タグの属性で指定されたレイアウトが無効です。」というエラーの直し方について解説します。

まずはAMPテストサイトで原因を調べる

まずはAMPテストサイトで原因をより詳しく調べてみましょう。

アクセスしてテストするAMP記事のURLを貼り付けます。

URLはGoogle Search Consoleでエラー判定されたページのURLでOK！

解析が完了すると、「検証の問題」セクションで詳しい原因を知ることができます。

原因は 『必須属性「height」がタグ「amp-img」にありません』

『必須属性「height」がタグ「amp-img」にありません』というのが本当の原因のようです。

注意：赤くなっているHTMLコードを調べても、height="1"がちゃんと指定されていて、なんでheightプロパティが指定されていないのか、がわかりませんでした。

AMPコードではなく、もとの記事のHTMLコードを見てみると原因がわかりました。

記事をコードエディターで表示してから、ex=と検索してみてください。

<img src="https://....jpg?_ex=64x64" style="border: none;">

ハリネズミくん

確かにheightないじゃん！

修正します。

複数ある場合はエディタの置き換え機能を利用するといいと思います。

検索ワード： _ex=64x64"

置き換え後：_ex=64x64" width="64" height="64"

修正前

<img src="https://....jpg?_ex=64x64" style="border: none;">

修正後

<img src="https://....jpg?_ex=64x64" width="64" height="64" style="border: none;">

修正されたか、 AMPテストサイトで 再度テストする

再度 AMPテストサイトで確認してみましょう！

『「有効なAMP」ページです。』と表示されれば修正は完了です！

ハリネズミくん

他にもいろんなエラーが出る場合があると思います！
今回と同じよな場面に直面した方の助けになれば幸いです！
ではまたっ