ブログ画像の最適化「画像公開に関するGoogleのガイドライン」徹底分析!

最適な写真

※この記事は、別記事「ブログに引用する画像はどれが最適?画像の容量とサイズ☑」から派生したGoogleが公表しているガイドラインの詳細についてさらに理解を深める目的で作成しています。

 

前回は画像のサイズ圧縮がもたらすページ表示速度の向上が、ユーザビリティを高めてより信頼できるコンテンツになるというお話しでしたが、今回はGoogleが公表している「コンテンツに関するガイドライン」内にある、画像公開に関するGoogleのガイドラインの焦点。

 

要するに、「ブログ画像の最適化とは?」という内容です。

 

ブログ内に挿入する画像だけでなくブログの重要なオリジナル画像がGoogle画像検索で上位に表示されるための指針をご説明します。

専門用語が多く理解するのに時間がかかりますが、なるべくかみ砕いて分かりやすくお伝えします。

画像の最適化とは

最適化って何?

画像の最適化は、ブログサイト運営をするうえで必要不可欠の画像を適切な画像形式に変えて無駄な容量を圧縮することで、記事全体の容量をサイズダウンしサイトパフォーマンスの向上に繋げる手段を指しています。

 

容量面では、画像だけでなく記事の内容と一緒にGoogleアドセンス・アフィリエイトプログラムのバナーや、CTA(反応率)の一環として記事下部にメールマガジンリンクを配置することが一般的ですが、それにより読者が記事ページを開く前に時間がかかり過ぎてしまうことが懸念されています。

 

サイトパフォーマンス面では、ガイドラインに沿って不正行為をしないなど適切な方法で画像を最適化することにより、Googleアルゴリズム内にて画像・コンテンツの独自性があって読者の利便性が高いと評価をしてもらうことで画像検索で上位に表示されたりより良質なトラフィックをサイトに呼び込むことが可能になります。

 

画像最適化の基礎知識

基礎知識

Googleガイドラインや具体的な画像の最適化の前に以下のポイントは予備知識としてしっかり理解しておきましょう。

 

ベクター画像

ベクター画像は、ラスター画像と違いピクセルの点で構成されていません。
コントロールポイントと呼ばれる点が存在し、点と点を繋ぐ曲線に数式が組み込まれているのでズームしても点が見えることがなく滑らかで鮮明な画像です。

 

パンフレット・ロゴ・デザインに適した画像で、代表的なベクター画像にはPDF・SVG形式があります。

ベクター画像ズーム
Google Developersより引用

 

ラスター画像

ラスター画像は写真画像の特徴である小さなピクセル(画素)の集合体
1920×1020ピクセルのように表記され横×縦のピクセル総数が多いほど画像は繊細さですが、画像をズームすると下図のように滑らかではない目の粗い画像となってしまいます。

 

容量が大きくなってしまう特徴がありますが、写真やコラージュに適した画像で、代表的なラスター画像にはJPEG・PNGなどの形式があります。

ラスター画像ズーム
Google Developersより引用

 

CSSピクセル

CSSピクセルはブラウザ上で表示される仮想のピクセルのことで、最近のスマートフォンなどの高解像度端末では文字が読めなくなることのないようデバイスのピクセル数に対して2倍~4倍ほどのコンテンツを拡大して使用しています。

 

例えばiPhone6 Plus端末は解像度「1920 × 1080」ですが、デバイスピクセル比が約2.6に設定されており実際に使用されているCSSピクセルはわずか「736 × 414」となっています。

CSSピクセル

CSSピクセル

 

デバイスピクセル

デバイスピクセルは実際の端末であるパソコンモニター・スマートフォン・タブレットの画面に設定された解像度を表すピクセルのこと。

 

デバイスピクセルとCSSピクセルのおかげで小さいモニターにも高精細ディスプレイが搭載できる訳ですが、最新のiPhone Xの画像解像度「2436 × 1125」は最新の技術が結集されていると言えます。

デバイスピクセル

デバイスピクセル

 

可逆画像圧縮

