img要素での画像情報の伝え方を解説

 

img要素の画像情報とは

WEBページを構成する要素で、画像は特に重要な役割があります。 テキストだけでは伝わらないことを説明したいり、アイキャッチ画像としてイメージを訴求するなど、画像にはユーザーに有益な役割があります。

Googleも画像をシステムで認識できるように研究を進めています。 機械学習モデルを使用する「Google Cloud Vision API」と呼ばれる、画像分析のAPIが提供されています。 例:花の画像をVision APIに投げると、その画像が花であることを認識して、追加で花の色や品種なども認識します。

https://cloud.google.com/vision?hl=ja

画像認識技術は、すでに検索エンジンにおいても利用されています。 しかし、画像だけで100%正確に認識することは困難なので、検索エンジンに対して画像の意味を補足する情報を、設置する必要があります。

  • imgタグに含まれるalt属性
  • 画像周辺のテキスト
  • 画像に設置しているリンクのアンカーテキスト
  • 画像ファイル名
  • 画像サイトマップ

画像を中心としたWEBサービスで、画像検索結果での上位表示を目指すには検索エンジンに画像の内容や意味を正確に処理させるために、情報を設置することは不可欠です。

imgタグに含まれるalt属性とは

検索エンジンが画像の内容を認識する方法の基本は、タグに含まれるalt属性です。

<img src=”seo.jpg” alt=”検索結果画面”>

alt属性とは「万が一画像が表示されなかったときの代替手段(alternative)として表示させるための言葉」として定義されています。 視覚障がい者などが使用するスクリーンリーダー(ページのテキストを読み上げるブラウザ)でも、画像を説明する文章としてalt属性が使用されます。

altの設定に注意すること

  • 具体的な内容を記述する
  • 装飾目的の画像の場合は、alt属性は空で問題ない
  • タイトル、見出し、リンクになっている場合は、必ずalt属性を記述する
  • 多数のキーワードを詰め込まない

画像周辺のテキスト

alt属性で設置するテキストは、画像だけでなく画像が配置されている文脈、画像周辺のテキストなどの情報も参考にしています。

画像に設置しているリンクのアンカーテキスト

画像に向けられたリンク元のアンカーテキストも、Googleは画像の内容把握の手がかりとしています。画像へのリンクを設置する場合は、その画像を的確に表すアンカーテキストを記載しましょう。

画像ファイル名

Googleは、画像のファイル名もその意味を把握するために使用しています。 ファイル名は「img01.jpg」ではなく、画像の内容を表した文字列にしましょう。

画像はテキストよりもユーザーが理解しやすいこともあり、コンテンツ内で画像を活用するケースも多くあります。 画像情報を検索エンジンに正確に伝えることで、文章の内容をより正確に伝えることができます。 また、画像検索結果にもコンテンツ内の画像が表示されやすくなります。新たな顧客の流入導線にもなります。可能な限りすべての画像に、対応するようにしましょう。