Altテキスト：SEOとアクセシビリティガイド

概要

Altテキスト（<img>要素のalt属性）は、主にアクセシビリティと画像が読み込まれないときのフォールバックとして使われる、画像の短いテキスト説明です。スクリーンリーダーは視覚障害のあるユーザーにaltテキストを読み上げ、検索エンジンは画像の主題に関する複数あるテキストシグナルのひとつとしてaltテキストを利用します。Altテキストは画像に対して解析可能なテキストを提供することでインデックス化を助けますが、ランキングや可視性に影響する要素のうちの一つに過ぎません。

Altテキストは、その画像が意図する受け手に対して伝える情報を説明するように書いてください。純粋に装飾目的の画像は空のalt属性（<img src="..." alt="">）を使い、スクリーンリーダーがスキップするようにします。図表やインフォグラフィックなど複雑なビジュアルには、近接するテキスト要約を用意するか、ARIA/HTMLの手法で長い説明を提供してください。

手順

1) 画像の役割を特定する: その画像が情報を伝えるものか、機能的（例：ボタン）か、装飾かを判断します。情報的・機能的な画像には記述的なaltテキストが必要で、装飾画像は空のalt属性を使うべきです。

2) 必要な情報を簡潔に記述する: ユーザーが画像から知るべきことを書いてください。altテキストは簡潔に保ち、主要なアイデアを一文か一語のフレーズで伝えることを目標にします。標準的な情報的altの例: <img src="/photos/harbor.jpg" alt="Red fishing boat moored in a rocky harbor at sunrise">.

3) キーワードの詰め込みや冗長な言い回しを避ける。"image of"や"picture of"のような語句を前置しないでください—スクリーンリーダーは既に画像であることを伝えます。テキストは検索エンジンのクローラー.

4) 機能的な画像やコントロールの扱い: 画像がリンクやボタンの場合は、その動作を説明してください。例: <img src="/icons/download.svg" alt="Download product data sheet">。コントロールに表示テキストがある場合は、altはその目的に合わせるか、表示テキストですでに動作が伝わっているなら空にします。

5) 複雑な画像には詳細な説明を提供する: 図表やインフォグラフィックには、近接するキャプション、リンクされた詳細説明、aria-describedby、または可視のHTMLテキストで補完してください。印刷物相当の詳細（データ表、軸ラベルなど）はページ本文に主要情報を含めましょう。

6) 編集ルールを一貫させる: 寄稿者向けに簡潔なスタイルガイド（長さの目安、略語の扱い、言語ルールなど）を作り、テンプレートやCMSフィールドで適用してスケールで確実にaltテキストを取得できるようにします。

HTML例

説明的な画像: <img src="https://example.com/park.jpg" alt="Child flying a red kite in a city park">. 装飾画像: <img src="/decorative-divider.png" alt="">. リンクに使われる機能的画像: <a href="/download"><img src="/icons/pdf.svg" alt="Download report PDF"></a>.

Altテキスト検証：技術チェックリスト

【alt属性の存在】 — 確認場所: view-source、Chrome DevTools Elements、またはcurl（-Iを使わずに完全なHTMLを取得） — 合格条件: 意味のあるすべての<img>がalt属性を持ち、装飾画像はalt=""を使っていること。

【JSで挿入された画像のレンダリング後DOM】 — 確認場所: Chrome DevTools Elements（最終的なDOMを検査） — 合格条件: ユーザーに見える画像がレンダリング済みDOMにも適切なaltテキストを含んでいること。

【アクセシビリティ監査】 — 確認場所: Chrome DevToolsのLighthouseや自動アクセシビリティツール — 合格条件: 監査で情報的な画像のalt欠落が報告されず、意図した装飾画像のみがフラグされていること。

【人間による可読性チェック】 — 確認場所: コンテンツ編集者のサンプルレビューやスクリーンリーダー（NVDA、VoiceOver） — 合格条件: altテキストが支援技術利用者に対して視覚情報と同等に有用な情報を伝えていること。

