Blog

/ SEO設計のHTMLマークアップ

画像のalt属性、SEO設計とアクセシビリティ両面で何を書けば良いか?

画像のalt属性に何を書くかは、その画像の「役割」で決まります。役割は3つ——装飾だけ/内容を伝える/機能を持つ——で、それぞれaltに書く内容が違います。装飾だけの画像にはalt=””(空文字)、内容を伝える画像には画像が伝えていることを、機能を持つ画像にはその機能を書きます。アクセシビリティとSEOの原則は完全に一致していて、画像の役割に沿って書くと、両方が同時に満たされます。

画像には3つの役割がある(装飾/内容/機能)

ページに置く画像は、見た目には同じ「画像」でも、ページの中で果たしている役割は同じではありません。altを書く前に、まずその画像がどの役割を担っているかを見分けます。

1つ目は装飾だけの画像。飾り罫線、背景画像、視覚的なアクセントのためだけに置かれている画像。情報としての中身は持っていません。

2つ目は内容を伝える画像。写真、図表、グラフ、イラスト——画像でしか伝わらない情報を持っているもの。たとえば商品の外観写真、施工事例の写真、サービスの流れを示した図など。

3つ目は機能を持つ画像。アイコンボタン、リンクされた画像、ロゴなど、見るためというより、何かをクリックさせる・どこかへ移動させるために置かれている画像。

実務上は、各画像を見て「これは飾りか、何かを伝えているか、何かをさせるためか」を一度判断します。判断が決まれば、altに何を書くかは自動的に決まります。

装飾だけの画像にはalt=””(空文字)を入れる

装飾画像のalt属性に何か書くと、読み上げソフトを使う人にとってはノイズになります。「飾り罫線」「背景」と読み上げられても、利用者にとっては何の情報にもなりません。

装飾画像のaltは、空文字(alt=””)にします。空文字を指定することで、読み上げソフトはこの画像を「読み上げない」と判断して、飛ばしてくれます。

ここで注意したいのは、altを「書かない」のではなく「空文字を指定する」ということです。alt属性そのものを省略すると、読み上げソフトによってはファイル名を読み上げてしまうことがあります。alt=””と明示的に空にすることで、確実に飛ばされます。

実務上は、装飾画像にもalt属性は必ずつけ、その値を空文字にします。

内容や機能を伝える画像には、その内容や機能を書く

内容を伝える画像には、その画像が伝えている情報を文字で書きます。施工事例の写真なら「施工前の壁の状態」「施工後の壁の状態」のように、写真が示している内容を文字にします。図表やグラフなら、その図表が伝えている要点を書きます。

機能を持つ画像には、見た目の説明ではなく、その機能・行き先を書きます。例えば検索ボタンに使われている虫メガネのアイコンには「虫メガネ」ではなく「検索」と書きます。電話マークなら「電話マーク」ではなく「電話する」または電話番号を書きます。

ロゴ画像も機能を持つ画像の一種です。ここでよくある間違いが、企業ロゴに alt=”ロゴ” と書くこと。「ロゴ」というのは画像のカテゴリーであって、その画像が伝えていること(どの会社か)ではありません。ロゴ画像のaltには、その会社名を書きます(alt=”やまだや” のように)。ロゴがトップページへのリンクになっている場合も、会社名を書くだけで、読み上げソフトを使う人にも「やまだやのトップへ戻るためのリンク」だと伝わります。

なお、alt内に「画像」「写真」のような接頭辞は不要です。読み上げソフトは画像であることを自動的に伝えるため、altの中に「画像」と書くと「画像、画像、〜」と二重に読み上げられてしまいます。

実務上は、各画像のaltを書くときに「この画像が伝えていること/果たす機能を、文字にしたら何になるか」を考えます。それがそのままaltに書く内容です。

altへのキーワード詰めは、アクセシビリティにもSEOにも逆効果

altは検索エンジンが画像の内容を理解する手がかりではありますが、ランキングを直接押し上げる場所ではありません。altにキーワードを並べて詰めても、順位は上がらないどころか、Googleからスパムと判定されるリスクがあります。

同時に、キーワード詰めされたaltは、読み上げソフトを使う人にとっては大きな負担です。画像を見るたびに、意味の通らないキーワードの羅列が読み上げられることになります。

画像の役割に沿った自然なテキストを書くことが、アクセシビリティにとっても、SEO(画像検索でのインデックスを含む)にとっても、最も効果的です。両者の原則は対立せず、同じ方向を向いています。

実務上は、altを書いた後に声に出して読んでみて、「文として自然か」「画像の役割を表しているか」を確認します。不自然なキーワード列が含まれていたら、それを取り除いて自然な文章にします。

まとめ

画像のalt属性に書く内容は、その画像の役割で決まります。

  • 装飾だけの画像 → alt=””(空文字)
  • 内容を伝える画像 → 画像が伝えている内容を文字で
  • 機能を持つ画像 → その機能・行き先を文字で(例:ロゴ → 会社名、検索アイコン → 「検索」)

altへのキーワード詰めはアクセシビリティにもSEOにも逆効果。画像の役割に沿った自然なテキストが、両面で機能します。

書く前に「この画像の役割は何か」を一度決める——これだけで、altに何を書くかは自然と定まります。