可逆圧縮は圧縮前データと、圧縮・展開後のデータを比較すると損失がなく完全に圧縮前と同じように再現される圧縮方法のことです。

PNG・GIFが可逆圧縮形式に該当。

 

非可逆画像圧縮

非可逆圧縮とは圧縮前データと、圧縮・展開後のデータを比較すると完全には一致しないで一部のピクセルデータを除去してしまう圧縮方法のことです。

JPEGが非可逆圧縮形式に該当。

 

画像公開に関するGoogleのガイドラインのポイント

ガイドライン

画像検索をする際にあなたのオリジナル画像が上位表示されやすくなるためには以下の項目を押さえておく必要があります。

>>「画像公開に関するGoogleのガイドライン」はこちら

 

ユーザーに高い利便性を提供

Googleの画像検索では、ユーザーに高い利便性を提供することが最重要視されており、SEO対策がいくら優れていてもユーザーの高い利便性を阻害するものであっては意味がありません。
利便性を意味するポイントには以下のようなものがあります。

 

1.適切なコンテキスト

ブログやサイトページには独自の価値がある画像やテキストを優先的に使用しましょう。
他サイトのアンケート結果など引用・参照することはたまにありますがGoogleでは独自のコンテンツが少ないサイトは検索結果を表示する際に推奨されません、としています。

 

2.配置の最適化

もっとも重要な画像をサイトトップに記載することや、関連するテキストの近くに配置することが推奨されています。

 

3.重要なテキストを画像に埋めない

画像の中に、ページ見出しやメニュー項目などの重要なテキストを埋め込まないようにしましょう。
全てのユーザーがその画像にアクセスできる訳ではないことや、ページ翻訳ツールが画像内の文字を読み込めないことに起因しています。

 

4.あらゆるデバイスに対応したサイト作り

今ではパソコンだけでなくスマートフォンでも閲覧できるようサイト設計されているのが常識ですが、Google画像検索ではパソコンよりモバイル端末の方が多く利用されている現状があります。
あらゆる端末(パソコン・タブレット・モバイル)で閲覧できるよう、テストツールを使って動作確認や修正を行うことが求められています。

 

5.優れたURL構造を作成

Googleが画像を読み込む際、URLパスやフォルダを参照して画像の内容を判断しています。
サイトで使用する画像が多い場合は、ジャンルごとにURLを分類することが必要。

ページタイトルと説明を確認

Google画像検索では、表示された画像とユーザーが検索しているものが一致するかどうか確認するために自動的にタイトルとスニペットを作成しています。

表示されるタイトルやスニペットがより、画像と一致しているかどうかも重要なポイントです。

 

1.分かりやすいページタイトル

多くの場合、読者はページタイトルを見てクリックするかどうか判断していますので、Webページには質の高い分かりやすいタイトルがついていることが重要です。

また、タイトルに強調したいキーワードを重複して使うことはGoogleやユーザーから不正と見なされる場合があるので十分注意しましょう。

 

2.スニペットの自動生成

スニペットとは、Google検索した際に表示される候補ページの簡易な紹介文みたいなもの。
↓この赤線の部分がスニペット。
スニペット画像

 

このスニペットは「メタ ディスクリプション (metaタグ)」を使って、あらかじめスニペットに使われる文章を作成しておくことができますが、作成しない場合はGoogleで勝手にスニペット生成され意味が伝わりにくい文章が引用されてしまう恐れがありますので注意しましょう。

 

スニペット生成のプラグイン
WordPressの場合、専門的な知識がなくても「All in One SEO Pack」などのプラグインをインストールし「有効」にすれば簡単な「タイトル」「ディスクリプション」「キーワード」などのスニペット作成ができます。

 

構造化データ

構造化データは、商品紹介や動画などで「リッチリザルト」と呼ばれる視覚的な機能や操作機能のことを指しています。

下図のような動画内にある「再生時間」や、その横の「説明」「URL」「アップロード日」のこと。

リッチリザルト(サンプル画像)

ページと関連性の高い情報を表示できれば、ターゲットとしているアクセスを呼び込むことが可能になります。

 

速度を考慮した最適化

