SEOに効果的な画像の設定って?押さえておきたい6つのポイント

更新日: 公開日:

SEOに効果的な画像の設定方法があります。Googleは画像関連のデータもサイトを評価する際の判断材料にしています。

SEO効果を重視したサイト設計における画像関連の設定について、6つのポイントをご紹介します。

SEOに効果的な画像の設定って?押さえておきたい6つのポイント

SEOを重視したサイト設計において、ユーザーに興味を抱かせたりユーザビリティを向上させたりするためにも、画像を効果的に使うことは重要です。ページを開いて目に入るのがテキストばかりでは、コンテンツを読む意欲も失せてしまいます。

だからといってただ画像を並べただけでは、思うように効果は得られません。SEOにおいては、画像ファイル名や画像のタグ設定などを工夫することで、効果が期待できるのです。

Googleは画像関連のデータもサイトを評価する際の判断材料にしています。

そこで今回は、SEO効果を重視したサイト設計における、画像関連の設定のポイントをご紹介します。

SEOにおける画像のポイント

SEO効果を高めるために

サイトに画像を設置してSEO効果を得るためには、テキストとの組み合わせを考慮することがポイントとなります。

例えば、「SEO効果を高めるサイト設計のポイント」というテーマのページに画像を設置したい場合、このテキスト内容に合わせた良質な画像を用意して、テキストの直後に配置します。

そうすれば、テキストからの文字情報と画像からの視覚的な情報の両方が得られるため、ユーザーのコンテンツの理解度も向上します。その結果ユーザビリティも高まり、Googleからも評価されやすくなるため、検索結果の順位上昇も期待できるでしょう。

テキストを画像で補足しコンテンツの理解度を向上させる

ここで注意したいのが、低品質な画像を設置しないということです。画像を設置したとしても、質が低いとユーザビリティも下がり、Googleからの評価も下げてしまうリスクが高まってしまいます。ユーザーとGoogle両者からの評価を下げないためにも、まずはユーザーのニーズやページの読みやすさ、オリジナリティ、信憑性などを考慮した、質の高いページづくりを心がけましょう。良質な土台を用意した上で、適した画像を設置することで、さらに高品質で上位表示を狙えるページにすることができます。

代替テキスト(altタグ)の設置は必須

画像検索最適化において必須ともいえるのが、代替テキストの設置です。代替テキストを設置する場合、htmlタグのimg要素で、altタグを使用します。

代替テキストとは

代替テキスト(altタグ)とは、htmlのimg要素に記述するタグで、画像の代わりとなるテキスト情報のことをいいます。

altタグの設置で画像情報をテキストからも伝える

例えば、テキストブラウザや音声読み上げブラウザなどの画像が閲覧できないブラウザの場合、画像ではなくテキスト情報の表示や読み上げが必要となります。そこで用いられるのが、altタグで設定した文字情報なのです。altタグを適切な内容で設置することで、画像閲覧ができない環境下でも、正しい情報を伝えられるようになります。

代替テキストと画像検索の関係

画像検索において、なぜ代替テキストの設定が必要なのか、疑問に思う方もいるかもしれません。Googleはページに設置された画像を認識するにあたって、altタグや画像前後のテキスト情報を参考にしています。つまり、画像の内容を端的に教えてくれるaltタグが設定されていれば、Googleが画像の内容を正しく認識するためのサポートになるのです。

記事内にピアノを演奏する人の画像が挿入されているとしましょう。その画像のaltタグには「ピアノを弾く人」「ピアニスト」といった内容のテキストを入れて、代替テキストを設定します。代替テキストが設定されたページは、画像の情報もテキストで抽出できるためユーザビリティも向上します。Googleからも評価されやすくなるでしょう。

altタグの最適化について、さらに詳しく知りたい方は、こちらの記事がおすすめです。

alt属性とは?altタグの基礎知識について|SEO用語集:意味/解説/SEO効果など[ナイルのSEO相談室]

モバイルフレンドリーにする

サイトに画像を設置する際は、スマートフォンからの見やすさにも配慮するモバイルフレンドリーを意識することも大切です。モバイルフレンドリーを考えた画像設置について確認していきましょう。

モバイルフレンドリーとは

モバイルフレンドリーとは、ウェブサイト全体や各ページが、パソコンだけではなくスマートフォンでも見やすく表示されるように配慮することをいいます。

こうしたモバイルユーザーへの配慮も、ユーザビリティの向上と、Googleからの評価のされやすさに大きく関わってきます。画像はスマホからの見え方も要確認

画像サイズは必ずスマホからの見え方もチェック

モバイルフリーを意識したサイトやページ設計にしたい場合は、次のようなポイントを重視します。

  • ファイルサイズ
  • 画像の解像度
  • 画像の横幅やアスペクト比
  • 画像内テキストの文字サイズ

画像の解像度やサイズは、必ずスマートフォンでも表示されるか、見え方に問題はないかを確認します。

また、画像の横幅や画像内テキストの文字サイトなども、スマートフォンからも見やすくすることで、ユーザーにとってストレスの少ない、親切なサイトにすることができるでしょう。

読み込み速度に注意

ページの読み込み速度も必ず確認しましょう。画像の容量によっては、全体的なページサイズが大きくなり、読み込みも遅くなってしまいます。

スマートフォンで画像の見え方をチェックするポイント

読み込みが遅いほどユーザーはストレスを感じやすい上、最悪コンテンツに目を通さずにページから離れてしまう可能性もあります。読み込みが早くなれば、ユーザビリティの向上につながり、Googleからも評価されやすくなるでしょう。ここからは、ページを軽くして読み込みを速くするための手法をご紹介します。

