alt属性とは？書き方・SEO効果・アクセシビリティを解説
PageSpeed Insightsなどの診断ツールで「画像要素にalt属性が指定されていません」と指摘された経験はないでしょうか。
放置してしまうと、SEOだけでなく多くのユーザーにとっての使いやすさも損なってしまいます。
この記事では、alt属性の意味やSEO効果、正しい書き方からよくある間違いまでを解説します。
画像を扱うすべてのページで押さえておきたい内部対策の基本です。
alt属性とは
alt属性とは、画像が表示されない場合に代わりとなるテキストを指定するHTMLの属性です。
<img>タグの中に「alt=”説明文”」という形で記述します。
もともとは画像が読み込めない状況を補うために作られた仕組みで、altは英語の「alternative（代替）」の略です。
次の章では、alt属性がSEOやアクセシビリティで重要とされる理由を紹介します。
alt属性の設定に不安がある方へ
自社サイトの画像にalt属性が適切に設定できているか分からないなら、合同会社dock.へご相談ください。まずはお気軽に無料相談へお申込みください。
無料相談してみる →alt属性が重要な理由
alt属性には、大きく分けて2つの役割があります。
- 検索エンジンに画像の内容を伝える
- 視覚に障害のあるユーザーを支援する
どちらもWebサイトの品質を左右する要素です。
検索エンジンに画像の内容を伝える
検索エンジンは画像そのものの内容を完全には理解できないため、alt属性のテキストを手がかりにしています。
適切なalt属性を設定することで、画像検索からの流入が見込める点はメリットです。
たとえば「赤いスニーカー 24cm」のように具体的なalt属性を設定すれば、画像検索経由の流入が増えることもあります。
画像だけに頼らず、テキストでも情報を補完する意識が大切です。
視覚に障害のあるユーザーを支援する
視覚に障害のあるユーザーは、スクリーンリーダーという音声読み上げソフトでWebサイトを利用しています。
alt属性が設定されていれば、画像の内容がそのまま読み上げられ、内容を理解できる仕組みです。
たとえばalt属性が空のまま画像100枚を放置すると、スクリーンリーダー利用者には100か所の情報が欠落します。
alt属性は、SEOだけでなくアクセシビリティの観点からも欠かせない要素です。
alt属性の正しい書き方
効果的なalt属性を書くには、いくつかのポイントを押さえる必要があります。
- 画像の内容を具体的かつ簡潔に説明する
- 装飾目的の画像は空にする
すべての画像に同じ書き方が正しいわけではありません。
画像の内容を具体的かつ簡潔に説明する
「画像」「写真」のような曖昧な表現ではなく、何が写っているかが伝わる文章にしましょう。
例えば商品写真であれば、商品名や特徴まで含めると具体性が高まります。
たとえば「赤いランニングシューズ24cm」のように20〜30字程度にまとめると、簡潔で伝わりやすいです。
不自然にキーワードを詰め込みすぎないよう注意しましょう。
装飾目的の画像は空にする
アイコンや区切り線など、情報を持たない装飾目的の画像には、alt属性を空（alt=””）にするのが基本です。
意味のない画像に無理やり説明文を入れると、スクリーンリーダーで不要な読み上げが発生してしまいます。
たとえば区切り線やアイコンに「装飾用画像」と入れる必要はありません。
画像の役割を見極めた上で、設定の要否を判断することが大切です。
alt属性でよくある間違い
alt属性は設定するだけでなく、内容にも注意が必要です。
- すべての画像に同じテキストを使い回す
- キーワードだけを詰め込む
誤った運用は、かえって評価を下げる原因になりかねません。
すべての画像に同じテキストを使い回す
1つの記事内にある複数の画像へ、まったく同じalt属性を設定してしまうケースが見られます。
画像ごとに内容が異なるはずなのに同じ説明文では、検索エンジンにもユーザーにも正しく情報が伝わりません。
たとえば5枚の商品画像に同じ「商品写真」という説明を使うと、検索エンジンに区別がつかなくなります。
テンプレート的な使い回しは、結果的に信頼性を下げる要因になります。
キーワードだけを詰め込む
SEOを意識するあまり、対策キーワードを不自然に繰り返す書き方は避けましょう。
本来の目的である「画像の内容を説明する」という役割から外れてしまいます。
たとえば1つのalt属性に「SEO対策」を3回以上繰り返すと、スパム的な手法とみなされるリスクもあります。
あくまで自然な文章で、画像の内容を正確に伝えることを優先しましょう。
alt属性のよくあるミスが心配な方へ
既存サイトのalt属性が適切に設定されているか確認したいなら、合同会社dock.へご相談ください。まずはお気軽に無料相談へお申込みください。
無料相談してみる →FAQ
A. alt属性は画像の代替テキストで、title属性はマウスを乗せた際に表示される補足情報です。役割が異なります。
A. 画像が表示されない場合に内容が伝わらず、スクリーンリーダーの利用者にも情報が届かなくなります。SEO評価にもマイナスです。
A. 問題ありません。むしろ日本語サイトでは、ユーザーや検索エンジンに伝わりやすい日本語での記述が基本です。
A. メディアライブラリの画像編集画面にある「代替テキスト」欄から設定できます。
A. 情報を持たない装飾画像であれば、alt=””と空にして問題ありません。無理に説明文を入れる必要はありません。
まとめ
alt属性とは、画像が表示されない場合に代わりとなるテキストを指定するHTMLの属性です。
検索エンジンへの情報伝達と、視覚に障害のあるユーザーへの支援という2つの重要な役割を持ちます。
画像の内容を具体的かつ簡潔に説明し、装飾目的の画像は空にするなど、役割に応じた設定を心がけましょう。
使い回しやキーワードの詰め込みを避け、1枚ずつ丁寧に設定することが成果につながります。
合同会社dock. 代表。2017年の大学在学時に始めたブログの運営が原点となり、SEO業界でのキャリアがスタート。大学卒業後は上京し、Web系広告代理店でオウンドメディアの責任者として、SEOを通じたリード獲得や、SEOコンサルタントとして上場企業や大手企業の対応も多数経験。フリーランスとしてライターやSEOコンサルタントを経験し、2025年に合同会社dock.を設立。
