必ずと言っていいほどWebサイトに使われるのが画像ですが、検索エンジンはどのように画像を扱うのでしょうか？
検索エンジンに適切に画像を読み取ってもらうには、気をつけておくべきポイントがいくつかあります。
今回は、画像にまつわるSEO対策の全般について紹介します。
画像SEOの効果と重要性
画像のSEO対策をしっかりと行うことで得られる効果は主に2つあります。
コンテンツ解析の促進
そもそも画像は、ユーザーの利便性を高めたり、ページ内の情報をより確実に理解するために使われますね。
画像がユーザーの役に立っているならば、それは検索エンジンにとってもきちんと解析すべき要素として認識されます。
なぜなら、テキストと画像は、それぞれがコンテンツを補足し合うものだからです。
ユーザーがそうであるように、検索エンジンも画像を含めてコンテンツを理解しようと考えています。
実際、Googleは画像の内容を理解するために、可能な限り画像に関連する多くの情報を取得し、検索ランキングに役立てようとしています。
画像に関する情報を適切に伝えることで、SEOにも良い影響を与えます。
画像検索での表示
もう1つは、画像検索の対象になることです。
流行のファッションやヘアースタイル、料理の写真、旅行先の風景、気になっている商品など、画像検索を利用する機会は決して少なくないでしょう。
特に、画像による訴求が重要なジャンルのサイトほど、画像検索からの流入を無視することはできませんね。
画像SEOの基本対策
画像SEOの基本は、画像の内容をテキスト情報を用いて説明することです。
どうすれば検索エンジンに画像を理解してもらいやすくなるのか、具体的な施策を確認しておきましょう。
画像ファイル名
画像のファイル名は、Googleが画像を理解する手がかりの1つとして利用されます。
撮影した写真や入手した画像素材のファイル名は、利用するコンテンツの文脈に合わせて変更します。
画像が見つかったページに画像に適したテキストが見つからない場合、ファイル名が画像のスニペットとして検索結果で使用されます。
公式ヘルプの説明からも、ファイル名が検索に利用されていることがわかりますね。
意外と軽視されがちで、ファイル名の設定をしていない画像は多いです。
1つ1つファイル名を変更するのは面倒かもしれませんが、しっかり対応しましょう。
× → IMG000123.jpg
× → r74oiye8613wc.jpg
◯ → dog-running.jpg
altテキスト
画像SEOの中でも最重要と言える対策が、画像のaltテキスト (alt属性) の記述です。
写真・イラスト・図など、それがどんな内容のものなのか、画像の代替テキストをわかりやすく簡潔に記述します。
音声ブラウザでの読み上げ、画像の非表示設定時のテキスト表示など、altテキストは画像利用時に必ず設定すべきものです。
<img src="images/image-title.jpg" width="600" height="400" alt="画像の内容を表す代替テキスト">SEOに効果的な代替テキストの書き方は alt属性の正しい使い方 の記事で詳しく解説しています。
画像のキャプション
画像のキャプションも画像解析のヒントとして使われます。
キャプションはユーザーの理解の手助けにもなるので、画像に関する説明・補足・注釈等の有用な情報を追加できる場合に利用するとよいでしょう。
HTML5からは、キャプションのマークアップにfigcaption要素を利用することもできます。
画像キャプションの記述例
<figure>
<img src="images/image-title.jpg" alt="代替テキスト" width="300" height="200">
<figcaption>キャプションテキスト</figcaption>
</figure>
画像周辺のテキスト
画像のキャプションにも言えることですが、画像の周辺にあるテキスト情報は、検索エンジンが画像を理解するヒントになります。
画像の付近にあるテキストが、画像に直接的に関係する内容を言及していると考えるのは自然なことですよね。
文脈上の適切な箇所で画像を挿入していれば、必要以上に意識することはありません。
逆に、画像と周辺のテキスト情報に関連性がない状態であれば、要修正です。
画像ファイルの最適化
主にレンダリングに関して語られることの多い内容ですが、画像ファイル自体の最適化も重要なSEO対策です。
画像の品質
画像のファイルサイズを削減する一方で、キレイで見やすい画像を掲載することも重要です。
画像が荒くボヤけたような画像では、肝心のユーザーに歓迎されないでしょう。
加工をして目を引く画像を作成するのも有効ですね。
画像検索においても、キレイで魅力的な画像はクリックを誘発します。
画像の品質とファイルサイズのバランスを考慮しましょう。
widthとheight属性の指定
img要素には、横幅を指定するwdth属性と、高さを指定するheigt属性を記述します。
ピクセルの数値を入力します。
画像の表示サイズを指定しておくと、ブラウザが画像を読み込んでいる最中でも画像の表示領域を計算してレイアウトを形成してくれます。
その結果、ブラウザの表示崩れを防ぎ、読み込み速度も早まります。
<img src="images/image-title.jpg" width="480" height="320" alt="代替テキスト">ただし、レスポンシブなサイトではそもそも画像サイズは固定でないため、あえてサイズを記述しない記述も一般的になってきています。
レスポンシブ時代の画像コーディングの方法についてはを『これが新常識！ レスポンシブな画像切り替え方法まとめ』をご覧ください。
画像ファイルの圧縮・軽量化
画像をアップする前にファイルサイズを軽量化しておきます。
画質の劣化を抑えながら軽量化できるツールを使いましょう。
メタデータ (EXIF情報)
スマホやデジカメで撮影した写真には、EXIF情報 (Exchangeable image file format) のメタデータが含まれています。
EXIFには、撮影場所、位置情報、撮影機器、画素数、ISO感度、色空間、シャッター速度といった様々な情報が保存されていて、画像検索で表示される可能性があります。
ただし、位置情報などは個人情報の漏洩に繋がりやすいので、安全面に充分配慮した上での使用が必須です。
Googleは画像のメタデータも取得していますが、現在のところ、検索ランキングには利用していないようです。
不要であればメタデータを削除すると、ファイルを軽量化できます。
参考: Google は写真メタデータ・EXIF情報を検索ランキングに利用していない
画像形式
Googleが対応している画像形式は、BMP、GIF、JPEG、PNG、WebP、SVG です。
画像をインデックスしてもらうにはいずれかの拡張子の画像にします。
中でも広くサポートされている画像形式が、GIF、JPEG、PNG の三種類ですね。
ユーザー環境によって「正常に表示できない」ということが、ほとんど起こらないので、検索エンジンとユーザー（ブラウザ）の両者にとって扱いやすいフォーマットです。
おおむね次のような条件で GIF、JPEG、PNG の画像形式を選択します。
- アニメーションやベタ塗りイラストならGIF
- 写真やグラデーションのある画像ならJPEG
- 透過画像や画質優先ならPNG
PNGは高品質ながら、ファイルサイズが大きくなりやすいデメリットがあります。
これからさらに普及が期待される画像形式が SVG (Scalable Vector Graphics) です。
拡大しても画像が荒くならないベクター形式の画像で、Retinaディスプレイ等の高解像度ディスプレイでもキレイに表示できます。
画像サイトマップでインデックス促進
インデックスを促進するために、ページ同様、検索エンジン用の画像サイトマップを作成します。
画像専用にサイトマップを作成してもかまいませんが、ページのインデックスに使うXMLサイトマップに画像情報を追加することができます。
画像情報を追加したXMLサイトマップのタグ記述例
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
<image:caption>画像のキャプション</image:caption>
</image:image>
</url>
画像を使うべきでない要素
検索エンジンが画像の内容を理解するために、alt属性のテキストや画像周辺のテキストなどをヒントにしていることからわかるように、情報の解析（インデキシング）の基本はテキスト情報です。
したがって、検索エンジンにきちんと理解してもらいたい要素は、画像ではなく通常のテキストを使うのが最も確実です。
例えば、ナビゲーションや見出しはデザインをするために画像化することがあります。
しかし、重要な要素でもあるので、なるべくならテキストで表現する方がよいでしょう。
CSSやWebフォント等を利用すれば、画像を使わずにデザイン表現を工夫することもできるので、検討したいものですね。
また、画像とテキストの両方を記述し、ユーザーに画像の方だけを見せる隠しテキストの手法は、ガイドライン違反となる可能性があるので注意しましょう。
画像中心のページはSEOでは不利？
コンテンツの多くが画像で構成されているページは、SEOの観点から見れば、あまり好ましくありません。
そうは言っても、ユーザー視点で考えれば、画像はとても重要な要素です。
コンテンツを楽しんでもらえるし、内容をより理解してもらいやすくなるなど、画像ならではの効果があることは確かです。
画像を多く使うなら、その分、テキスト情報も充実させられないか考えてみましょう。
あるいは、画像中心のページについてはユーザーのためと割り切り、別のページでSEOを重視するという選択肢もあります。
必ずしもSEOの原則を当てはめるのではなく、全体の戦略やコンバージョンと言った観点から、画像コンテンツの使い方を考えてみるることも大切ですね。
コメントをどうぞ