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

コンテンツ制作に画像は必須ですが、画像もクロール、インデックスされることを知っていましたか？

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

＼プロのノウハウを詰め込みました！資料ダウンロードはこちらから／

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

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

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

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

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

SEO効果を高めるために

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

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

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

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

代替テキスト（alt属性）の設置は必須

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

代替テキストとは

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

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

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

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

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

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

alt属性とは？alt属性の基礎知識について|SEO用語集

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

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

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

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

こうしたモバイルユーザーへの配慮も、ユーザビリティの向上と、Googleからの評価のされやすさに大きく関わってきます。

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

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

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

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

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

＼プロのノウハウを詰め込みました！資料ダウンロードはこちらから／

読み込み速度に注意

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

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

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

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

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

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

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

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

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

特に対策を行わなくても画像をインデックスさせることは可能です。しかし、画像サイトマップを用意することで、より適切に検索エンジンにクロールを促すことができます。

画像サイトマップとは

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

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

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

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

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

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

高画質な画像を使う

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

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

一方で、画質を良くするために、ファイルサイズが大きくならないように気をつけましょう。画質は維持した状態で、サイズを調整できるSquooshなどのツールを用いると良いでしょう。

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

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

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

また、ナイルではSEOについてまとめた資料をご用意しております。SEOについて把握したいなら、まずはこの3点の資料をご覧ください。

• SEO成功事例・法則資料
• SEO1問1答 全30問
• SEO内製化 （インハウスSEO） 進め方ロードマップ

具体的な内容については、ダウンロードの上、ご確認ください。