Webサイトを制作するにあたり、テキストだけではなく画像を用いることは、ユーザビリティーを上げるための重要な要素です。
しかし、ただ単に画像を用いただけでは、検索エンジンがその画像の内容を認識できません。
ここではSEOの観点から、サイトに画像を挿入する際のベストプラクティスをご紹介致します。
altテキストを設定する
altテキストとは代替テキストとも言われますが、Webサイトやブログに埋め込まれている画像の内容を検索エンジン伝えるための文章です。
検索エンジンは画像を挿入しただけではその内容を認識できないため、画像の内容がわかる説明文が必要です。
(Googleはある程度画像内容を理解する技術は持っていると考えられますが、積極的には使っていないようです)
本来altテキストは、何らかの理由で画像が表示できない場合に画像の代替テキストとしての意味があり、このような場合にテキストで画像内容を伝えることができ、ユーザーにとってもメリットがあります。
altテキストの設定方法は、HTMLの<img>タグ内に、「alt=”テキスト”」と記載します。
例えば、子犬の写真にaltテキストを設定するとしたら「alt=”子犬”」と書くことで設定できます。
WordPressの場合は、メディア(画像)をアップロードする時に代替テキストを入力する項目があるので、そこに入力することで設定が可能です。
周囲のテキストで画像を説明する
画像の近くにも、その画像に沿ったテキスト情報を加えることで、検索エンジンが画像内容を理解する手がかりになると考えられます。
キャプションをつけておくことも有効な手段です。
わかりやすいファイル名をつける
意味のない英数字の羅列でファイル名を設定するよりも、画像を表す英単語などを用いてファイル名を設定するほうが、Googleが画像の内容を理解する手がかりになります。
画像のxmlサイトマップを送信する
画像サイトマップとは、画像コンテンツ場所を検索エンジンに通知するためのもので、追加で画像タイトルやキャプションなどの情報を追加することも可能です。
これを準備しておくことで、検索エンジンがクロールしにくい画像(たとえばjavascript実行時に表示される画像など)も見つけやすくなるというメリットがあります。
構造化データ
構造データとはHTMLで書かれているデータが何の情報かを、検索エンジンをはじめとするロボットに理解できるよう構造化にしたものです。
私たち人間はWebページにある画像やテキストを見ればそれが何なのかを理解できますが、検索エンジンには理解できないため、あらかじめ指定するフォーマットに画像やテキストなどを登録するようなイメージです。
例えば、ある企業のWebページを構造化した場合には、
会社名は○○
ロゴ画像のURLは□△
電話番号は×□
住所は△△
というように、Webページにある文字列や画像が何を示しているかを検索エンジンに記憶させることで、ユーザーが検索した時にテキストだけではなく画像も表示される(リッチスニペット)ので、ユーザビリティーが上がります。
構造化データの設定は、HTML上に直接専用のタグを埋め込むことによって設定することができます。
構造化データについて詳しくは以下の記事もご覧ください。
構造化データとは?~HTMLを構造化する前に知っておきたいこと~
/blogs/structured-data/
まとめ
画像の内容を検索エンジンが理解できるようになることで、画像検索にも表示されやすくなります。
全ての画像に対して上記の施策を行うことは難しいものの、ベストプラクティスを知っておき実行できる施策から実行することをお勧めいたします。