不要な画像リソースを除外する

不要な画像リソースは除外して、読み込みスピードを上げましょう。

不要な画像リソースは除外して、ページのダウンロード容量をなるべく減らす

例えば、画像ばかり挿入するのではなく、CSS3エフェクトやウェブフォントなどのHTML、CSS、JavaScriptといった画像以外のアセットを用いてコンテンツを充実させれば、そのぶん画像のファイルリソースを抑えることができます。また、レスポンシブ画像技術やAMPを活用したり、ページ編集時の画質や保存時の画像形式を変更したりすることでも、画像のファイルリソースを軽くできるでしょう。

このように、ページのダウンロード容量をできるだけ減らせる画像を設置すれば、読み込み速度も上がり、SEO効果も期待できます。

画像の容量が膨らんでしまう手法は避ける

画像の容量を膨らませてしまう手法は、ページの読み込みを遅くする原因となるため、できる限り避けましょう。テキストが埋め込まれたり、グラデーションなどの加工が施されていたりする画像は、特に容量が膨らみやすいため注意が必要です。

画像サイトマップを用意する

通常のサイトマップでも、画像をインデックスさせることは可能です。しかし、Google画像拡張機能を使ってサイトマップを画像専用にカスタマイズすれば、より早く正確に画像をインデックスさせることができるようになります。画像サイトマップについて説明していきます。

画像サイトマップとは

画像サイトマップで検索エンジンのクロールを助ける

画像サイトマップを用意することで、サイト内の画像の詳細情報を、Googleに伝達することができます。

画像サイトマップに画像情報を追加すれば、通常では検出が難しい画像もGoogleで検出されるようになり、インデックス登録してほしいサイトの画像を指定することも可能です。

画像サイトマップの設置方法

画像サイトマップの設置方法は、次の2つの方法があります。

  • サイトマップを別途用意して画像リストを作る
  • 既存のサイトマップに画像情報を追加する

画像サイトマップについては、GoogleのSearch Consoleヘルプで詳しく解説されているため、参考にしてみてください。

高画質な画像を使う

高画質な画像ほど検索結果のサムネイルでも目立つため、より多くのユーザーのアクセスが期待できます。コンテンツの内容に合った鮮明な画像であればユーザー満足度も向上し、Googleからも評価されやすくなるでしょう。

画質の粗い画像はユーザーにストレスを与える

また、画質の良い画像を設置することはユーザビリティの向上のためにも大切です。逆に粗い画質の画像はユーザーにストレスを与えやすく、満足度を下げる原因にもなりがちなため注意しましょう。高画質な画像を提供するためには、高画質の画像を取り扱っている専門サイトの利用がおすすめです。

一般的な画像ファイル形式を選択する

設置する画像のファイル形式にも注目してみましょう。多くのブラウザで表示可能なファイル形式ならば、より多くのユーザーが画像を閲覧できるようになるためユーザー満足度もアップし、Googleからも評価されやすくなります。

おすすめはJPG

JPGは、特にシェア率が高いGoogle Chromeをはじめ、多くのブラウザで対応しているファイル形式です。フルカラーで1,677万色まで表現できるJPGならば、色数の多い画像もきれいに表示させることができます。ただし、JPGは圧縮すると画質がかなり粗くなり劣化してしまうため注意しましょう。

また、「WebP」や「JPEG XR」は、まだ対応しているブラウザが少ないファイル形式です。ブラウザによっては画像が表記されないケースがあるため、設置は慎重に検討すべきでしょう。

PNGは画像が劣化しないがJPGよりも重い

PNGはJPGと同じくフルカラー1,677万色まで表現することが可能で、なおかつ透過処理ができるというメリットがあります。さらに、圧縮しても画質が劣化しないという点も、JPGにはない魅力です。

しかし、PNGはJPGと比べるとファイルサイズが重く、表示されるスピードも遅くなりがちというデメリットがあります。また、対応しているブラウザはIE7以降となるため、古いブラウザでは表示されない可能性も。

そのため、ウェブにおいては、基本的にはファイルサイズの小さいJPGがおすすめです。透過処理の必要な画像や、色数が多いイラストなどにはPNGを使うなどして、上手に使い分けていきましょう。

サイト内の画像関連の設定を見直してみよう

ページ内容に合った画像を設置することは、コンテンツに対するユーザーの理解度を高めることにも役立ちます。また、ウェブサイトを運営する側にとっても、ユーザーからコンテンツへの満足度を高めてもらうためには、適切な画像選びとその最適化が必要不可欠です。上手に画像最適化を行えば、画像検索からの流入アップも期待できるでしょう。

画像最適化はいずれも難しい設定は必要なく、SEOの一環として実践しやすい手法が多いです。今一度サイト内の画像関連の設定を見直し、調整してみてはいかがでしょうか。

SEOについてさらに詳しく知りたい方はこの記事も読んでみてください。

ナイル流SEO資料の
ダウンロード

Download

弊社では1,500社を超える企業のコンサルティング経験から、事業成果に結びつくSEO支援が可能です。本資料では、弊社のご紹介と合わせナイル流SEOの考え方、プロジェクトの進め方を余すところなく公開いたしました。本資料が貴社のSEO推進において、お役に立てましたら幸いです。

スライドサンプル スライドサンプル3 スライドサンプル スライドサンプル

以下の項目をご入力の上、
送信してください。

SEO・サイト運用・コンテンツマーケティングでお困りの際には ぜひお気軽にご相談ください

お問い合わせはこちら