Alt属性とは？SEOとアクセシビリティを向上させる画像の代替テキスト

Alt属性とは

Alt属性は、HTMLの<img>タグに含まれる属性の一つで、画像が表示できない場合に代わりに表示されるテキストです。正式には「alternative text（代替テキスト）」と呼ばれ、その頭文字から「alt」と名付けられています。

<img src="cat.jpg" alt="窓辺で日向ぼっこする茶トラ猫">

Alt属性が表示される状況

画像の読み込みに失敗した場合 - ネットワークエラーや画像ファイルの削除時
スクリーンリーダー使用時 - 視覚障害者向けの音声読み上げソフトで画像内容を伝える
画像を非表示にしている場合 - ブラウザの設定で画像表示をオフにしている時
検索エンジンのクロール時 - Googleなどの検索エンジンが画像内容を理解する手がかりとなる

💡 重要ポイント
Alt属性は単なる画像の説明ではなく、「画像が見えない人にどう伝えるか」という視点で書くことが重要です。画像の視覚的な情報を言葉で的確に表現しましょう。

Alt属性の重要性

1. アクセシビリティの向上

視覚障害のあるユーザーがスクリーンリーダーでWebサイトを閲覧する際、Alt属性がないと画像の内容を理解できません。適切なAlt属性を設定することで、すべてのユーザーに等しく情報を届けることができます。

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

Alt属性なし → 「画像」とだけ読み上げられる
Alt属性あり → 「WordPressの管理画面ダッシュボード」と具体的に読み上げられる

2. SEO効果の向上

検索エンジンは画像そのものを「見る」ことができないため、Alt属性のテキストを読み取って画像の内容を理解します。適切なAlt属性を設定することで以下の効果があります。

Google画像検索での上位表示 - 画像検索結果に表示されやすくなる
ページ全体のSEO向上 - コンテンツの関連性が高まり、検索順位が上がる可能性
音声検索への対応 - 音声検索クエリとマッチしやすくなる

3. ユーザビリティの向上

画像の読み込みが遅い環境や、モバイル回線で画像を非表示にしているユーザーに対しても、Alt属性があれば画像の内容を把握できます。

✅ W3Cのガイドライン
Web標準化団体W3Cは、すべての意味のある画像にAlt属性を設定することを推奨しています。これはWebアクセシビリティの基本原則の一つです。

正しいAlt属性の書き方

良いAlt属性の例

画像の内容	良い例	理由
商品写真	「白い陶器のコーヒーカップ 300ml」	商品の特徴を具体的に記述
グラフ・図表	「2024年の月別売上推移グラフ。1月50万円から12月120万円まで右肩上がり」	データの内容と傾向を説明
操作手順のスクリーンショット	「WordPress管理画面の設定メニューから一般設定をクリック」	何をどうするかを明確に記述
人物写真	「笑顔でプレゼンテーションする山田太郎CEO」	誰が何をしているかを記述

悪いAlt属性の例

悪い例	問題点	改善案
「画像」	何の画像か全く分からない	具体的な内容を記述する
「img001.jpg」	ファイル名をそのまま使用	画像の内容を説明する
「ここをクリック」	画像の内容ではなく行動指示	リンク先の内容を記述する
「WordPress SEO対策初心者向けおすすめプラグイン無料」	キーワードの詰め込み（スパム）	自然な文章で簡潔に記述

⚠️ キーワードスタッフィングに注意
SEO効果を狙ってキーワードを過度に詰め込むと、Googleからペナルティを受ける可能性があります。自然で分かりやすい説明を心がけましょう。

装飾画像の場合

背景パターンやデザイン要素など、情報を伝えない純粋な装飾画像の場合は、Alt属性を空にします。

<img src="decoration.png" alt="">

Alt属性を空（alt=""）にすることで、スクリーンリーダーはその画像をスキップします。Alt属性自体を省略すると、ファイル名が読み上げられてしまうため、必ず空の値を設定してください。

WordPressでのAlt属性設定方法

方法1: メディアライブラリから設定

WordPressの管理画面で「メディア」→「ライブラリ」を開く
設定したい画像をクリック
右側の「添付ファイルの詳細」で「代替テキスト」欄に入力
「更新」ボタンをクリックして保存

💡 一括設定のヒント
新しくアップロードした画像は、アップロード直後に代替テキストを設定する習慣をつけましょう。後から設定するより効率的です。

方法2: 投稿編集画面から設定

ブロックエディタで画像ブロックを選択
右サイドバーの「画像設定」を開く
「Altテキスト（代替テキスト）」欄に入力
記事を更新または公開

