Webサイトにのせる画像達

画像選びはSEOにも関係する?選び方のポイントや注意点

Webサイトにのせる画像達

Googleは、Webサイトを「ユーザーにとって利便性が高く有用なサイトであるかどうか」という点を重視して評価を決めています。テキストだけでなく、画像もWebサイトを構築するコンテンツとして見なされることから、SEO対策を行う上で画像選びは重要な要素です。

また、検索エンジンで上位表示を狙うためには、画像の選び方に加えて、画像の配置や設定を適切に行う必要があります。

本記事では、SEO対策として有用な画像の選び方や設定のポイント、注意点を解説します。

画像とSEOの関係

Webサイトと画像とSEOの関係

検索エンジンは、テキストだけでなく画像もサイトを構成する大きな要素として考えています。そのため、ページに画像を入れる際は、適当に選んだものを入れるのではなく、SEOを意識した画像選びと入れ方をする必要があります。

ページに画像を入れるのには、次の2つのSEO的な意味合いがあります。

視認性が向上し、ユーザーに優しいページになる

Web上では、文字だけで埋められたページよりも、ほどよい余白や画像が入った「視認性の高いページ(見やすくて分かりやすいページ)」がユーザーに好まれます。また、記事で何かを解説する際には、文字だけでなく解説用の画像を入れことで、ユーザーがより深く内容を理解しやすくなります。

このように画像を入れてページの視認性を向上させることは、Googleが提唱する「ユーザーにとって利便性の高いサイト」を構築することにもつながります。つまりユーザー目線で作られたページとして、検索エンジンに評価されやすくなります。

画像検索からの流入が期待できる

検索エンジンにはテキスト検索のほかに、キーワードにマッチした画像を検索できる「画像検索」があります。

画像検索で表示された画像は、クリックするとその画像を使用しているサイトに飛びます。つまり、自社のサイトで使用している画像が上位表示されれば、そこからユーザーの流入が期待できるというわけです。

画像検索の表示順位は、画像がキーワードにマッチしているかだけでなく、サイトの全体の評価も影響します。画像も含めてサイトのSEO対策を適切に行い、検索に強いサイトを構築するほど上位表示が期待できます。

SEOというと、テキストでの対策が重視されがちですが、画像もSEOを意識して使用することで、サイト全体の評価を上げることができます。それにより、テキスト検索と画像検索の両方で上位表示を狙えるメリットがあります。

また、画像検索を利用しているユーザーも多いのも見逃せない点です。

モバイルファーストという考え方

Googleは2018年から、モバイルページをインデックス評価の基準とする「モバイルファーストインデックス」を開始しました。これは、スマートフォンなどのモバイル環境で「いかに見やすく使いやすいか」を基準としてサイトの評価をし、インデックスを決定するという方針です。

モバイル環境は画面の表示範囲が狭いため、デスクトップ環境と同じようなページ作りをすると、画面がすぐに文字だらけになってしまいます。そのため、デスクトップ環境が基準とされた時代よりも、画像を入れるタイミングや数を考えて、「いかにモバイル環境で見やすくするか」が重要になってきました。

そこでより重視されるようになったのが画像です。ページ内に適宜画像を入れると、ページに見やすさと分かりやすさが生まれます。モバイル環境での視認性も大きく向上し、モバイルユーザーにとって優しいページになります。

モバイルファーストを意識して作られたページは検索エンジンの評価が高くなります。モバイル環境がインデックスの基準になった今、画像の役割は非常に大きくなっています。

SEO効果を出すための画像の選び方

Webサイトに最適な画像を選ぶ

SEO効果を出すために、画像は次の点に注意して選びます。

記事の内容に関連した画像を選ぶ

Googleの画像検索は、画像周辺にあるキーワードやテキストを元に画像の関連性を判断しています。関連性が高いほど上位表示が期待できますので、画像は必ず記事の内容に関連したものを選びます。

