alt属性の書き方完全ガイド｜SEO・アクセシビリティ・画像検索で成果を出す方法

alt属性とは何か

alt属性（alt attribute）は、HTMLのimg要素で画像の「代替テキスト（alternative text）」を指定するための属性です。「オルト属性」や「オルト」と略されて呼ばれることも多い、Webページの基礎要素のひとつです。

記述の基本形

基本的な書き方はとてもシンプルです。

<img src="cat.jpg" alt="窓辺で丸くなって眠っている茶色の猫">

src属性で画像ファイルの場所を指定し、alt属性でその画像の意味を文章で表します。

alt属性の3つの役割

alt属性には、以下の3つの重要な役割があります。

• 代替テキストの表示：画像が読み込めないときや表示がオフのときに、代わりに表示されるテキスト
• スクリーンリーダーへの情報提供：視覚に障害のあるユーザーに画像内容を伝える
• 検索エンジンへの情報提供：Googleなどが画像内容を理解するための手がかり

HTMLの仕様では必須属性

HTML Living Standardでは、img要素のalt属性は基本的に必須とされています。ただし、画像が純粋に装飾目的である場合は alt="" という「空のalt属性」で明示的に示すのが正しい書き方です。alt属性自体を省略することは、基本的に推奨されません。

検索エンジンはどう使うのか

Googleなどの検索エンジンは画像認識AIも使いますが、ページ文脈とalt属性を組み合わせて画像内容を理解するのが基本です。正確なalt属性を書くことで、検索エンジンに「このページは何について書かれているか」「どの画像が何を表しているか」を正しく伝えられます。

alt属性がSEOに与える影響

alt属性はSEO対策の「基本中の基本」とされる要素ですが、具体的にどのような影響があるのかを整理しましょう。

ページ全体のトピック理解に寄与

Googleはページ内のテキストとalt属性を合わせてページのテーマを理解します。例えば「ラーメン」の記事で画像のalt属性が「ラーメン」「つけ麺」「スープの写真」などになっていれば、記事のトピックが明確に伝わります。

画像検索での表示

Google画像検索では、alt属性・ファイル名・周辺テキストから画像内容を判断します。適切なalt属性が設定された画像は、画像検索で上位表示されやすくなります。画像検索経由で集客している業種（レシピ・インテリア・ファッション・花屋など）では特に重要です。

E-E-A-Tの観点でもプラス

alt属性まで丁寧に設定されたサイトは「ユーザーへの配慮が行き届いたサイト」と評価され、E-E-A-T（経験・専門性・権威性・信頼性）の観点でも間接的にプラスになります。Googleは「アクセシビリティへの配慮」も広義の品質として評価しています。

本文テキストほどの影響力ではない

ただし注意したいのは、alt属性はあくまで「補助的な要素」である点です。見出し・本文・内部リンクほどの強いSEO効果は期待できません。alt属性を最適化するよりも先に、本文の質を上げる方が順位への影響は大きくなります。

altタグに関するGoogleの公式見解

Googleの公式ドキュメントでは「alt属性は画像の内容を短くて意味のある言葉で表してください。キーワードの詰め込みは避けてください」と明記されています。SEOを意識しつつも、自然な記述を心がけることが最も重要です。

画像検索で見つけられるalt属性の書き方

画像検索からの流入を意識するなら、alt属性の書き方にはより戦略的な視点が必要です。

具体的な被写体・場面を描写

「料理」ではなく「和風ハンバーグとサラダが乗ったランチプレート」のように、具体的な被写体と状況を書きます。検索者は具体的なキーワードで画像を探しているため、抽象的な表現では引っかかりません。

文脈に合うキーワードを含める

ページのメインキーワードを自然に含めることで、画像検索での露出を高められます。例えばラーメン店の記事なら「家系ラーメンの特徴である濃厚なとんこつスープ」のように、記事テーマと関連するキーワードを含めます。

冗長にしすぎない

alt属性は50〜125文字程度が適切と言われています。長すぎるとスクリーンリーダーで読み上げる際に読みづらくなり、検索エンジンからも評価されにくくなります。情報量と簡潔さのバランスを取りましょう。

ファイル名との連携