ユーザーに優良なコンテンツを提供するには、ページ表示速度は速いに越したことはありません。

 

ページ表示速度が遅くなる要因としては、必要以上に大きい容量の画像をたくさん使用していることや高画質のバナーなどを複数貼り付けている事などが挙げられます。

 

記事を公開する前に、PageSpeed Insightsなどで表示速度を分析しパフォーマンス向上に努めましょう。

 

画像のタイトル・代替テキスト・キャプション・ファイル名

Googleはタイトル・キャプション・ファイル名などからその画像の詳細な情報を抽出しており、画像にもっとも関連しているページのテキストの近くに配置することが推奨されています。

 

また、同様に代替テキストは画像をリンクとして使用する場合にアンカーテキストとして使用できるので、ページコンテンツに沿った情報に富んだ内容が求められます。

 

キーワードの乱用は禁止!
代替テキストにより多くの情報を詰め込んだ方がアクセスが増えると思ってつい乱用してしまうと、サイトがスパムと判断されかねないので慎重にシンプルなテキストを入力するようにしましょう。

 

画像サイトマップ

画像サイトマップは、あらかじめサイトマップでGoogleに詳細情報を提供していると検索結果に表示される可能性が高くなり本来、画像検出するのが難しい情報(JavaScriptコードでアクセスされる画像)でも詳細にピックアップしてもらうことができます。

 

こちらは、画像や写真がサイトに欠かせないサイトでは画像サイトマップを登録することをおすすめします。

>>画像サイトマップ登録の手順はこちら

 

セーフサーチ向けの最適化

未成年がインターネットを利用する際に、デバイスにあらかじめ設定できるセーフサーチ(アダルト排除機能)に「ここから先はアダルト画像がありますよ~!」と自主的にアダルト要因があることを申告することを指しています。

 

サイト内にアダルト画像やコンテンツがある場合は、グループ分けしてパーマリンクには「~/adult」を入れるなどの対処が求められています。

 

ページ表示速度チェックのおすすめツールはこちら「稼ぐブログに最適!おすすめ厳選ツール10☑」で紹介していますので、ご参照ください。

 

適切な画像形式の選択

最適化した撮影

 

ここから先は、さらに突っ込んだ適切な画像形式の選び方、最適化に関するポイントをご紹介していきます。

 

ベクター画像とラスター画像

前項で紹介したパンフレット・ロゴ・デザインに適したベクター画像と、写真やコラージュに適したラスター画像ですがこの画像の最適化のガイドラインでも「幾何学的図形で構成された画像にはベクター画像」「ふぞろいな形や細部の多い複雑なシーンにはラスター画像」が推奨されています。

 

また、ガイドライン内では「ベクター画像ではシーンが複雑な場合リアルな抽出が難しいので、GIF・PNG・JPEGなどのラスター画像形式や最新のJPEG-XR・WebPと言った形式の使用もおすすめ」と表記されています。

 

CSSピクセルとデバイスピクセル

高解像度の写真などを使用する場合は、ブラウザ上で表示される仮想のCSSピクセルとモニター画面に設定された解像度を表すデバイスピクセルの関係を区別しておく必要があります。

 

1つのCSSピクセルには複数のデバイスピクセルが含まれていることがあるので、1つのCSSピクセルがそのまま1つのデバイス ピクセルに対応することもあれば、複数のデバイスピクセルに対応していることもあります。

 

その場合、ラスター画像だと必要以上にファイルサイズが大きくなり過ぎてしまう危険性あるので、高画質の写真を掲載するときは常に鮮明な結果が出力されるベクター画像の利用が推奨されています。

 

可逆画像圧縮と非可逆画像圧縮

完全に圧縮前と同じように再現される可逆画像圧縮と、一部のピクセルデータを除去する非可逆画像圧縮の関係性にも言及されていますが人間の目の仕組み上、画像のファイルサイズを縮小するために各ピクセルの情報を一部を省いてしまっても対して差し支えがない、という紹介がなされています。

 

では、この可逆画像圧縮と非可逆画像圧縮を踏まえてどのラインが最適なのかという点については、画像のコンテンツや、ファイルサイズと非可逆圧縮による画像の乱れのバランスをサイト運営者がどう取るかという独自の基準に委ねられているのが現状。

 

