画像altとは？アクセシビリティとSEOを両立する書き方

画像に付けるalt属性は、地味に見えて効果の大きいSEO・アクセシビリティ施策です。

画像が表示されない環境や、スクリーンリーダーを使うユーザーにとって、altは「その画像が何であるか」を伝える唯一の手がかりになります。この記事では、altの役割から具体的な書き方、避けるべきNG例までを整理します。

alt属性の役割

alt属性は、img要素に代替テキストを指定するためのHTML属性です。

<img src="/images/red-sneakers.jpg" alt="赤いランニングシューズを履いた足元のクローズアップ写真" />

主な役割は次の3つです。

• 画像が読み込めなかった場合に代わりに表示されるテキスト
• スクリーンリーダー利用者に画像内容を音声で伝える
• 検索エンジンが画像の内容を理解し、画像検索経由の流入につなげる手がかり

良いalt・悪いaltの違い

altは「画像に何が写っているか」を簡潔かつ具体的に説明するのが基本です。

悪い例

<img src="img001.jpg" alt="画像" />
<img src="banner.jpg" alt="ランニングシューズ ランニングシューズ 通販 安い 送料無料" />

良い例

<img src="img001.jpg" alt="オフィスでノートパソコンを操作する女性" />
<img src="banner.jpg" alt="軽量設計のランニングシューズ「エアフロー2」" />

キーワードを詰め込みすぎる「キーワードスタッフィング」は、Googleのガイドラインで明確に非推奨とされており、スクリーンリーダー利用者にとっても不自然で分かりにくい文章になります。

装飾用画像はalt=""でよい

アイコンや区切り線など、情報を持たない純粋に装飾目的の画像には、意味のある文章を無理に入れる必要はありません。

<img src="/images/divider.png" alt="" />

空のalt属性（alt=""）を設定しておくことで、スクリーンリーダーはその画像を読み上げずにスキップします。alt属性自体を省略してしまうと、スクリーンリーダーがファイル名などを読み上げてしまい、かえってノイズになることがあるため注意が必要です。

ファイル名・キャプションとの関係

画像最適化とのバランス

画像SEOはaltだけで完結しません。適切なファイルサイズへの圧縮、width・height属性の指定によるレイアウトシフト防止、必要に応じたloading="lazy"の指定なども、ページ表示速度や体験品質に関わる要素として合わせて確認しておきたいポイントです。

本ツールでは、サイト内の画像を自動でスキャンし、alt属性が未設定の画像や、キーワードの詰め込みが疑われる不自然なalt、装飾画像へのalt未設定などをまとめて検出できます。ページ数が多いサイトほど手作業での全数チェックは現実的でないため、定期的な自動チェックの併用がおすすめです。

チェックリスト

最後に、本記事のポイントをチェックリストとしてまとめます。

• コンテンツとして意味のある画像すべてにaltが設定されているか
• altがキーワードの羅列ではなく自然な説明文になっているか
• 装飾目的の画像に alt="" が設定されているか（alt自体の省略はNG）
• ファイル名が内容を反映したものになっているか
• 画像サイズの指定や圧縮など表示速度面の最適化も行われているか

自サイトの画像alt設定の状態は、本ツールの SEOチェッカー で確認できます。alt未設定の画像や不自然なaltを自動で検出し、改善の手がかりを示します。

参考・一次情報ソース

• Google Images best practices — Google Search Central
• SEO Starter Guide — Google Search Central