画像のファイル名も画像検索に影響します。「IMG_1234.jpg」のような意味のない名前ではなく、「tonkotsu-ramen.jpg」「modern-living-room.jpg」のように、画像内容を表す英数字ファイル名にしましょう。alt属性と合わせて、画像内容を明確に伝えられます。詳しくは画像SEO完全ガイドもあわせて参照してください。

アクセシビリティ視点でのalt属性

alt属性の本来の目的はアクセシビリティ、つまり「誰もが情報にアクセスできる」ための配慮です。SEO目的だけでなく、この視点を持つことが重要です。

スクリーンリーダーでの読み上げ

視覚に障害があるユーザーは、スクリーンリーダー（画面読み上げソフト）を使ってWebを閲覧します。img要素に到達するとalt属性の値が読み上げられるため、ここに適切な情報がないと画像の意味が完全に失われます。

WCAGガイドライン

WCAG（Web Content Accessibility Guidelines）は国際的なアクセシビリティ標準で、画像の代替テキストは「達成基準1.1.1：非テキストコンテンツ」で必須要件とされています。公的機関のサイトや大企業のサイトでは、この基準への準拠が強く求められます。

「その画像が見えたら何を得るか」が基準

alt属性を書く最も良い判断軸は、「もしこの画像を見られない人がいたら、その人が得るべき情報は何か」です。装飾であれば情報不要、コンテンツであれば画像内容を文章化する必要があります。

高齢者・認知機能の配慮

アクセシビリティの対象は視覚障害者だけではありません。高齢者、認知機能に困難を抱える方、画像読み込みが遅い通信環境のユーザーなど、多様な人が恩恵を受けます。alt属性の丁寧な記述は、すべてのユーザーへの配慮に直結します。

装飾画像とコンテンツ画像の書き分け

alt属性を書くうえで最も迷うのが「この画像は装飾なのか、コンテンツなのか」という判断です。ここを間違えると、SEOにもアクセシビリティにもマイナスになります。

装飾画像の判定基準

以下のような画像は装飾画像として扱い、alt="" を使用します。

• CSS背景画像として扱うべき装飾的な模様・罫線
• テキストと同じ情報を伝えているだけの画像（文字の隣のアイコン）
• デザイン上の区切り線・装飾パターン
• 純粋なビジュアル装飾

コンテンツ画像の判定基準

以下のような画像はコンテンツ画像として、適切なalt属性を記述します。

• 記事の内容を補強・説明する写真
• 商品画像
• グラフ・図表・インフォグラフィック
• 人物写真・風景写真
• ロゴ（会社名・サービス名を表す）

ロゴ画像の書き方

ロゴ画像は会社名・サービス名を伝える重要な要素です。「alt="LIKaNON"」のように、会社名・サービス名をそのまま書きます。ヘッダーのロゴがホームページに戻るリンクの場合は、「alt="LIKaNON ホームへ戻る"」でも構いません。

グラフ・図表のalt属性

グラフや図表は「何を示しているか」の要点を書くのが正しい書き方です。「alt="2023年の売上推移グラフ。4月から9月にかけて約1.5倍に増加"」のように、データの本質を文章で伝えます。詳細な数値は本文テキストで提示するのが理想です。

よくある間違った書き方8例

alt属性で頻繁に見かける間違った書き方を、8つのパターンに分けて紹介します。自サイトでも当てはまっていないかチェックしてみてください。

1. 「画像」「写真」と書くだけ

alt="画像" alt="写真" は、検索エンジンにもスクリーンリーダーにも何の情報も与えません。具体的に何が写っているかを書きましょう。

2. ファイル名のまま

alt="IMG_1234.jpg" のような記述は典型的なNG例です。ファイル名をそのままコピペしているだけで、意味が全く伝わりません。

3. キーワードの羅列

alt="英会話 英会話教室 英会話スクール 新宿 英会話" のような記述は、スパム判定される可能性があります。自然な文章を心がけましょう。

4. 同じ画像に毎回同じalt

ページ内に複数枚の違う画像があるのに、全部同じalt属性にするのも不適切です。それぞれの画像に合った説明を書きましょう。

5. 長すぎる説明文