記事と全く関係のない画像を入れてしまうと、画像検索で表示されにくくなるだけでなく、記事の内容に一貫性がないと判断される場合があります。

オリジナリティのある画像を選ぶ

Googleは、独自のコンテンツを持つWebサイトを高く評価します。これはテキストだけでなく画像も同様で、オリジナリティのある画像を選ぶほど独自性のあるサイトとして評価されやすくなります。

注意が必要なのがフリー素材の画像を使用する場合です。手軽に使える反面、多くの人が使っている画像ほど、検索エンジンには「独自性の低いコンテンツ」と見なされてしまう可能性があります。

記事の内容が近い場合はより注意が必要で、類似ページと判断されてサイト全体の評価が下げられる可能性があります。そのため画像を選ぶ際には、可能な限りオリジナルのものを用意し、テキストと合わせて独自性を出すことを意識して行う必要があります。

また、オリジナルの画像を使う際は、必要に応じて、画像に著作権表示を入れるなどの盗用対策をしておくと安心です。

記事全体の流れと一貫性がある画像を選ぶ

検索エンジンは、「記事の内容に一貫性があるか」という点も見ています。複数枚の画像を使う際は注意が必要で、記事の内容から外れた画像を使用してしまうと、記事に一貫性がないものと判断される場合があります。

これは周辺のキーワードだけを見て画像を選んでいると陥りやすい点で、記事全体の流れを見て画像を選ぶことで対策します。

高画質な画像を選ぶ

Googleは、コンテンツの品質が高いことも評価の対象にしています。これはテキストだけでなく画像も同様で、ぼやけた画像よりも画質のよい画像が好まれます。

ただ、問題となるのが容量との兼ね合いです。画像は、高画質なものほど容量が大きくなり、表示されるまでに時間がかかります。ページの読み込みが遅いと、ユーザーにストレスを与えるだけでなく、サイトの評価にも影響します。そのため、一定の画質を保ちつつ、容量を落とした画像を使う必要があります。

ちなみに、画質にはファイル形式も影響しています。写真の場合はJPEG形式が向いています。JPEG形式は色彩表現が多彩で、容量が軽いのが特徴で、Webで最も多く使われているファイル形式です。

イラストやロゴなどの場合は、ラインやエッジが美しく出やすいPNG形式が向いています。ただ、PNG形式は容量が大きくなりやすいというデメリットがあります。イラストやロゴでも、デザインによってはJPEG形式でもきれいに見える場合がありますので、表示速度と画質のバランスを考えて、よりよいファイル形式を選択すると良いでしょう。

画像をいれるときのポイント・注意点

Webサイトに最適な画像

画像は、記事の内容に合ったものを選ぶことを前提として、次の点に注意して入れていきます。

検索エンジンに分かりやすいファイル名にする

画像のファイル名は、検索エンジンが画像の内容を理解しやすいものにすると、検索結果に反映されやすくなります。

たとえばケーキのレシピに関する記事に使う画像であれば、『IMG0001.jpg』よりも『cake-recipe.jpg』といったファイル名にすると、検索エンジンが記事の内容に沿った画像だと判断しやすくなります。

また、ファイル名の単語に区切りを入れる場合は、『cake-recipe.jpg』のようにハイフン(-)を使ってつなぎます。このように区切りを入れると「cake」と「recipe」という単語に関連する画像であることが検索エンジンに伝わりやすくなります。ちなみに区切りを入れない場合は「cakerecipe」という単語として判断されてしまいます。

関連するテキストの近くに入れる

画像は、必ず関連するテキストの近くに入れます。画像検索で評価されやすくなるほか、ページ全体に一貫性があるものとしての評価も高まるでしょう。

また、Googleは最も重要な画像をページの上部に配置することを推奨しています。

表示速度に注意する

画像のサイズや容量が大きいとページの読み込みに時間がかかり、ユーザーにストレスを与えることになってしまいます。特に、スマートフォンやタブレット端末などモバイル環境での表示速度は重要で、できるだけ画像の容量を小さくして、ページの表示速度を上げる必要があります。

