画像はテキストよりも情報量が多く、コンテンツの内容をひと目で説明できるなど、非常に重要な要素です。そのため多くのWebサイトで画像が多く使われています。

しかし、検索エンジンはその画像が何を意味しているのか理解するのが苦手という弱点があります。今回は画像の設置から検索エンジンが画像の意味を理解するための方法を解説します。

img要素の使い方

<img src=”画像URL” alt="代替テキスト">

img要素は画像をページに掲載するために使うタグです。src属性で画像URLを指定し、alt属性で代替テキストを指定します。この2つの属性は必須のため必ず記述するようにしましょう。

画像情報を検索エンジンに伝える方法

1.alt属性を使う

alt属性は画像の意味を記述できます。

<img src=”image.jpg” alt=”山梨側から望む赤富士”>

上記のようにalt属性に、その画像を説明する端的な内容を記述します。

<img src=”image.jpg” alt=”山梨,静岡,富士山,赤富士,綺麗,日本一,世界遺産,3776m,登山,日本三名山,日本百名山,日本の地質百選”>

しかし、上記のようにキーワードを詰め込むのはスパムと判断されてしまう可能性があるため、必要最低限に抑えるようにしましょう。

また、全ての画像にalt属性を設定する必要はありません。コンテンツとして意味のある画像に関してのみ設定するだけで問題ありません。ページの装飾などの場合は何も入れない(空)で大丈夫です。

2.画像サイトマップを使う

画像サイトマップは、画像のsitemap.xmlです。画像URLや画像キャプション、画像のタイトルなどを記述することで、検索エンジンに画像の意味を伝えられます。

▼画像サイトマップ記述例
画像サイトマップの記述例

xmlサイトマップは最初に

<?xml version="1.0" encoding="UTF-8"?>

を付けます。これはxml宣言といい、xmlのバージョンの宣言とencodingの宣言を行っています。現在xmlのバージョンは1.0ですが、アップデートがあった場合は変わります。

サイトマップタグ

<urlset></urlset>

の中に記述していきます。

xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"

で、ネームスペースの宣言をします。これもそのまま使用してください。

<loc>

ここで、ページURLを指定します。それ以降の行の意味は以下となります。

タグ 必須 説明
  1つの画像に関するすべての情報を含みます。各タグには、最大1,000 個のタグを含めることができます。
画像のURLを記述します。
画像の説明を記述します。
画像に写っている場所を記述します。
画像のタイトルを記述します。
画像ライセンスへのURLを記述します。

作成後は、サーバーにアップロードをした上で、必ず検索エンジンに画像サイトマップの存在を伝えましょう。方法は

  • Search Consoleから送信
  • robots.txtに画像サイトマップの場所を記述

の2つがあります。忘れずに行いましょう。

3.画像の周りに説明テキストを記述する

検索エンジンは画像の周りのテキストも使って、画像の内容を理解しようと試みます。周りであれば、見出しのテキストも使います。
画像の説明を、画像の周りに記述するようにしましょう。

4.画像のファイル名を使う

検索エンジンは画像の意味を、画像のファイル名も使って理解を試みています。

<img src="apple.jpg" alt="りんご">

ファイル名に「apple」と入っていることで、りんごに関する画像なんだろうと理解します。なるべくわかりやすいファイル名を付けるようにしましょう。

まとめ

検索エンジンはAIを使って画像認識技術を研鑽するなど、画像を理解しようと様々な取り組みをしています。しかし、まだまだ技術的には万全の状態ではありません。そのため、私たち運営者が理解できるようにしっかりと対策する必要があります。正しい知識でimg要素を設定していきましょう。