MENU
テクニカルSEOを中心としたSEO対策をまとめています

テクニカルSEOブログでは、SEOに関する技術記事を中心に提供しています。本ブログは、SEO分析ツール及びコンサルティングを提供する株式会社シンメトリックにより運営されています。

  1. ホーム
  2. HTMLタグとディスクリプション
  3. SEOに効果的な画像の配置方法・使い方

SEOに効果的な画像の配置方法・使い方

HTMLタグとディスクリプション

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

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

この記事では、検索エンジンに画像の理解を促すためのalt属性の書き方や配置場所について、まとめて紹介します。

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

  1. 画像にテキストを埋め込まない
  2. 画像ファイル名にローマ字表記を使わない
  3. imgタグに画像の内容を説明したalt属性を記述する
  4. imgタグのalt属性にキーワードを埋め込む
  5. imgタグのalt属性にリンク先ページの内容を記述する
  6. 装飾目的の画像はalt属性を空にする
  7. 関連性の高い位置に配置する
  8. 重要な画像を上部に配置する
  9. ファイルサイズを削減する
  10. CSSで画像を指定しない
  11. 画像サイトマップを使う

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

SEOの基本知識についてはオンラインセミナーで解説しています。セミナーではGoogle公式のSEOガイドであるGoogle検索セントラルの「Google検索の仕組み」と「スターターガイド」の内容を分かり易く解説します。これからSEOを始めようと考えている方は是非ご参加ください

Google公式SEOガイドから正しいSEO知識を身につけるSEOセミナー【入門編】
目次

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

Googleはタイトルタグや見出しタグなど、テキストで記述された情報を中心としてコンテンツを理解します。

画像の中に、商品名やサービス名・キャッチコピー・見出しなどの重要なテキストを含めてしまうと、Googleは情報を正確に認識することが難しくなります。

そのため、画像には重要なテキストを含めないようにして、テキストをHTMLタグで構成するようにします。

例えば、以下のメインビジュアルは「エッセンシャルSEOハンズオン研修」「体験型SEO基礎研修を2ヶ月集中全6回！」といったテキストは画像に含めていません。

重要なテキストを画像の中に含めない

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

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

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

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

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

〇iphone11-case.jpg
×img20200320-201923.jpg

imgタグに画像の内容を説明したalt属性を記述する

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

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

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

このように、imgタグのalt属性はSEOと密接な関係がある属性です。

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

例：alt属性の書き方

〇<img alt=”アナトミーの機能” src=”anatomy-overview.png”>
×<img src=”anatomy-overview.png”>

imgタグのalt属性に検索キーワードを埋め込む

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

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

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

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

例：alt属性の書き方（洋服の画像）

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

imgタグのalt属性にリンク先ページの内容を記述する

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

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

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

例：alt属性の書き方（バナー画像）

〇<a href=”…”>
<img alt=”SEO分析ツール「アナトミー」” src=”…”>
</a>
×<a href=”…”>
<img alt=”アナトミー 販促バナー” src=”…”>
</a>

装飾目的の画像はalt属性を空にする

alt=""のように、alt属性に空文字列を指定すると、「文脈上、重要な画像ではない」ことを示します。しかしimgタグでalt属性を省略すると、HTML5の仕様では、「文脈を構成する重要な画像」であると示します。

装飾目的の画像を使っている場合、imgタグでは alt="" のように設定します。

例：alt属性の書き方（装飾目的の画像）

<img alt="" src="images/border.png">

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

検索エンジンは、画像の説明文（alt属性）と周辺の本文との関連性を調べ、本文の内容に適した画像が配置されているかどうかを判断しています。

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

明らかに本文と関連性のない場所に配置すると、検索エンジンには評価されません。他サイトのバナー画像のように、本文と関連性の低い画像が配置されていた場合、価値のある画像ではないと判断できます。

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

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

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

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

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

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

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

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

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

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

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

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

CSSで画像を指定しない

CSSのbackground-imageプロパティやcontentプロパティで指定した画像は、Googleにインデックス登録されません。style属性で指定した画像も、同様にインデックス登録の対象外です。

そのため、背景画像や装飾画像を除き、CSSで画像を指定しないようにします。

例：

〇<img alt=”テクニカルSEOツール” src=”technical-seo-tool.png”>
×<div style=”background-image: url(‘technical-seo-tool.png’)”></div>
×.mainvisual::before {
content: url(‘technical-seo-tool.png’);
}

画像サイトマップを使う

画像サイトマップとは、画像のURLやメタ情報を追加したサイトマップのことです。

検索エンジンが画像を認識しやすくなるため、画像検索の上位化が期待できます。

特に、JavaScriptで動的に生成される画像など、検索エンジンが検出しづらい画像を利用しているときに画像サイトマップは有効です。

画像サイトマップの記述例は以下の通りです。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://technical-seo.jp/</loc>
    <image:image>
      <image:loc>https://technical-seo.jp/img/foo.png</image:loc>
      <image:title>検索インデックス分析に基づくSEO</image:title>
    </image:image>
    <image:image>
      <image:loc>https://technical-seo.jp/img/bar.png</image:loc>
      <image:title>BtoBビジネス向きのSEO対策</image:title>
    </image:image>
  </url> 
</urlset>

画像の情報は、以下のルールでXMLサイトマップに追記します。

  • 名前空間 xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" を定義します。
  • 1画像につき<image:image>タグで情報を記入します。
  • 画像のURLは<image:loc>タグ、タイトルは<image:title>タグ、短い説明文は<image:caption>タグで記述します。

画像サイトマップについては、以下のサーチコンソールのヘルプにも記載があります。

まとめ

画像のSEO対策では、imgタグのalt属性の書き方が特に重要になってきます。

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

今回ご紹介した、SEOにおける画像の使い方については、Google検索セントラルに配置されている公式のSEOドキュメントの一つ、SEOスターターガイドでも言及されています。

シンメトリックが定期開催している無料SEOセミナーでは、Google検索セントラルの「Google検索の仕組み」と「スターターガイド」の内容を分かりやすく解説しています。

「SEOの何から学べばいいか分からない」「SEOに関する情報は何が正しいのか分からない」このようなお悩みをお持ちの方は是非ご参加ください！

Google公式SEOガイドから正しいSEO知識を身につけるSEOセミナー【入門編】

最後に弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。

HTMLタグとディスクリプション
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次