画像の使い方

ページに配置する画像は、ファイル名やalt属性、配置場所がSEO上、大切になります。

検索エンジンは日々進化しているとはいえ、画像に描かれた内容や価値を正確に判断することはできないためです。

この記事では、検索エンジンに画像の理解を促すためのヒントについて、まとめて紹介します。

概要

画像に関して、Googleが推奨している項目は以下の通りです。

  1. 画像ファイル名にローマ字表記を使わない
  2. 画像の内容を説明したalt属性を記述する
  3. alt属性にキーワードを埋め込む
  4. alt属性にリンク先ページの内容を記述する
  5. 関連性の高い位置に配置する
  6. 重要な画像を上部に配置する

この記事では、Googleの公式ドキュメントである「検索エンジン最適化(SEO)スターターガイド」や「Google画像検索に関するお勧めの方法」を参考にしています。

ルール① 画像ファイル名にローマ字表記を使わない

概要

画像ファイル名は英語の名称にします。

ファイル名のローマ字を認識しない

画像ファイル名は、Googleが画像の内容を理解するのに使用します。

画像ファイル名にローマ字が含まれていた場合、日本語ではなく、英語として解釈します。そのため、ローマ字表記をしても、その画像がどのキーワードに関係しているのか認識されません。

画像ファイル名は英語にする

ファイル名は、英単語をハイフンで区切った名前にします。できるだけ一般的な英語名称を含めるようにして、その画像を表すようにします。また、型番や固有名詞をファイル名に含めるようにします。

例:iPhone11ケースの画像ファイル

iphone11-case.jpg
×img20200320-201923.jpg

ルール② 画像の内容を説明したalt属性を記述する

概要

画像の説明文を記述して、検索エンジンに画像が何であるかを理解させます。

検索エンジンは画像のalt属性で内容を理解する

Googleは、画像ファイル名に加え、imgタグのalt属性に書かれた説明文を使用して、画像に何が描かれているかを理解します。

alt属性のテキストがページの内容に関連していれば、画像を使って分かりやすく説明されたページだと検索エンジンが理解できます。

画像検索でもalt属性が利用され、検索結果にはalt属性かそれを掲載したページタイトルが表示されます。

alt属性は、ファイル名と比べると、長い文字列が使える点と、英語だけでなく日本語も使える点にメリットがあります。

alt属性を分かりやすい説明文にする

画像の内容を表す説明文をimgタグのalt属性で指定します。

例:

<img alt=”Cluster SEOの仕組み” src=”cluster-seo-overview.png”>
×<img src=”cluster-seo-overview.png”>

ルール③ alt属性にキーワードを埋め込む

概要

画像の説明文にも検索キーワードを含めるようにします。

alt属性は画像検索でも利用する

Googleで画像を検索すると、alt属性とキーワードとのマッチングを行い、関連性の高い画像が優先的に表示されます。画像のalt属性は、Web検索におけるページタイトルと同じような役割を持ちます。画像検索結果での上位表示を狙うには、alt属性にも検索キーワードや関連キーワードを含めておくことが大切です。

Web検索でも、alt属性にキーワードが含まれている画像があれば、キーワードに関連した画像が載っているページだと検索エンジンは理解できます。

alt属性に検索キーワードを含める

検索されやすいキーワードや関連キーワードをalt属性に含めるようにします。

特に、検索されることが多い「服」などの画像では大切です。

WordPressでは、画像ファイルをアップロードすると、ファイル名がalt属性に設定されるので、忘れずに変更しましょう。

例:服の画像

<img alt=”春の水玉ワンピース ベージュ” src=”…”>
×<img alt=”img20200320-201923″ src=”…”>

ルール④ alt属性にリンク先ページの内容を記述する

概要

画像リンクの場合、画像のalt属性は画像ではなくリンク先を説明します。

画像リンクはalt属性が重要になる

アンカーテキストは、リンク先ページの内容を示す役割をもちます。テキストリンクではなく、画像リンクの場合は、画像のalt属性をアンカーテキストの代わりに利用します。

リンク先を示すalt属性にする

imgタグのalt属性は、画像自身の説明文ではなく、リンク先の説明文を記述します。

説明文には、検索キーワードや関連キーワードを含めるようにします。

例:

<a href=”…”>
<img alt=”ビッグワードを狙うSEOサービス Cluster SEO” src=”…”>
</a>
×<a href=”…”>
<img alt=”Cluster SEO 販促バナー” src=”…”>
</a>

ルール⑤ 関連性の高い位置に配置する

概要

本文の中で文脈上、関連性の高い場所に画像を置きます。

Googleは画像周辺の本文を利用する

検索エンジンは、画像の説明文(alt属性)と周辺の本文との関連性を調べ、本文の内容に適した画像が配置されているかどうかを判断しています。このやり方によって、他サイトのバナー画像のように、本文と関連性の低い画像が配置されていた場合、価値のある画像ではないと判断できます。

画像は適切な場所に配置する

本文に関係する画像の場合、それを言及している箇所の近くにimgタグを配置します。alt属性にも、関連性が分かるような説明文にします。

明らかに本文と関連性のない場所に配置すると、検索エンジンには評価されません。

例:説明文の途中に関連する画像を配置

<h2>リッチリザルトとは?</h2>
<p>Google検索結果に、通常より多くの付加情報を追加したものがリッチリザルトです。</p>
<img alt="商品のリッチリザルトの例" src="...">

ルール⑥ 重要な画像を上部に配置する

概要

重要な画像ほど、ページの上部に置きます。

ページ上部の画像を評価する

ユーザーはページを上から順に閲覧していくので、Googleもページ上部ほど、情報の質を重視しています。画像についても同様で、価値が高い画像はできるだけページ上部に配置します。

画像をページ上部に配置する

価値の高い画像はできるだけページ上部に配置します。

例えば、次のような方法があります。

  • メインビジュアルにページの内容を表す画像を配置する
  • ページに概要セクションを追加して、そのセクションに重要な画像を配置する

ルール⑦ ファイルサイズを削減する

概要

画像のファイルサイズを削減し、ページの表示速度を最適化します。

ページの表示速度がランキングに影響する

Googleはページの表示速度を検索ランキングの1つの指標として利用しています。画像のファイルサイズが大きければ、ネットワーク転送にも時間がかかるので、ページの表示速度に影響します。Googleは、表示速度の中でも、ファーストビューの表示速度を重視しています。

画像最適化ツールでファイルサイズを削減する

表示速度を改善するために、画像のファイルサイズを削減します。

ファイルサイズを削減するには、「縦幅と横幅を小さくする」「画像ファイルを最適化する」「画像フォーマットを変更する」といった方法があります。

この中で「画像ファイルを最適化する」はcompressor.ioなどの画像最適化ツールを使うだけでファイルサイズが削減できるので、最も取り組みやすいです。画像にもよりますが、 ファイルサイズが 80%程度削減できることもあり、効果が高いです。

なお、PageSpeed Insightsを使うと、どの画像を改善したらいいか、リストアップしてくれるので便利です。

まとめ

画像のSEO対策では、alt属性の説明文が特に重要になってきます。

設定されたalt属性をチェックできるツールもあるので、SEO対策にお役立てください。

弊社では、キーワード選定から内部施策実施までをサポートするSEOサービス「Cluster SEO」を提供しています。SEO対策の一環として是非お役立てください。

ビッグワードを狙うSEO対策サービス「Cluster SEO」