alt属性とは？SEO効果を高める書き方【715診断から見える実装課題】

alt属性とは何か

alt属性（alternative text）とは、HTMLの<img>タグに付与するテキスト情報で、画像が表示されない場合の代替テキストとして機能します。

スクリーンリーダーが視覚障害者にページ内容を読み上げる際の基盤情報にもなり、さらにGoogle画像検索やAI検索エンジンが画像の内容を理解する手がかりとしても使われます。HTMLでの基本的な記述は以下の通りです。

<img src="product-photo.jpg" alt="赤いレザーソファ 3人掛け">

MDN Web Docsによれば、alt属性はすべての<img>要素に記述することが推奨されており、省略はアクセシビリティ違反として扱われます。画像が読み込めない環境（低速回線・音声ブラウザ・クローラー）においては、alt属性のテキストがその画像の「内容そのもの」として扱われます。

alt属性とよく混同されるのがtitle属性です。title属性はマウスオーバー時のツールチップとして表示されますが、SEO効果は限定的であり、スクリーンリーダーでの読み上げも環境依存です。alt属性とtitle属性は別物であり、混同して使用すると実装の不備につながります。

alt属性がSEOに与える影響

alt属性の最適化は、画像検索での表示と通常の検索ランキングの双方に影響します。

Googleの公式ドキュメント（画像に関するSEOのベストプラクティス）では、意味のあるalt属性を記述することが明確に推奨されています。Googleのクローラーは画像自体の内容を完全に理解できるわけではなく、alt属性のテキストを重要な手がかりとして画像の内容を把握します。

SEOへの影響は2つの経路で発生します。

① 画像検索への直接影響

alt属性に含まれるキーワードは、Googleの画像検索結果での表示に直接関与します。適切なalt属性を設定することで、画像検索からの流入が増加します。過去のコンサルティング案件では、alt属性を最適化しただけで画像検索からの流入が月30〜50件増加した事例があります。

② ページ評価への間接影響

alt属性の整備は、ページ全体のコンテンツ品質の一部として評価されます。とくにE-E-A-Tの観点から「専門性・信頼性を示すコンテンツ」として、画像情報の整合性が重要視される傾向があります。また、Core Web Vitalsには直接影響しませんが、適切に最適化された画像（適切なalt + 適切なサイズ）はページパフォーマンスとの相関があります。

テクニカルSEOの観点からは、構造化データと同様、alt属性もページの機械可読性を高める要素です。AI検索エンジンが画像コンテンツを理解する際にも、alt属性のテキスト情報は補助的に参照されます。

715サイト診断から見えたalt属性の実態

SEGO診断ツールで715サイトを分析した結果、54.5%のサイトでalt属性の実装に何らかの課題が確認されました。これは診断項目の中でも上位に入る不備率です。

課題の内訳を詳しく見ると、次のパターンが浮かび上がります。

• 空のalt属性（41%）：alt=""のまま放置、またはalt属性自体が存在しないケース。画像の内容がクローラーにまったく伝わりません。
• キーワードの詰め込み（28%）：alt="東京 美容院 安い おすすめ カット パーマ"のように、検索キーワードを羅列したケース。Googleはこれをスパムと判定する場合があります。
• 装飾画像への説明付与（21%）：区切り線・背景画像・ボタン画像など、装飾目的の画像にコンテンツの説明を付けているケース。スクリーンリーダーが余分な情報を読み上げ、UXを損ないます。
• title属性との混同（10%）：alt属性に「クリックで拡大」「画像」などのtitle的な文言を記述しているケース。

この診断データは、alt属性の「設定する・しない」だけでなく、「正しく設定されているか」が重要であることを示しています。単純にalt属性を付けるだけでは不十分で、内容・目的・文脈に即した記述が求められます。

alt属性の正しい書き方

画像の内容を簡潔かつ具体的に説明し、関連キーワードを自然に含めることが最適なalt属性の書き方です。

alt属性を書く際の基本原則は「その画像を見たことのない人に、画像の内容を言葉で伝える」ことです。以下の4点を意識してください。

① 具体的に書く

「犬の写真」ではなく「公園で遊ぶ柴犬の子犬」のように、色・種類・状況・動作を含めます。抽象的な記述では画像検索での露出機会を失います。

② キーワードは自然に含める

SEOを意識して関連キーワードを含めることは有効ですが、キーワードの羅列はGoogleのガイドライン違反になる可能性があります。自然な文章の中にキーワードが一語含まれる程度が適切です。

③ 100文字以内を目安にする

長すぎるalt属性はスクリーンリーダーでの体験を損ないます。125文字を超える場合は文章を見直してください。

④ 「画像の」「写真の」から始めない

スクリーンリーダーはalt属性を読む際に「画像、〇〇」と自動的に案内します。alt属性側で「画像の」と繰り返す必要はありません。

画像タイプ別のalt属性設定ガイド

画像の種類（コンテンツ画像・装飾画像・リンク画像・グラフ・図表）によって、alt属性の書き方は異なります。画像の「目的」を把握せずに一律に対応すると、正しいalt属性でも間違いになる場合があります。

特に注意が必要なのはリンク画像です。W3C WAI画像チュートリアルによれば、<a>タグ内の<img>要素のalt属性は、画像の内容ではなくリンク先の目的を説明するテキストを記述することが推奨されています。

<!-- NG：画像の内容を記述してしまっている -->
<a href="/contact"><img src="btn.png" alt="緑色のボタン"></a>

<!-- OK：リンクの目的を記述 -->
<a href="/contact"><img src="btn.png" alt="無料相談を申し込む"></a>

