警告のURLのエラーを修正し、サーチコンソールで検証した結果、今度は新たに【推奨サイズより大きい画像を指定してください】という、黄色い文字色の警告。
警告のレッドカードが、イエローカードになったという感じです。
イエローカードは、「エラーは有効にしてあげるけど、ここを直しといてね」みたいなイメージに素直に受け止める私、ままんです。
しかし、イラストの画像を修正するって…トホホ
今回は、黄色い警告【推奨サイズより大きい画像を指定してください】に従って、画像サイズを修正・差し替えして、最終的には黄色い警告を減らすことができたのか、やってみました。
推奨サイズ？どうして？どうやるの？どうなった？ と興味シンシンなかたは、ぜひご覧くださいね。
AMP HTML で表示するための画像サイズ
Googleで検索すると、知りたい検索結果の１ページ目に「稲妻マーク付きアイキャッチ画像付」で表示されている検索結果をご覧になったことがありませんか？
AMPのガイドライン「記事」の項目を読むと、どうして推奨サイズが大切かが分かります。せっかくアイキャッチ画像のサイズを変更したり差し替えたりするなら、御一読してみることをオススメします。きっとワクワクしてくると思います！
AMP ページのプロパティ <image>の定義にそって画像を修正する理由
推奨サイズは「画像の幅が1200ピクセル以上」なぜ？
テキストだけのページにも画像を最低でも１つ含めることが、AMP HTMLの定義になっています。アイキャッチ画像がないページは、一番先にある画像がアイキャッチとして使われますので、１つの記事に対して1200ピクセル以上の画像を最低１つ用意します。
他にも細かな最適な表示にするための項目があります。以下はAMPのガイドライン「記事」の項目からの抜粋です。
記事に直接属するマークアップされた画像のみを指定する必要があります。
画像の幅は 1200 ピクセル以上にする必要があります。
すべてのページに画像を少なくとも 1 つ含める必要があります（マークアップを含めるかどうかは問わない）。Google は、アスペクト比と解像度に基づいて、検索結果に表示する最適な画像を選択します。
ワードプレステーマCocoonで一刻も早く警告をなくすだけの応急処置
- 警告を解除して、AMP HTML の画像（image)がスマホでも美しいレイアウトで表示され、スイスイと高速で離脱率の少ないページになるようにしたいけど、ページ数が多すぎる！
- そもそもテキストがメインコンテンツだから、イメージ画像を用意するのは難しい。
- 自分の記事の検索結果への表示が、検索１ページ目になんてならない。
一刻も早く警告をなくすだけの応急処置、ワードプレステーマCocoonの設定は簡単です。
該当の記事のエディター画面【AMP設定】で「□AMPページを生成しない」にチェックを入れて更新すれば、AMPの警告を回避することができます。
cocoon設定の【AMP設定】から、「カテゴリーごとにAMPページを生成しない」設定も、チェックを入れて保存するだけで完結です。
アイキャッチ画像を特に設定していない記事で、更新した記事がAMPの生成をしている場合、最初の画像がスマホ画面に表示されるようなのですが、黄色い警告【推奨サイズより大きい画像を指定してください】「画像サイズが1200ピクセル以下だからAMPの定義に合っていないよ」ってこと。
画像サイズが合っていても、その画像を見ただけで内容が一目で分かる画像を用意してくださいということなんです…
画像がコンテンツに合わないって？
アイキャッチを用意していなかったラーメン屋さんのブログ記事が、記事の中で最初に貼った画像が出前でとったお寿司だったりする、みたいなイメージなんでしょう。
現在、アイキャッチ画像を用意していなくて、最初に貼った画像が記事内容とは関係ない画像で、さらに1200ピクセルを超えていた場合、たぶんAMPの検索上位表示からはすでに候補にもならないということなんでしょう。
なのでAMPページを生成しないというのも、警告段階では１つの回避策だと思います。
すべてのページに1200ピクセル以上の画像を１つ含める
上の画像は、PhotoScapeで自作した「no image.png」という画像です。
1200px以上のサイズの画像が、自分のパソコンやスマホの画像からアップロードしたものであり、ページに１枚以上あることがAMPの構造化の定義、imageの大きな条件です。
【推奨サイズより大きい画像を指定してください】と警告を受けている画像の、記事にふさわしいものが見つからない、見つけるのは大変！なので打開策としてフォトスケープで画像処理をしてみました。
警告のURL画像を修正して検証してみる
警告を受けている画像はこちら、イラストレーターさんが無料で配布している可愛い線画のイラストでした。
画像ファイルサイズは軽くて大きさも小さいんですが、私がとても気に入っている画像です。以前は軽くて小さいサイズでないと、アップロードもダウンロードにも負担がかかってしまうということで、軽くて小さい画像が好まれていたんです。
無料画像は、「二次加工OK」「二次加工禁止」、著作権などイラストレーターさんによって決め事が違います。このイラストが本当に可愛いくて気に入っているのですが、画像自体に加工はせずにフォトスケープで1280×720PXの新規画像ファイルに貼ってみることにしました。
自分のパソコンの中に元画像を保存していない場合は、自分のブログから「右クリックで画像を保存」
フォトスケープで、先ほど「no image 1280×720」で作った.pngファイルに挿入
本当に小さい！サーチコンソールで警告が出るって意味がよくわかりますよね（笑）【推奨サイズより大きい画像を指定してください】という警告って、この手の記事はたくさんある…一気に処理していこう！
今は新しい画像を探したりするより、この手が早いと自己判断、あとは集中力と忍耐！
最初に作った「no image 1280×720」.pngファイルをテンプレートにして、画像が小さすぎて寂しいので記事の内容の言いたいことをサブタイトル風に…
出来上がったファイルをアイキャッチ画像に設定していきます。
警告のアイキャッチを削除して、AMPの定義に合うサイズの画像に入れ替えます。
更新日の設定に注意！更新日の変更はしないほうがいいようです。
更新して公開します。
同じカテゴリーに、イラストのアイキャッチ画像の記事がもう１つあったので、ついでに修正して更新しました。
まだほかにもあったら、警告というかたちでサーチコンソールのAMPがお知らせしてくれるはずです。
サーチコンソールで修正を検証してみる
ご指摘の例に上がったURLの問題【推奨サイズより大きい画像を指定してください】の修正ができたので、【修正を検証】してみます。
画面が【初期検証中】に切り替わります。まもなくするとこの画面は消えて、Google search console からメールが入ります。あとは気長に待ちましょう。
まとめ
グーグルサーチコンソールのAMPでのエラー【推奨サイズより大きい画像を指定してください】の警告への対処法について。
今回は、ワードプレステーマCocoonでAMPを生成しない方法と、自作画像を作って修正する方法をお伝えしてみました。
警告が解除される方法はAMPを生成しない、または記事の中に１つ以上画像を置く。画像のサイズは幅1200px以上です。
- Cocoonでは、カテゴリーごとAMPを生成しない方法と、個別記事ごとにAMPを生成しない方法がある。
- 幅サイズ1200px以上の画像ファイルを画像編集ソフトで作り、アイキャッチ画像に設定する
スマホから検索したユーザーが、プレビュー画像であるアイキャッチ画像から入ってくるように、アイキャッチ画像は見ただけで記事の内容が魅力的に伝わるものを作るようにしていきましょう。
サーチコンソールの検証結果でAMPの警告に合格して、スマホ画面からの離脱が少なくなると嬉しいですよね。サーチコンソールのお知らせには、素直にコツコツと向き合っていきましょう。
AMP HTMLの目指していることは、AMPのガイドライン「記事」の項目を読むと、だんだんと理解できてきます。
ガイドラインのHTMLタグを見て、自分のエディターテキストを見比べたり少しの修正ができるようになるには、基本的な「HTML」「CSS」を分かるように、手元に本を置くこともお勧めします。検索して調べている時間より、本の方が見つけやすいこともあるんです。
AMPが有効なページでサイト運営ができるように、コツコツといきましょう。
![[書籍] 書きながら覚えるHTML＆CSS入門ワークブック【10,000円以上送料無料】(カキナガラオボエルHTML&CSSニュウモンワクブック)](https://i0.wp.com/thumbnail.image.rakuten.co.jp/@0_mall/gakuhu/cabinet/m97847741/m9784774196268.jpg?resize=128%2C128&ssl=1)