alt属性に200文字を超えるような長文を入れると、スクリーンリーダーで読み上げる際に負担になります。詳細は本文に書き、altは簡潔にまとめます。

6. 画像にない情報を書く

altは実際に写っているものを説明するものです。画像に写っていない「お得キャンペーン」「無料体験実施中」などを書くのは不適切です。

7. 「〜の画像」「〜の写真」をつける

alt="猫の画像" のように「〜の画像」と書くのは冗長です。スクリーンリーダーは事前に「画像」と認識しているため、「猫」だけで十分です。

8. 装飾画像に無理やりaltをつける

装飾目的の罫線や背景模様にまで alt="装飾線" などと書くのは、スクリーンリーダーユーザーにとって邪魔な情報になります。装飾画像は alt="" が正解です。

キーワードの詰め込み過ぎは逆効果

SEOを意識しすぎてキーワードを詰め込むのは、alt属性の最もよくある失敗パターンです。

キーワードスタッフィングの弊害

alt属性に不自然なキーワード羅列を行うと、Googleから「キーワードスタッフィング（詰め込み）」と判断され、SEO評価が下がります。過度な最適化は順位下落の原因になることを覚えておきましょう。

自然な文章が最も強い

「家系ラーメンの濃厚なとんこつ醤油スープ」のような自然な表現が、結果として画像検索でも上位表示されやすくなります。検索者の言葉遣いを意識した表現を選ぶのがコツです。

キーワードは1〜2個まで

alt属性内に入れるキーワードは、自然に含まれる範囲で1〜2個までが目安です。それ以上入れようとすると、文章が不自然になります。

チェックツールの活用

自サイトのalt属性の状態をチェックしたいときは、「WAVE」「axe DevTools」「Lighthouse」などのアクセシビリティチェックツールが便利です。alt属性が空になっている画像や、不適切な記述を自動で検出してくれます。

画像SEOの総合対策

alt属性はあくまで画像SEOの一部。本当に成果を出すには、画像全体の最適化が必要です。

適切なファイル形式

写真はJPEG、ロゴ・アイコンはPNGかSVG、アニメーションはWebPやGIF、というように目的に応じた形式を選びます。WebPは軽量で画質も高く、現代のWebサイトでは標準的な選択肢になっています。

ファイルサイズの最適化

画像が重いとページ表示速度が遅くなり、ユーザー体験もSEO評価も下がります。TinyPNGやImageOptimなどのツールで圧縮し、必要以上に大きな画像は避けます。一般的には1画像あたり100〜300KB程度に収めるのが目安です。

width・height属性の指定

img要素にはwidthとheightを明示的に指定しましょう。ブラウザが事前に画像サイズを確保でき、CLS（Cumulative Layout Shift）を防げます。Core Web Vitalsの観点でも重要な対策です。

遅延読み込み（Lazy Loading）

img要素にloading="lazy"属性を追加することで、画面外の画像の読み込みを遅延させられます。ページ初期表示が高速化し、UXとSEOの両方にプラスです。

レスポンシブ画像

srcsetとsizes属性を活用して、画面サイズに応じた最適な画像を配信することで、モバイルでの表示速度を大きく改善できます。

サイトマップに画像を含める

XMLサイトマップに画像情報を含めると、Google画像検索でのインデックスが促進されます。特に画像の数が多いサイトでは有効です。

ライティング全体との連動

alt属性だけを最適化しても、本文の質が低いとSEO効果は限定的です。SEOに強い文章の書き方と合わせて総合的に取り組むことで、サイト全体の順位が上がります。サイト全体のWeb戦略を整えたい場合は、低価格で始められるホームページ制作プランもご検討ください。

まとめ

alt属性は、SEO・アクセシビリティ・画像検索の3つの観点から重要な基礎要素です。キーワードを詰め込むのではなく、「画像が見えない人にその内容を伝えるなら何と書くか」を基準に、自然で正確な文章を書くことが最大のコツです。

alt属性は小さな要素ですが、積み重なるとサイト全体の品質を大きく左右します。ホームページ制作・改善で「何から手をつければいいか分からない」という方は、ぜひLIKaNONへご相談ください。既存サイトの診断からご対応いたします。