グラフや図表の場合は、すべての情報をalt属性に詰め込むことは難しいため、<figcaption>と組み合わせて使用することが効果的です。グラフが示す主要な結論や数値をalt属性に含め、詳細な説明は本文中で行うのがベストプラクティスです。

よくあるミスとその対策

キーワードの詰め込み・装飾画像への不要な説明・title属性との混同が、SEGO診断で最も多く見られる3つのミスです。

それぞれのミスについて、具体的な対策を解説します。

ミス1：キーワードの詰め込み

「美容院 東京 安い おすすめ ヘアカット ブリーチ 口コミ」のように検索キーワードをalt属性に羅列するパターンです。Googleはこれをキーワードスタッフィング（不正なSEO手法）として検出する場合があります。

対策：1つの画像に含めるキーワードは1〜2個を上限とし、自然な文章の中に埋め込みます。

ミス2：装飾画像への不要な説明

ヘッダー背景画像、区切り線、CSSで表現できない装飾要素に「ウェーブラインの区切り」のような説明を付けているパターンです。スクリーンリーダーが余分な情報を読み上げ、視覚障害者のUXを著しく損ないます。

対策：装飾目的の画像には必ずalt=""を設定します。

ミス3：title属性との混同

alt属性に「クリックで拡大します」「マウスオーバーで詳細を表示」などと記述しているパターンです。これはtitle属性の役割であり、alt属性の目的とは異なります。

対策：alt属性には常に「画像の視覚的な内容または機能」を記述します。

また、CMS（WordPress等）を使用している場合、画像アップロード時にalt属性を入力せずに放置するケースも多く見られます。コアウェブバイタルの改善と並行して、画像の最適化フローを運用ルールとして定めることが重要です。

alt属性の確認・改善方法

Chromeデベロッパーツールや専用SEOツールを使えば、サイト全体のalt属性の状況を効率的に確認できます。

① Chromeデベロッパーツールで個別確認

対象ページでF12を押し、「Elements」タブから<img>タグを検索します。個別ページの確認には有効ですが、サイト全体の把握には向きません。

② Lighthouseでのアクセシビリティ監査

ChromeデベロッパーツールのLighthouseタブから「Accessibility」を実行すると、alt属性の不備が「Image elements do not have alt attributes」として検出されます。

③ スクリーンリーダーでの体験確認

実際にNVDA（Windows）やVoiceOver（Mac）などのスクリーンリーダーでサイトを閲覧することで、alt属性の質を体感的に確認できます。

④ SEGOによるサイト全体の一括診断

SEGOでは、alt属性を含む50項目以上のSEO・アクセシビリティ項目をURLを入力するだけで一括診断できます。JSON-LDの実装確認と同時に行うと、テクニカルSEOの総点検として効率的です。

特に画像が多いECサイトや不動産サイトでは、alt属性の不備が数百〜数千件に及ぶことがあります。スプレッドシートやクロールツールを使った網羅的な洗い出しを推奨します。

alt属性の最適化ポイントまとめ

alt属性はアクセシビリティとSEOの双方に影響する重要な実装項目です。本記事のポイントを整理します。

• alt属性は画像の代替テキスト。title属性とは別物
• SEGO診断715サイト中54.5%（390サイト）でalt属性に実装課題あり
• コンテンツ画像：内容を具体的かつ自然に記述（キーワード1〜2個）
• 装飾画像：alt=""を明示的に設定（省略はNG）
• リンク画像：リンク先の目的を記述
• グラフ・図表：要点をalt、詳細はfigcaptionまたは本文で
• 確認ツール：Lighthouse・Chrome DevTools・SEGOによる一括診断

alt属性の改善は即効性のある施策の一つです。SEGO診断ツールを活用して自社サイトの現状を確認し、優先度の高い画像から順に対応することをお勧めします。

SEGOでは、URLを入力するだけで、alt属性を含む50項目以上のSEO・AI検索対応状況を無料で診断できます。診断結果には、優先度の高い改善項目と具体的なアクションプランも提示されます。

SEGOで無料診断を試す

alt属性に関するよくある質問

alt属性がないと検索順位は下がりますか？

alt属性の有無が直接的に検索順位を下げるわけではありませんが、画像検索での表示機会を失います。また、アクセシビリティの観点でGoogleがページ品質を評価する間接的な影響も考えられます。実装コストが低い割に効果が期待できるため、早期対応を推奨します。

すべての画像にalt属性を設定する必要がありますか？

すべての<img>タグにalt属性の記述が必要です。ただし、装飾目的の画像にはalt=""と空で設定します。alt属性自体を省略することは、アクセシビリティ上の不備とみなされます。

WordPressでalt属性を一括で設定・修正する方法はありますか？

WordPressのメディアライブラリから各画像の「代替テキスト」フィールドを編集できます。大量の画像がある場合は、WP All Import等のプラグインやカスタムSQLクエリを使った一括更新が効率的です。なお、WordPressでは代替テキスト（alt）とタイトルが別フィールドになっているため、それぞれ適切に入力してください。

CSSで表示している背景画像にalt属性は必要ですか？

CSSのbackground-imageで表示している画像は<img>タグではないため、alt属性は設定できません。また、CSSの背景画像はスクリーンリーダーやGoogleの画像クローラーには読み取られないため、コンテンツとして重要な画像はCSSではなく<img>タグで実装することを推奨します。

Next.js（Imageコンポーネント）でのalt属性の設定方法は？

Next.jsの<Image>コンポーネントではaltプロパティが必須仕様になっており、省略するとビルドエラーになります。設定方法は通常の<img>タグと同様で、alt="画像の内容"として記述します。