方法3: HTMLコードで直接設定

クラシックエディタやカスタムHTMLブロックを使用する場合：

<img src="example.jpg" alt="ここに代替テキストを記述" width="800" height="600">

既存画像のAlt属性を一括確認する方法

「SEO Friendly Images」などのプラグインを使用すると、Alt属性が未設定の画像を一覧表示し、一括で設定することができます。

おすすめプラグイン：

SEO Friendly Images - Alt属性の自動生成・管理
Auto Image Attributes From Filename - ファイル名から自動生成
Yoast SEO - 画像のSEO分析機能を含む総合SEOプラグイン

Alt属性を書く際のベストプラクティス

1. 簡潔かつ具体的に

125文字以内を目安にする（スクリーンリーダーの読み上げ制限のため）
最も重要な情報を最初に書く
余計な情報は省く（「〜の画像」「〜の写真」などは不要）

2. 文脈を考慮する

同じ画像でも、使用する文脈によってAlt属性は変わります。

例：犬の写真

ペットショップのサイト → 「生後3ヶ月のゴールデンレトリバーの子犬」
動物病院のブログ → 「予防接種を受ける子犬」
犬種図鑑 → 「ゴールデンレトリバーの標準的な外見」

3. リンク画像の場合はリンク先を説明

画像がリンクになっている場合、Alt属性にはリンク先の内容を記述します。

<a href="/contact/"><img src="button.png" alt="お問い合わせページへ"></a>

4. テキストを含む画像の場合

インフォグラフィックやバナーなど、画像内にテキストがある場合は、そのテキストをAlt属性に含めます。

⚠️ 重要な情報を画像だけに頼らない
重要なテキストは画像ではなく、HTMLテキストとして記述することをおすすめします。画像が表示されない場合でも情報が伝わり、SEO効果も高まります。

5. 複雑な図表の場合

グラフやチャートなど、詳細な情報を含む画像の場合は、Alt属性だけでなく、本文中で詳しく説明するか、longdesc属性や隣接するテキストで補足します。

よくある質問（FAQ）

Q1. Alt属性とTitle属性の違いは？

Alt属性は画像が表示されない場合の代替テキスト、Title属性は画像にマウスを乗せた時に表示されるツールチップです。SEOやアクセシビリティの観点では、Alt属性の方が重要で必須です。Title属性は補足情報として使用しますが、省略しても問題ありません。

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

はい、すべての画像にAlt属性を設定すべきです。ただし、装飾目的の画像（背景パターンなど）は、Alt属性を空（alt=""）にします。Alt属性自体を省略することは避けてください。

Q3. 日本語と英語、どちらで書くべきですか？

サイトの主要言語で記述します。日本語サイトなら日本語、英語サイトなら英語です。多言語サイトの場合は、各言語版で適切にAlt属性を翻訳してください。

Q4. Alt属性の文字数制限はありますか？

技術的な文字数制限はありませんが、スクリーンリーダーの多くは125文字程度で読み上げを区切ります。簡潔に書くことを心がけ、125文字以内を目安にしましょう。どうしても長くなる場合は、本文中で詳細を説明する方法もあります。

Q5. Alt属性を後から一括で設定できますか？

はい、「SEO Friendly Images」などのプラグインを使用すれば可能です。ただし、自動生成されたAlt属性は適切でない場合があるため、重要な画像は手動で確認・修正することをおすすめします。

Q6. 同じ画像を複数箇所で使う場合、Alt属性は同じでいいですか？

いいえ、使用する文脈に応じて変えるべきです。同じ画像でも、記事の内容や周辺のテキストによって最適な説明は変わります。それぞれのページで、読者にとって最も有益な説明を考えましょう。

まとめ

Alt属性は、WebサイトのアクセシビリティとSEOの両面で極めて重要な要素です。単なる画像の説明ではなく、「画像が見えない人にどう伝えるか」という視点で丁寧に設定することで、より多くの人に情報を届けることができます。

✅ Alt属性設定のチェックリスト

すべての意味のある画像にAlt属性を設定している
装飾画像のAlt属性は空（alt=""）にしている
125文字以内で簡潔に記述している
キーワードを不自然に詰め込んでいない
文脈に応じた適切な説明になっている
リンク画像はリンク先の内容を説明している

WordPressでは、メディアライブラリや投稿編集画面から簡単にAlt属性を設定できます。新しい画像をアップロードする際は、必ず代替テキストを設定する習慣をつけましょう。

Alt属性（オルト属性）