SEOを意識した画像の選び方や使い方と設置方法について

2022.07.20 2022.07.01 SEO相談室記事一覧

今回は、「画像」という観点から、SEO対策について考えていきます。Webサイトを作る上で、画像が重要な意味を持っていることは理解している担当者の方も多いと思います。もちろん、画像を入れるだけでもユーザーにとって分かりやすいコンテンツにすることができますが、画像を挿入する前に複数のポイントを意識することで、SEO的にもメリットを付加できます。

適切に画像を選び、Webサイト内に設置することで、ユーザーの印象を高めながら、SEO対策ができるのです。今回紹介するのはGoogleもガイドラインで公開している対策ですので、ぜひ取り入れられるところからWebサイト運営に取り入れてみてください。

1 コラムの内容に即した画像があるメリット
- 1.1 ユーザーに対するメリット
- 1.2 検索エンジンに対する画像設置メリット
2 画像SEO対策のポイント
3 検索結果に画像を載せたくない場合
- 3.1 早急に画像を削除する方法
- 3.2 robots.txtによる削除方法
4 画像SEOに関するよくある質問
5 おわりに

コラムの内容に即した画像があるメリット

まず、なぜWebサイト内に画像を設置すべきかという点を掘り下げて解説します。「はじめに」の中でも触れましたが、画像の設置には「ユーザーに対するメリット」と「検索エンジンに対するメリット」があります。それぞれの観点からメリットを解説します。

ユーザーに対するメリット

画像はテキストよりコンテンツの理解を得やすいメリットがあります。中にはすべてテキストで解説している場合、読破できずに離脱してしまうユーザーもいるでしょう。適度に画像を入れることで、ユーザーの読了率が高まるので、コンバージョンにつなげる機会を増加させる効果も期待ができます。

また、各記事の「アイキャッチ画像」も個別の画像・かつそのコンテンツの内容がすぐに分かるものを設定すると、検索画面やSNSシェア画面での視認性が高まります。すると、クリック率も高くなることが期待できるので、より多くの流入が見込めます。

検索エンジンに対する画像設置メリット

検索エンジンは画像の認識と理解を試みます。そのため、設置された画像が文脈に即したものでユーザーに利便性が高ければ、検索エンジンはそのコンテンツに良い評価がなされます。つまり価値のある画像設置を検索エンジンが評価することでページの価値は高まり、検索結果の上位表示化を図るSEO対策につながります。

また、Googleは検索エンジンが認識した画像を「Google画像検索」に露出します。そのため、画像を用いたコンテンツを作った結果、自サイトの画像が画像検索に表示される可能性があります。画像検索との親和性が高い業界であれば、画像検索経由の流入増が見込めます。

画像SEO対策のポイント

ここから、SEOを意識した画像の活用法について具体的に解説していきます。抑えるべきポイントは、以下の5つです。

ページのタイトル、テキスト内容と関連する画像を使う
表示速度のために画質とサイズに気をつける
alt属性を設定する
構造化データを追加する
画像のファイル名はわかりやすくする
画像のXMLサイトマップを作成する
インデックスしたい画像をCSSで使わない
サポートされている画像形式を使用する

ここで説明する画像SEOはGoogleの公式のガイドラインをもとに解説しております。Google公式のガイドラインには動画もありますので、併せて確認してください。
Google公式のガイドラインの内容も参考にしています。

ページのタイトル、テキスト内容と関連する画像を使う

Googleのガイドラインにも、「検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成することが必要となります」と明記されています。大前提として、ページのタイトルやテキスト内容と関連する画像をピックアップする（なければ、作成する）ようにしましょう。料理についてのコンテンツを書いているのに、人気キャラクターの画像などを挿入するのは関連性がないのでNGです。関連性の低い画像を挿入しているということは、それだけユーザーにとっても理解しにくいコンテンツになっているということを指します。

オリジナルの画像を提供する

