Compass media

Webサイトやブログのメディア運営のコツをコツコツと発信

Google Search Console から AMP「推奨サイズより大きい画像を指定してください」エラー発生時の解決方法

"AMPで「推奨サイズより大きい画像を指定してください」エラー発生時の解決方法"

Google Search Console から丁寧にメールで警告きているので原因と対策を実施したことを紹介します。

警告メッセージ:推奨サイズより大きい画像を指定してください

"AMPで「推奨サイズより大きい画像を指定してください」エラーメッセージ"

AMP(Accelerated Mobile Pages) とは、モバイル速度高速化の仕組み。Google の検索順位アルゴリズムにおいて、ユーザ体験(UX)を重視するためにモバイル表示速度を高速化することは重要。

なので、画像サイズは極力小さくしてきたのだけど、どうやら小さくしすぎたのが原因。

どのくらいのファイルサイズにすべきか、を Google ガイドラインなどを熟読し紐解いてみました。

AMPで「推奨サイズより大きい画像を指定してください」エラーの原因

"AMPで「推奨サイズより大きい画像を指定してください」エラーの原因"

警告メールに「AMPの問題を解決する」と Google Search Console へのリンクボタンがあるので、まずはサチコでエラー内容の詳細を確認します。

" Google Search Console へのリンクボタンがあるので、まずはサチコでエラー内容の詳細を確認"

2020/9/25に up した Code Pen の AMP 記事で警告を検知していることを特定できます。

CodePen の使い方とはてなブログへの埋め込み方を解説 - Compass note

Google Search Console の「URL検査」で詳細を確認

「URL検査」を行い詳細を見ていきます。

"AMPで「推奨サイズより大きい画像を指定してください」エラーのURL検査を実施"

AMP ページは有効ですが警告があります
Google 検索結果の AMP 固有の機能の対象ですが、AMP のおすすめの設定に完全には準拠していません。詳細

AMP のおすすめの設定に完全には準拠していません ということなので、おすすめの設定を確認する必要がありますね。

「?」アイコンは「問題のドキュメントに移動する」ことができるのでドキュメントを確認していきます。

Google Search Console Issue ヘルプページの構造化データ規約

移動先は以下の AMP Search Console Issue ヘルプページです。

Google-specific AMP Issues - Search Console Help

下記の問題が今回該当するので説明に記載されている「ガイドライン」へ移動します。

"Google Search Console Issue ヘルプページの構造化データ規約"

推奨サイズより小さい画像を指定してください
AMP の構造化データが、推奨サイズより小さい画像を参照しています。これにより、Google 検索で AMP 関連の機能がページに表示されなくなる可能性があります。また、サイズの大きい画像が Discover カードに表示されなくなり、ウェブページのトラフィックやユーザーのエンゲージメントを低下させる原因となることもあります。修正するには、ガイドラインに沿って大きな画像を使用してください。

参照先は「Google 検索デベロッパー ガイド」です。

Article  |  Search for Developers  |  Google Developers

Google 検索デベロッパー ガイド での画像サイズ規約

"Google 検索デベロッパー ガイド での画像サイズ規約"

「Google 検索デベロッパーガイド」による画像サイズに関する記述は2点。

  1. 画像の幅は 1,200 ピクセル以上
  2. アスペクト比が 16x9、4x3、1x1 の高解像度画像(幅と高さをかけて 800,000 ピクセル以上の画像)を複数指定すること

1200px以上の推奨サイズは知っていて、いつもしているはず。

もう一度問題のWebサイトを見直してみる。

あ、、、 いつもアイキャッチは 1200px で作成しているんだけど、この記事だけ gif をアイキャッチにして

  • Twitterでの見え方どうかな?
  • Webサイトの見出しでも動くのかな?

のテストしていたんだ。。

"CodePen の使い方とはてなブログへの埋め込み方を解説"

この gif は ファイルサイズ小さくするために 556 × 378px なので 1,200px 満たしていない。

他の画像も 800px 程度と小さく、ページ内に 1,200px 画像がないことが原因と特定。

AMPで「推奨サイズより大きい画像を指定してください」エラーの対策

"AMPで「推奨サイズより大きい画像を指定してください」エラーの対策"

原因がわかれば対策も明確になりますね。

今回はアイキャッチ画像を 1,200px で作成することが対策になります。

アイキャッチ画像を 1,200px で作成し記事を更新

いつもの 1,200×600px でアイキャッチ画像(↓)を作成して記事を更新。

"CodePen の使い方とはてなブログへの埋め込み方を解説"

compass-note.hatenablog.com

修正後、Google Search Console で再検証依頼

記事を修正して更新したら、Google Search Console で「修正を検証」を依頼しておく。

"記事を修正して更新したら、Google Search Console で「修正を検証」を依頼"

検証開始が受領されたメールで「問題の修正を検証しています」と送られてくる。

"Google Search Console で「修正を検証」を依頼受領メール"

あとは検証結果が出るのを待つだけです。