推奨サイズより小さいAMP画像サイズに関する警告 Search Console

f:id:vzero:20190205235629j:plain

Google Search ConsoleのAMPサイトのガイドラインが更新されブログに使用している画像が推奨サイズより小さいとの警告を受けていました。

>Image size smaller than recommended size(推奨サイズより小さい画像サイズ)

AMPとはGoogleが推し進めているモバイルページの読み込み時間を減らし高速表示させるための仕組みです。

 

Googleの推奨するAMP画像のガイドラインとは

Google Search ConsoleではAccelerated Mobile Pages・AMP(アンプ)のウェブサイトの画像を1200px幅にする事を推奨するとして、それ以下の画像サイズを使っているAMPページを所有しているウェブサイト管理者に対してAMP画像のガイドラインに関する2019年1月15日ごろから通知を送信しています。

1.記事に使用する画像の幅は1200ピクセル以上

2.全てのページに少なくとも1枚は画像が使われている必要がある

3.画像のURLはクロール可能かつインデックス可能であること

4.画像はjpg、png、gifで無ければいけません。アニメーションgifは使用しない

5.縦横の比率は16×9、4×3、および1×1の高解像度画像で幅と高さを掛けた時に最小で800,000ピクセルとなるサイズを指定して下さい。

 

はてなブログでは有料の「はてなブログPRO」のみAMP配信に対応

f:id:vzero:20190127201744j:plain

管理画面の詳細設定で「Accelareted Mobile Pages (AMP) を配信する」にチェックをいれるとAMP配信になります。

はてなブログではベータ版とのことでAMPの利用に次のような制約があります。

  • はてなブログのデザインテーマは反映されません
  • デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません
  • 記事中のstyle属性など、スタイル関連のHTMLは反映されません
  • 記事中のJavaScriptは反映されません(このため広告などが表示されないことがあります)
  • (HTTPSでなく)HTTPで配信されている画像は表示されません(はてなフォトライフやInstagramなどはHTTPSに対応しています)
  • AMPではページ上部にあるiframeの表示に制約があるため、例えば記事の先頭にブログカードを配置したときには表示されません

 

問題の対処法

問題を解決する方法としては全ての画像に対処する必要は無く、アイキャッチ画像の幅を1200px以上のものに差し替えることです。

これはアップロードしている元画像を差し替えるという意味でタグで表示サイズだけ引き伸ばしても意味がありません。

 

ブログに使う画像は大きい方が良いのか?

今回の警告で言われている画像サイズの警告は画像の縦横の大きさの事でKBなど容量の話ではありません。ですので若干話は横道にずれるのですが

ブログなどのウェブサイトに必要不可欠な写真はスマートフォンなどに搭載されるカメラの性能も数年前に比べ飛躍的に向上した事によって画像1枚辺りの容量も大きくなります。

私のスマホで撮影した場合、最小設定の3264×1840pxで1.8MB、最大設定の3968×2976pxでは2.2MBくらいになってしまいます。

いくら近年のモバイルスピードが向上しているからといってこれだけの容量の画像をそのままのアップロードしては閲覧者に負担がかかりすぎてしまいます。

画像の大きさはページの読み込み速度と直結しますのでページの読み込みが遅いとそれだけでユーザーが離脱していく可能性も増えます。

 

そしてページの読み込み速度はモバイル検索のランキングにも影響するとGoogleは発表しています。

webmaster-ja.googleblog.com

このようにページの読み込み速度がSEOにも関係してきます。

私の場合、ブログに使用する画像は1枚50KB前後、100KBを超えるサイズの画像はほぼ使っていません。ピクセル幅も多くの画像は480pxから640pxまでくらいにPhptoshopで編集しています。

 

ちなみにこのブログに訪れる過去7日間で最もよく使用されているデバイスの66%がスマートフォンで次にタブレットが13%、パソコンは21%となっています。

ダイヤルアップの時代からネットをやってるインターネット老人にとってはネットはパソコンで見るものと思っていましたが、今は殆どがスマホやタブレットなどのモバイル端末で閲覧している事が分かります。Googleがモバイルファーストインデックスなどといって本格的に展開していってるのも十分に頷けます。

(今はスマホで1ヶ月3~5GBとかで契約してる人も多いでしょうが、昔のインターネットは1ヶ月10MBの契約で3~4千円とか払ってたんですよ。)

 

そしてスマートフォンの画面で見る限りではかなり圧縮したところで見た目に劇的な変化はありません。

楽しい旅行の写真や綺麗な風景など自分で撮影した写真を大きな画像で見てほしい気持ちも分かりますが無駄に容量の大きな写真を載せるだけ閲覧者からも検索エンジンからも嫌われます。

 

画像サイズをを圧縮するには?

画像圧縮に便利な無料サイトを紹介します。

https://compressjpeg.com/ja/

最大一度に20個までのJPEGファイルをドラッグ&ドロップして自動的に圧縮してくれるサイトです。PNGの圧縮にも対応しています。

f:id:vzero:20190205222026j:plain

プレビュー状態で圧縮のクオロティを調節する事が出来ます。例の写真では79%も削減できています。

 

はてなフォトライフで画像圧縮

また、はてなブログの場合では圧縮ツールを使わず『はてなフォトライフ』の画質設定で写真の圧縮率を変える事が出来ます。

はてなブログを使っている殆どの方ははてなフォトライフにアップロードした画像で記事製作していると思うのですが初期設定のままにしている人は多いのではないでしょうか。

f:id:vzero:20190205225938j:plain

ご自身のはてなフォトライフページにアクセスして右上の設定をクリックしますと設定ページに移ります。その中にある「画質」を調整する事で圧縮が行えます。数値を変更したら「この内容を変更する」をクリック。

 

AMP配信のメリット

AMPはGoogle、Twitter、WordPressなどのIT企業が参加・推進するプロジェクトで記事の処理を重くするJavaScriptの使用を制限しロード時間を短くし、さらにGoogle側にキャッシュ化させることでさらに高速に表示させます。

 

また対応しているページはトップニュースのカルーセルで大きなアイキャッチ画像が表示されます。しかし現在のところでは推奨サイズの1200pxより小さくても問題なく表示されています。

f:id:vzero:20190206001835j:plain

 

AMP化のデメリット

AMPでは通常のサイトに比べて使用できるタグを制限し、JavaScriptも使えない仕様になっています。ページの内容によってはデザインが崩れたり、上手く表示できない可能性があります。

 

結局AMP配信を解除しました

ブログ運営で画像の大きさや画質サイズを減らす処理をしておくのは重要と考えていたのですが今回の警告では「そのサイズでは小さすぎる」とまさかの警告です。重ねて強調しますがここでいうサイズが小さすぎるというのは画像の縦横の大きさの事でKBなど容量の話ではありません。

今後は画像の大きさは1200ピクセル以上にしつつ、画質は落として容量を減らす処理がAMPモバイルサイトでは必要とされていくようです。

 

今回問題になっている要件は記事のアイキャッチに使っている画像のみでサイト全部の写真に当てはまる内容ではありません。記事の頭のアイキャッチ画像だけ差し替える事が出来れば問題ないようです。今回の記事では1200pxのアイキャッチ画像を試しにアップロードしてみました。

 

変更しろというなら全ての記事でやってもよいのですが、今のところ当サイトではAMP配信による恩恵をさほど感じておらず他の記事にまで対応するのも面倒なので結果AMP配信を止めてしまいました。それでもGoogle側にキャッシュがしばらく残っていると思うので反映までどれだけ時間がかかるか分かりませんが…

 

それでは以上、『推奨サイズより小さいAMP画像サイズに関する警告 Search Console』でした。