Webページに画像を掲載するとき、「alt属性」をちゃんと設定していますか?
正直なところ、この設定を後回しにしているサイトはかなり多いです。alt属性はアクセシビリティ(視覚障がいのある方のスクリーンリーダー対応)のためでもありますが、Googleが画像の内容を理解するためにも使われます。設定が抜けていると、せっかくの画像がSEO的にはほぼ無意味になってしまいます。
altテキストとは?
HTMLでは画像を以下のように記述します。
<img src="seo-checklist.png" alt="SEOチェックリストの画像">
この alt="..." の部分がaltテキストです。
altテキストの役割
1. 画像が表示されないときの代替テキスト 通信環境が悪いときや、画像の読み込みに失敗したとき、altテキストが代わりに表示されます。
2. スクリーンリーダーへの対応 視覚障がいのあるユーザーが使うスクリーンリーダーは、altテキストを読み上げます。適切なaltテキストはアクセシビリティの向上にもつながります。
3. Googleへの画像内容の説明 Googleのクローラーは画像そのものを完全には「見る」ことができません。altテキストを読んで画像の内容を把握し、画像検索のインデックスに活用します。
altテキストの正しい書き方
画像の内容を具体的に説明する
altテキストには、画像を見ていない人に内容が伝わるように具体的に書きます。
| 画像の内容 | 悪い例 | 良い例 |
|---|---|---|
| グラフの画像 | グラフ | 2026年のSEOスコア推移グラフ |
| 商品写真 | 商品画像 | 青いデザインのSEO診断ツールのスクリーンショット |
| 人物の写真 | 写真 | スマートフォンでWebサイトを確認している女性 |
キーワードを自然に含める
関連するキーワードをaltテキストに含めると、そのキーワードでの画像検索に表示されやすくなります。ただし、キーワードを詰め込みすぎるのは逆効果です。
<!-- NG: キーワードの詰め込み -->
<img src="seo.png" alt="SEO SEO対策 SEO改善 SEOチェック SEOツール">
<!-- OK: 自然なキーワードの含め方 -->
<img src="seo.png" alt="SEO診断ツールで改善ポイントを確認している画面">
装飾画像はaltを空にする
デザインのためだけの飾り画像には、altを空にします(alt="")。内容のない説明文を書くと、スクリーンリーダーのユーザーに余計な情報が読み上げられてしまいます。
<!-- 装飾画像の場合 -->
<img src="decoration.png" alt="">
よくある間違い
altを省略してしまう
altを省略すると、Googleはファイル名から内容を推測しようとします。img001.png のような意味のないファイル名だと、画像の内容がGoogleに伝わりません。
ファイル名をそのままaltに使う
<!-- NG -->
<img src="img001.png" alt="img001.png">
ファイル名をそのままaltにしても意味がありません。画像の内容を説明するテキストを書きましょう。
全ての画像に同じaltを使う
ページ内に複数の画像があるのに、すべて同じaltテキストを使っているケースがあります。各画像の内容に合わせた説明文を設定しましょう。
altテキストの確認方法
ブラウザの開発者ツールで確認
ChromeでF12を押して開発者ツールを開き、Elements(要素)タブで <img> タグを探してalt属性を確認できます。
ブラウザ拡張ツールで一括確認
「Alt Text Checker」などのブラウザ拡張機能を使うと、ページ上の全画像のalt属性をまとめて確認できます。
合わせて読みたい
- titleタグとSEO:altテキストと同様に、titleタグも各ページで固有の内容にすることが重要です
- 見出しタグとSEO:ページの構造を作るh1〜h6の正しい使い方を解説しています
- SEOチェックリスト20項目:altテキストを含むオンページSEOの全項目をまとめて確認できます
まとめ
- altテキストはGoogleが画像内容を理解するために使われる
- 具体的に画像の内容を説明する文章を書く
- キーワードを自然に含めつつ、詰め込みすぎない
- 装飾画像は
alt=""にする - 設定漏れはブラウザ拡張ツールや開発者ツールで確認できる
altテキストの設定は地味な作業ですが、積み重ねると画像検索からの流入にも影響してきます。まずは既存ページの画像を一枚ずつ確認するところから始めてみてください。