画像に代替テキストを設定するalt属性は、アクセシビリティの向上とSEO対策の両方において重要な役割を持っています。正しく書くことでスクリーンリーダー利用者に情報を伝えられるだけでなく、検索エンジンに画像の意味を理解させる助けにもなります。ここではalt属性の基本と正しい記述方法、SEO効果について解説します。
alt属性とは
alt属性は、画像が表示できないときやスクリーンリーダーで読み上げるときに代わりに表示・読み上げられるテキストです。HTMLのimg要素には必ず記述するのが基本です。
<img src="dog.jpg" alt="芝生の上に座る茶色の犬">
正しいalt属性の書き方
altの内容は「その画像が何を表しているのか」を簡潔に表現します。不要にキーワードを詰め込むのは避け、ユーザーに伝わるテキストを心がけます。
- 内容を具体的に記述する：<img src=”cake.jpg” alt=”苺がのったショートケーキ”>
- 装飾目的の画像はalt=””と空にする：スクリーンリーダーで読み上げられなくなり、ノイズを避けられる
- 「画像」「写真」といった説明は基本不要。内容をそのまま書く
alt属性のNG例
- キーワードを羅列する：「犬 猫 動物 ペット」→ 不自然で逆効果
- 無意味な文章：「image123」などファイル名をそのまま入れる
- 空altを乱用する：意味のある画像には必ず説明を入れる
SEOへの効果
検索エンジンは画像を直接認識できないため、alt属性が画像の意味を理解するための重要な手がかりになります。正しいaltを設定することで以下の効果があります。
- Google画像検索で上位表示されやすくなる
- ページ全体の関連性が高まり、通常検索のSEOにも寄与する
- ユーザー体験の改善が間接的に評価につながる
実践的な使い方
ブログ記事やECサイトの商品画像では特にaltが重要です。記事なら内容に関連した自然な説明文、商品なら商品名や特徴を含めると効果的です。
<img src="laptop.jpg" alt="13インチの薄型ノートパソコン（シルバー）">
まとめ
alt属性はアクセシビリティの基本であり、SEOにも直結する重要な要素です。具体的かつ簡潔に画像の意味を伝えることを心がけ、装飾画像は空altで処理するなど適切に使い分けましょう。適切なalt記述を積み重ねることで、ユーザー体験と検索評価の両面で効果を発揮できます。