テキスト内容の独自性が必要ということはSEO対策の常識ですが、それは画像に対しても言えます。フリー素材をベースに加工してオリジナル要素を追加したり、イラストレーター等のソフトを使って1から自作したりすると、競合サイトとの差別化にもなります。フリー素材を使うことも問題ではありませんが、似たような画像をどこかで見たことがあると感じたユーザーの離脱が早まる懸念もあります。SEOの観点から考えると独自の画像を表示するほうが高い評価につながるでしょう。

画像を挿入する「位置」も最適化

画像を挿入する位置は、できる限り関連するテキストの近くにしましょう。さらに、最も重要な画像（アイキャッチ画像等）はページ上部に配置するようにしてください。どの画像が重要で意味があり、サイトコンテンツの内容を示しているのかというのが検索エンジンに伝わりやすくなり、適切な評価につながります。

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

ページのタイトルや見出しなどを画像で設置しているデザインのWebサイトもあります。デザインのためには必要かもしれませんが、重要なテキストであれば、画像化するのではなくHTML内に記述する方がユーザーにとっても親切です。環境の違いによりぼやけて文字が読めなくなる可能性もありますし、ブラウザの読み上げにも対応していません。また、検索エンジンにキーワードが伝わらないリスクを考えると、SEO的にも非常にもったいない状態です。

画像を引用したいときの注意点

Webサイトの質を高めるために、参考サイトから画像を引用したいという場合もあります。その場合、無許可で勝手にアップロードして、自分の画像として取り扱うと著作権上の問題があります。

より良いコンテンツ作成のためには、適切な引用も大切です。画像を引用する際には、ダウンロードした画像を自社サーバーにアップロードして配置した上（※）、引用であることを示しましょう。

引用であることを示すには、下記を行う必要があります。

