WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

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

このエントリーをはてなブックマークに追加

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

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

テキストに関連する画像があることによるメリット

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

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

テキスト内容に沿った画像を適宜挿入することで、ユーザーはコンテンツの内容を理解しやすくなります。結果的に、ユーザーの利便性が高まるので、Webサイトへの印象も良くなり、コンバージョンにつながる可能性が高まります。画像の設置はWebサイトのデザインにも影響を与えるので、ブランディングを行う上でも適切な画像を取り入れることは有効です。

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

いくら魅力的な内容のテキストが書かれていたとしても、文字ばかりでは読む側は疲れてしまいます。まして、移動中などのスキマ時間に情報に触れることも多いので、制作側としてはできる限り内容の理解を手助けする工夫をすべきです。

検索エンジンに対するメリット

ユーザーの利便性が高いサイト=検索エンジンに高く評価されるサイトでもあるので、ユーザーにとって親切なコンテンツを心がけることは、そのままSEO対策にもつながります。

Googleは「画像もコンテンツとみなす」という考えで検索エンジンを作っています。Googleのガイドラインを意識しながら適切な画像を取り入れると、「Google画像検索」に自サイトの画像が表示される可能性があります。 露出が増えれば、それだけ検索からの流入も増えます。

後述する「SEOを意識した画像の設置」を行うと、検索エンジンが画像を理解するように手助けできます。コンテンツに即した画像が配置されていることで、検索エンジンの評価が高くなります。

コンテンツに適した画像をアップし、それを検索エンジンに最適化した状態にすることで、効果的なSEO対策ができるのです。

SEOを加味した画像を利用するポイント

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

  1. テキスト内容と関連する画像をピックアップする(or作成する)
  2. 画像のサイズと画質に気をつける
  3. alt属性を設定する
  4. 画像のファイル名はわかりやすくする
  5. 画像のXMLサイトマップを作成する

以下、順に説明します。なお、上記の内容はGoogle公式のガイドラインの内容も参考にしています。

テキスト内容と関連する画像をピックアップする(or作成する)

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テキストの具体例

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テキストを考える際には、具体性を意識して設定してください。

alt属性の考え方について、詳しくは以下の記事でも解説しています。あわせてご確認ください。

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

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

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

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

ファイル名も画像のテーマを判断する材料として使用されます。たとえば、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も含められます。

必要に応じて組み合わせ、サイトマップを最適化しましょう。

おわりに

画像を効果的に活用することは、ユーザーの利便性を高める上でも、SEO対策を有利にすすめる上でも必須です。

SEOを意識した画像活用を行おうと思ったとき、その前提に「ユーザーにとって分かりやすいか」という観点を持っていれば、迷わずに設定ができるはずです。そして、ユーザーに使いやすいサイトにすればするほど、検索エンジンからの評価も高まり、好循環が発生します。

今回は、Googleの公式の見解に基づきながら画像の効果的な活用方法について解説しました。Webサイトに画像を使うのは当たり前になっているので、ここでご紹介した内容を理解し、上手に取り入れてください。

このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6258-0911 FAX番号 0422-26-5610
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-6450-0010 FAX番号 06-6450-0015
Copyright © 2020 DM SOLUTIONS Co.,Ltd. All rights reserved.