【ページのインデックス可能性】 — 確認場所: 自社ページでは Google Search Console のURL Inspection; 他社ページは site: オペレーターを指標として使う — 合格条件はページがクロール可能（ブロックされていない）で、robots.txt や noindex によって遮断されておらず、URL InspectionでGoogleがそのページを認識していること。注意: site:は目安に過ぎず、所有ページについてはURL Inspectionが権威的な情報です。

実用的なツールのヒント

特定のUser-AgentでページHTMLを取得するにはcurlを使います: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html。本文が必要な場合は-Iを使わないでください。保存したファイルをテキストエディタで開くかDOMパーサで<img>タグとそのalt属性を探します。

Chrome DevTools → Lighthouseを実行して一般的なアクセシビリティ問題を洗い出し、スクリーンリーダー（WindowsではNVDA、macOSではVoiceOver）でユーザー体験を確認してください。

画像を参照するstructured data（例: ProductやRecipe schema）を使っている場合は、Rich Results Testや Schema Markup のバリデータでJSON-LD内で参照されている画像が存在しアクセス可能かを検証してください。

よくある問題

情報を伝える画像にaltテキストがないこと。これはアクセシビリティを損ない、視覚障害のあるユーザーに視覚情報を提供できません。

キーワードの詰め込み: alt属性にターゲットキーワードやブランド名を不自然に繰り返すこと。ユーザー体験が悪くなり、検索エンジンに無視される可能性があります。

ファイル名や汎用語（例: "image1.jpg", "picture"）をaltとして使うこと。支援技術やインデックス化にとって意味がありません。

重要な情報をtitle属性に頼ること。多くのスクリーンリーダーはtitleを一貫して提示しないため、altで伝えるべき情報をtitleに依存してはいけません。

altテキストだけで画像のランキングが決まると考えること。altテキストは検索エンジンが画像を理解するのに役立ちますが、インデックス化や可視性はページ文脈、構造化データ、クロール可能性、その他のシグナルに依存します。

画像がクライアント側で挿入される場合は JavaScript、著者がレンダリング済みDOMにalt属性を含め忘れることがあります。常に最終的なDOMを検査し、サーバー側HTMLだけを見ないでください。

テクニカルSEOガイドを読む

よくある質問

Q: Altテキストの長さはどれくらいが適切ですか？ A: 画像の目的を伝える簡潔な説明を目指してください。通常は短い一文かフレーズで十分です。複雑なビジュアルにはページの別箇所で長めのアクセシブルな説明を提供してください。

Q: AltテキストはSEOのランキングに影響しますか？ A: Altテキストはインデックス化や画像検索の関連性を助けるテキストシグナルを提供しますが、それだけでランキングを決定するものではありません。ランキングはページ関連性、構造化データ、クロール可能性、コンテンツ品質など多数のシグナルに依存します。

Q: 装飾画像にaltテキストは必要ですか？ A: いいえ。装飾画像は空のalt属性（alt=""）を使い、スクリーンリーダーが無視するようにしてください。余計なノイズをアクセシビリティ体験に加えないことが重要です。

Q: 自動ツールは受け入れられるaltテキストを生成できますか？ A: CMSや画像認識の自動提案は補助になりますが、公開前に必ず機械生成されたaltテキストを正確性、明瞭性、プライバシーの観点からレビュー・編集してください。

Q: CSSの背景画像についてはどう扱うべきですか？ A: CSSの背景画像は<img>要素として露出されずalt属性を持ちません。背景画像に含まれる情報はHTMLで提示して、アクセシブルにしてください。

テクニカルSEOはオーガニック成長の一要素に過ぎません。トピックに関する権威性を築くには、質の高い backlinks とインデックスされた、アクセシブルなコンテンツが必要です—パブリッシャーのインデックス可能性と編集コンテキストを重視する評価済みのマーケットプレイスやパートナーシップを検討してください。質の高いbacklinksでオーソリティを構築する