1. Web-Knight[ウェブナイト]トップ
  2. SEO
  3. サイトで画像を加える際に抑えておくべき4項目
SEO

サイトで画像を加える際に抑えておくべき4項目

SEO

ホームページにおける画像はとても重要な役割を果たしています。
例えば、文章で表現できない内容を伝えたり、ホームページのデザインの一部としてサービス・商品の雰囲気を伝えたりと様々です。

スポンサーリンク

現在、Googleの技術もかなり進化し、「Google Cloude Vision API」と言った画像を分析する技術を提供するまで至ってます。そしてその技術を検索エンジンにも一部応用するとこまできています。

ですが、まだまだ「画像だけ」では機械がカンペキに認識できません。画像の情報は私たちが補足してあげる必要があるのです。
画像の意味を補う方法は、主に下記の4つ。とくに画像がサイトの大半を占めるブランディングサイトや、ECサイトは次の項目がSEO的な観点から重要です。

◼️画像の意味を補足する4つの手段

  • alt属性に画像の意味を記述
  • 画像ファイルへのリンクテキスト
  • 画像の周りに配置したテキスト
  • 画像のファイル名

alt属性に画像の意味を記述

まず、imgタグ内で使用するalt属性の大きな機能として、画像が表示されなかった時に代わりとなるテキストを表示するという役割があります。
また、視覚障害者用のスクリーンリーダーに画像を読み上げてもらうためalt属性が参照されます。
なので、検索エンジンはalt属性も参考にしてユーザーへ適切な検索結果を配信しようとしています。

さて、ここでaltを追加するにあたっての注意点ですが、思い浮かぶでしょうか?

その画像を簡潔に説明したテキストを入れる

いまだにaltには何文字ぐらいが適切かという声がかかるのですが、
文字数を軸とした基準は避けて考えましょう。

最近では「画像検索」も頻繁に利用されてきています。今後も少しずつ画像検索は利用度が増してくると予想されます。
そのため、掲載している画像を「画像検索でも上位に出したいか」を一つの基準にして考えるとベストです。
例えば具体的な商品の画像だったり、スタッフの写真だったり、お店の外観だったりなどです。

例:〇〇の健康サプリ「◼️ ◼ ️◼️」1個 600円
例:〇〇のスタッフ「×××××」さん

このように画像検索で使用されるだろうと思われるキーワードを含めた内容にします。
逆にサンプル写真やイメージ写真の場合は、画像検索への露出優先度は低いと思われるので、「〇〇のイメージ」など簡潔にした方がベストです。

飾りやデザイン目的の画像にはalt属性を空にする(alt=””)

デザインを補助するような飾りとなる画像のaltには空にしてあげてください。

ページ内の見出し、リンクになっている場合はaltは必須

画像が見出し(h1~h6タグ)で使われている場合や、リンク(aタグ)で囲われている場合にはaltを必ず入れてください。
前述したように、まだ画像そのものを検索エンジンは正確に理解できません。

また、リンクのある画像にaltがなければ、視覚障害を持つユーザーがリンク先の内容を知る術が無くなってしまいます。
そのため、見出しの画像には見出し文のalt、リンク画像にはどこへリンクするのかを明記したaltを入れるようにしましょう。

キーワードの連発は避ける

altにはしっかりと画像を説明するテキストがあることが重要です。そこを抑えていれば多少長いテキストでもOKです。
しかし、意味が通りにくく、ただブツブツとキーワードが連発されているaltはスパムと認識される可能性があります。

画像ファイルへのリンクテキスト

画像にリンクするaタグ内のテキストも、画像の意味を補助する役割があります。

画像の周りに配置したテキスト

あまり知られてはいないのですが、検索エンジンは画像のalt属性だけでなく、近くに配置された文章もalt属性と関連づけて理解しようとします。
例えば、alt属性に「注文フローの図」と入っているイラスト画像があるとします。
その画像の隣に注文フローを説明する文章があれば、関連が強いと判断するのです。

画像のファイル名

画像ファイルが「001.jpg」や「img_002」などの連番で配置してあるサイトをよく見かけるですが、「ファイル名」も画像の内容を理解するために利用されています。

できれば、重要な画像などにはその画像を端的に表すアルファベットで命名してあげましょう。ライバルに差をつけることができます。
また、画像ファイルに意味付けされた名前があることで、メンテナンス性も向上します。
ただし、画像の命名には使用できる文字とそうでない文字があるので、そこは注意してください。

まとめ

いかがでしょうか?
画像一つにとっても様々な角度で対策を施すやり方があるとご理解いただけたと思います。
上記に挙げた項目の他にも「画像サイトマップ」における施策もあるのですが、また別の機会でお話しできたらと思います。
まずは基本的なalt属性内テキストからもう一度振り返って見ましょう。