画像の表示速度を上げられない場合は、Googleが推奨する「遅延読み込み(Lazy Load)」という処理を行います。画像の読み込みを後回しにして、ページの表示を優先して行う処理です。この処理は、画像の表示が速い場合にも有効で、モバイルユーザーに優しいWebサイトとして評価されやすくなります。

画像に重要なテキストを埋め込まない

テレビのテロップのように、画像にテキストを埋め込んだもの(画像化したもの)をWebサイトで使う場合は注意が必要です。

画像にテキストを埋め込んだものは画像扱いになるため、画像を見られない環境ではそこに何が書いてあるのかが分かりません。

また、こうしたものは、スクリーンリーダー(音声読み上げソフト)や翻訳ソフトでも内容が読み込めないため、検索エンジンには「ユーザーにとって不親切なページ」と判断されてしまうこともあります。そのため、重要な項目は画像化せずに必ずテキストにする、またはHTMLで代替テキストを設定する必要があります。

画像には代替テキストを設定する

Googleは、視覚障害のあるユーザーやスクリーンリーダー(音声読み上げソフト)を利用しているユーザー、または通信環境で画像が表示されない場合のために、画像に「代替テキスト」を入れることを推奨しています。

代替テキストは、alt属性、altタグとも呼ばれるもので、HTMLでは

<img src=”画像のURL” alt=”画像の説明”/ >

といった形で入力し、画像の説明を入れるのがセオリーです。

単語を入れるよりも、具体名や状況の説明が入っているほうが効果的で、たとえばトイプードルが走っている画像であれば、ただ「プードル」と入れるよりも、より具体的に「走っているトイプードル」とするほうが、より検索エンジンに評価されやすくなります。

キャプションを設定する際も考え方は同様で、ユーザーにとって分かりやすいものになるように設定します。

ちなみに、代替テキストは画像が表示されている時はユーザーには見えず、キャプションは画像の表示の有無に関わらず常時表示されます。

alt属性はなぜ重要?その効果や記述する際のポイント・注意点
alt属性はなぜ重要?その効果や記述する際のポイント・注意点
「alt属性ってなに?」と疑問に思われる方も多いですよね。alt属性は、Webサイト内の画像の内容をテキストとして、検索エンジンやユーザーに伝えることができるものを指します。 今回…

代替テキストを入れる際にやってはいけないこと

代替テキストはSEO効果を期待できますが、あくまで画像の説明として用いるためのものです。キーワードを乱用したり、羅列したりすると、スパムとして判断される場合があります

たとえばトイプードルが走っている画像であれば、代替テキストに「走っているトイプードル」と設定するのは、画像の説明になっていますので問題ありません。

ところが、検索を意識して「ふわふわ かわいい プードル トイプードル ミニチュアプードル 走る 小さい 茶色」などとするのは、キーワードの乱用や羅列と見なされます。また、画像と無関係なキーワードを入れるのも、画像の説明から外れた用途にあたります。

代替テキストは、画像が見られない環境のユーザーにもサイトの内容が分かるようにするためにあります。つまり、検索エンジンを意識してキーワードを入れることがSEOになるのではなく、ユーザーに優しいサイトを作ることがSEOになるという考え方です。

おわりに

写真加工をする女性

SEOを意識した画像設定は、テキスト検索と画像検索の両方で効果が期待できます。

Googleは画像に関してのガイドライン「画像検索に関するおすすめの方法」を提示しており、そこでも検索エンジンを意識した作りではなく、ユーザーを意識した作りをすることを推奨しています。

常に、ユーザーにとって優しく、モバイルユーザーにとって使いやすいサイトを意識して構築する必要があります。

テキストでの対策ばかりに目がいきやすいSEOですが、画像も意識して設定してみましょう。

WEBでのお問い合わせはこちら