適切な画像形式

Googleでもっとも幅広くサポートされている形式はGIF・PNG・JPEGの3つです。
推奨されている使い方は以下の3点、

 

1.アニメーションが必要な場合はGIFのみ。
→アニメーションが必要な場合のみGIFを使用

2.高解像度で精細さを維持したい場合はPNG。
→他の形式よりもファイル容量が大きくなるので慎重に使用する
→幾何学的図形で構成された画像がある場合は、ベクターのSVG形式に変換することを検討する

3.写真やスクリーンショットはJPEG。
→JPEGの画質レベルをいくつか試しながら、最適な画質とファイルサイズのバランスを見つけて圧縮して使用する

 

サイズを変更した画像

これは最適化の中でもとても難しいポイントなんですが、最も効果的な画像の最適化技法は「目的のサイズでアセットをブラウザに表示するのに必要とされる数を超えるピクセルを送信しないようにすること」と定義。

 

これは、要するにパソコンでピクセル数の大きい画像を貼り付けることで、実際モバイルで見る際になどに自動でブラウザに拡大縮小を委ねているので、CPUリソースが無駄使いだったり解像度が下げられて表示しているという事です。

 

全てのデバイスに対応するのは無理なので、せめて不要なピクセルの数を最小限に抑えたり、大きいアセットは表示サイズにできる限り近づけて配信するよう心掛ける必要があります。

画像最適化のチェックリスト

チェック
最後に「画像の最適化に取り組むうえで留意すべきおすすめの方法」をご紹介しておきます。

✅  ベクター形式を優先する
→ベクター画像は解像度やスケールに依存しないメリットがあるため、複数の端末や高解像度の画像を使用する際に最適。

✅ 最適なラスター画像形式
→シーンが複雑な場合にはGIF・PNG・JPEG・JPEG-XR・WebPといった形式が最適。

✅ ラスター形式に最適な画質設定を
→思い切って「画質」設定のレベルを下げる事が推奨されています。人間の目の仕組み上、画像のファイルサイズを縮小するためのピクセル除去は対して差し支えがなく、結果は非常に良好でバイト数も大幅に削減が期待できます。

✅ 不要な画像メタデータを削除
→ラスター画像は取得した時点で、既に多くの地理情報・カメラ情報などのメタデータが保存されています。適切なツールを利用してこのデータを取り除き、画像やコンテンツに沿った正しい詳細情報を入れておきましょう。

✅ サイズを変更した画像を提供
→表示サイズを画像の「実」サイズにできるだけ近づけることを心掛けましょう。特に、大きい画像はサイズ変更に伴うオーバーヘッドの大半を占めているので注意が必要です。

✅ 自動化を徹底する
→自動化されたツールを導入し、あらゆる画像アセットが最適化されるようにしましょう。

 

最適な画像を使ってアクセス向上させよう

アクセス向上

Googleのガイドラインは多岐に渡り読むだけでもかなりの時間を要し、また多くの専門知識も必要になってしまいます。

 

全ての項目を隅々まで知らないと他のブログと戦えないという訳ではありませんが。

 

同じ土俵にいるライバルたちより頭1つ出るためにはこうした緻密なガイドラインとのすり合わせが必要になってくるのも事実。

 

しかし、記事で紹介したスニペットやデータ構造化のようなものはWordPressのプラグインをインストールすればある程度はカバーする事は可能ですので、積極的に取り入れて重要なオリジナル画像がGoogle画像検索で上位に表示されるための土台を築きましょう!

ABOUTこの記事をかいた人

ブログ・投資・ビジネスをメインテーマにした俳句ブログ『Office Exitの俳句』編集者。ブログ運営→投資→ブラック企業から独立。ブログ収益360万、投資収益450万。趣味は俳句。特技は俳句。仕事も俳句。NHK全国俳句大会『入賞』、枕草国際俳句大会『入賞』、子規顕彰全国俳句大会『入賞』、福岡総合俳句大会『優秀賞』。