ブログ

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

https://harikatsu.net

本ホームページでは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」ページです。』と表示されれば修正は完了です!

ハリネズミくん

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

  • この記事を書いた人

ハリネズミくん

このサイトを運営しています。
普段はITエンジニアとして活動しています。
購入したもののレビューや、ゲーム、PCの設定や、筋トレ、その他生活改善情報などを発信していきます。
- 2021年8月ブログ開設 -

オススメの記事一覧

1

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> 友達とプレイする際、一緒にプレイ ...

2

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> タルコフ(Excape from ...

3

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> アイロンがけについて、このように ...

4

健康寿命を延ばしたい!と思ったことはありませんか?老いるということに関して、そういうものなんだ、自然の摂理なんだ、と諦め ...

5

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> 「睡眠の質」意識されていますか? ...

-ブログ
-, ,