引用タグを使う(imgタグをblockquoteタグで囲う）
引用元を明示し、リンクを付ける（「出典：○○」のように記載し、引用元のページにリンクを貼る）

※引用元の画像URLを利用する「直リンク」はやめましょう。引用元のサーバー負荷が高くなって見られなくなる可能性があります。

表示速度最適化に画像の画質とサイズに気をつける

画像を配置する際は、適切な画質とサイズになるようにしましょう。
適切な画質とサイズに気を付けることで、表示速度の最適化につながります。

画質に気をつける

ユーザーの利便性を高めるための画像ですから、画質が低すぎてぼやけてしまうのはもってのほかです。高画質の画像の方が良い印象になり、画像検索のように一覧で表示された場合にも目を引きます。目立つということは、検索からの流入の可能性が高まります。

また、HTMLの指定に不足があると、「ウインドウから画像がはみ出てしまって、端っこが切れてしまった」ということにもなりかねません。複数のブラウザやデバイスで表示を確認し、環境によらずきれいに表示されるかどうかを確認しましょう。

サイズに気をつける

高画質の画像はファイルサイズが大きくなりすぎる可能性があります。あまり画像サイズが大きくなると、読み込みに時間がかかります。通信容量を削減するため、読み込み時間がかかる（ファイルサイズが大きい）サイトは敬遠するユーザーもいます。そうでなくても、表示に時間がかかればほかのサイトに移動する可能性があります。

表示スピードは検索エンジンの評価にも影響があるので、読み込み速度を確認し、問題があるならファイルサイズを調整しましょう。画質はあまり落とさずに、ファイルサイズを圧縮できるようなサービスもあるので、上手に活用してください。

ページ表示速度の確認方法などは、以下のページでも詳しく説明しています。合わせて確認してください。

⇒PageSpeed Insights・Test My Siteでサイトの表示速度をチェックして、サイトスピードを改善する方法

alt属性を設定する

altタグを適切に設定しましょう。altタグとは、その画像が表示されないときに代替テキストとして表示する内容を指定するためのタグです。ユーザーにとっても画像の理解を助けることになりますが、検索エンジンに画像の内容を伝えるためにも重要な役割を果たしています。

SEOの観点から言うと、alt属性の重要性はあまり高くないかもしれません。ここにキーワードを記入したからといって、劇的に検索順位が向上するわけではないからです。しかし、ユーザーや検索エンジンに分かりやすいWebサイトを作るためには必須の項目です。

また、Googleの検索エンジンスターターガイドには下記のような記載があります。

alt属性を使うもう1つの理由は、画像からリンクを張る場合に、画像のaltテキストがリンクに対するアンカーテキストのように扱われるからです。
引用：Google検索エンジン最適化スターターガイド

画像からリンクを貼る場合、alt属性の積極的な活用が有効です。例えば、メニューに画像を使っているような場合は、テキストリンクのアンカーテキストのイメージで、altテキストを忘れずに設定しましょう。より詳細なalt属性について知りたい方は以下の記事も参照してください。

⇒alt属性とは？SEOにおける役割と効果的な使い方

画像に設定するaltテキストの具体例

Google公式のガイドラインでは、altテキストの設定例として具体的な内容を提示しています。

以下に引用します。

悪い例（代替テキストがない）: <img src=”puppy.jpg”/>

悪い例（キーワードの乱用）: <img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>

良い例: <img src=”puppy.jpg” alt=”puppy”/>

最も良い例: <img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/>

引用：Google検索エンジン最適化スターターガイド

altテキストの未設定やキーワードの羅列がNGなのは当たり前ですが、「できる限り画像の内容が具体的にイメージできるようにする」というのが大切だと分かります。「子犬」という説明では不足していて、「物をとってくる遊びをしているダルメシアンの子犬」という段階まで具体化するとより良いです。

実際にaltテキストを考える際には、具体性を意識して設定してください。

構造化データを追加する

画像をリッチリザルトとして検索結果に表示するためには構造化データが必要です。特に「商品」「動画」「レシピ」に関するコンテンツを扱っている場合は、画像を含めた構造化データが可能かどうかを検討するとよいでしょう。リッチリザルトに画像を表示されることで、視認性がアップし、クリックを誘発効果に期待ができます。

画像のファイル名はわかりやすくする

アップロードする画像にも、個別の分かりやすいタイトルを設定しましょう。検索エンジンが画像の内容を理解する際、ファイル名やキャプション名も利用しているからです。

ガイドラインにも、以下のように記載されています。

ファイル名も画像のテーマを判断する材料として使用されます。たとえば、my-new-black-kitten.jpg のほうが IMG00023.JPG よりもテーマを判断するために役立ちます。

自分で撮影した画像を使う場合、IMG012345.jpgのようにデフォルトの画像名を設定している方も多いのではと思います。しかし、ひと手間かけて分かりやすいファイル名にしてあげましょう。検索エンジンにとっても親切ですし、自分にとってもアップロード後のファイルの管理に役立つはずです。

画像のXMLサイトマップを作成する

検索エンジンに画像の内容や重要性を認識させるため、サイトマップに画像の情報を追加しましょう。通常、XMLサイトマップを作成してサーバーにアップロードし、ウェブマスターツールに登録するという作業を行います。

そのXMLサイトマップに、重要な画像の内容も追加しましょう。

GoogleのSearch Consoleヘルプにも記載されている具体的な記述方法は以下のとおりです。
2つの画像があるページのサイトマップの例です。

<?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>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset>

引用：画像サイトマップ – Search Console ヘルプ

上記の記述方法を使うと、ページごとに最大1,000件の画像リストを作成できます。
画像を指定するサイトマップには<image:loc>のタグが必須ですが、画像の説明をさらに説明するために詳細な属性を活用することもできます。

<image:caption>	画像の短いキャプションや説明です。
<image:geo_location>	画像の地理情報。都市名、州名、国名を記載します。
<image:title>	画像のタイトルです。
<image:license>	画像のライセンス先へつながるURLです。画像サイトマップには、他のドメインのURLも含められます。