画像にalt属性（代替テキスト）の最適化｜自分でできるSEOチェック

Webコンサルタントの松崎です。

 

これまで「自分でできる！SEOセルフチェック」シリーズでは、常時SSL対応やページ表示速度、スマートフォン対応、ページタイトルの設定などについてお伝えしてきました。

今回は、見落としがちだけれど重要な「画像のalt属性（代替テキスト）」について詳しくご紹介します。

alt属性（代替テキスト）とは何か？

 

alt属性とは、HTMLで画像を表示する際に指定する「代替テキスト」のことです。画像が表示できない環境で、その画像の代わりに表示されるテキスト情報です。HTMLでは以下のように記述されています。

 

<img src="example.jpg" alt="ここに代替テキストを入力します">

 

このalt属性は、次のような場合に役立ちます。

  • 画像が読み込めない場合や表示できない環境で、画像の内容を文字で伝える
  • 視覚障害のある方が使用するスクリーンリーダー（画面読み上げソフト）で、画像の内容を音声で伝える
  • 検索エンジンが画像の内容を理解するための手がかりとなる

Webサイトの見た目には直接影響しませんが、アクセシビリティ（誰もが使いやすいこと）とSEOの両方に重要な役割を果たしています。

なぜalt属性がSEOに重要なのか？

画像のalt属性は、一見地味な要素ですが、SEOにも大きく影響します。

詳しく見ていきましょう。

1. 検索エンジンが画像を理解するための手がかり

Googleなどの検索エンジンは、画像そのものの内容を完璧に理解することはまだ難しいです。そこで、alt属性の情報を使って画像の内容を把握します。

 

適切なalt属性を設定することで、画像の内容が検索エンジンに正確に伝わり、関連するキーワードでの検索結果に表示される可能性が高まります。特に「画像検索」ページでの露出機会が増加します。

 

たとえば、「赤いハイヒール」の商品画像に「赤いハイヒール」というalt属性を設定しておくと、その画像が「赤いハイヒール」で検索したときに画像検索結果に表示される可能性が高まります。

2. テキストだけでは伝わりにくい情報の補完

料理のレシピや商品紹介、旅行ガイドなど、画像が重要な役割を果たすコンテンツでは、画像のalt属性がページの関連性をさらに高めます。

 

テキストだけでは伝えきれない視覚的な情報を、alt属性を通して検索エンジンに伝えることで、より正確にページの内容を理解してもらえます。

 

例えば、「青森りんごの断面」という画像に「みずみずしい青森県産りんごの断面」というalt属性を設定することで、テキストに「みずみずしい」という表現がなくても、その特徴を検索エンジンに伝えることができます。

3. アクセシビリティとユーザー体験の向上

SEOは単に検索順位を上げるだけでなく、サイトの使いやすさも重要なポイントです。適切なalt属性は、視覚障害のあるユーザーにとって必要不可欠な情報となります。

 

Googleはユーザーの使いやすさも重視しており、アクセシビリティの高いサイトも評価する傾向があると思われます。すべてのユーザーに配慮したサイトは、長期的にSEO評価も高くなると考えられています。

 

特に2016年4月に施行された「障害者差別解消法」により、Webアクセシビリティへの対応がより重要視されるようになっています。2024年4月からはすべての事業者が合理的な配慮を行うことが義務化されています。企業が果たすべき社会的責任の観点からも、alt属性の適切な設定は無視できない要素です。

4. 画像ファイル名とalt属性の相乗効果

SEOに詳しい方なら、画像のファイル名も検索エンジンにとって重要な情報だとすでにご存知ですよね。「IMG_0123.jpg」のような意味のないファイル名よりも、「red-high-heels.jpg」のような内容を表すファイル名の方が良いです。

 

この画像ファイル名とalt属性が一貫していると、さらに効果的と言われています。両方からの情報が一致することで、検索エンジンに画像の内容をより確実に伝えることができると言われています。

効果的なalt属性の書き方

alt属性を設定することの重要性はわかったと思いますが、ただ設定すればいいというわけではありません。効果的なalt属性の書き方を見ていきましょう。

1. 画像の内容を具体的に説明する

良いalt属性は、画像が見えない人が「その画像が何を表しているのか」を理解できるような説明です。ただのキーワードの羅列ではなく、具体的な説明を心がけましょう。

 

悪い例「商品」「写真」「画像1」

良い例「赤いレザー素材のレディースハイヒール」

 

特に商品画像では、色や素材、特徴など、具体的な情報を盛り込むことで、検索での露出機会が増えます。

2. 適切な長さを意識する

alt属性はあまりに長すぎると冗長になり、短すぎると情報が不足します。一般的には、全角で50〜80文字までを目安にするとよいでしょう。

 

ただし、画像の役割によって最適な長さは変わります。装飾的な画像なら短くても問題ありませんが、情報伝達が目的の画像（図表やインフォグラフィックなど）は、より詳細な説明が必要かもしれません。

 

日本語の場合、あまり厳密な文字数制限にとらわれず、「必要十分な説明ができているか」を重視すると良いです。

3. キーワードを自然に含める

SEOの観点からは、ターゲットとするキーワードをalt属性に自然に含めることも効果的です。ただし、不自然な形でキーワードを詰め込むのは絶対に避けましょう。

 

悪い例「赤いハイヒール 赤いパンプス レディース靴 セール 通販」

良い例「50%オフセール中の赤いレザーハイヒール」

 

人が自然な日本語として読みやすく感じて、かつSEOにも効果的なalt属性を設定しましょう。

4. 画像の役割に応じた設定

Webページ内の画像には様々な役割があります。その役割に応じて、alt属性の書き方を変えるのが効果的です。

 

  • 商品画像 → 商品名、色、素材、特徴などを含める
  • 説明図・グラフ → 図表が示すデータや傾向を説明する
  • 背景・装飾画像 → 空のalt属性（alt=""）を設定
  • アイコン・ボタン画像 → 機能や行き先を説明する

 

特に背景や装飾のみを目的とした画像には、空のalt属性を設定することが推奨されています。これにより、スクリーンリーダーがその画像を無視するようになり、ユーザー体験が向上します。

5. 画像がリンクの場合は特に注意

画像がリンクになっている場合は、特に丁寧なalt属性の設定が重要です。「リンク先がどこか」「クリックすると何が起こるか」がわかるようにしましょう。

 

例えば、ロゴ画像がトップページへのリンクになっている場合は「〇〇会社のロゴ - トップページへ」のようなalt属性が適切です。

alt属性のセルフチェック方法

自分のサイトの画像alt属性が適切に設定されているかどうかを確認する方法をいくつか紹介します。

1. 手動で確認する方法

一つひとつの画像を確認する方法です。少ないページ数のサイトなら、この方法が最も確実です。

  1. Webサイトを開く
  2. 画像の上で右クリックし、「画像を検査」または「要素を調査」を選択する
  3. HTMLコードが表示されるので、img要素内のalt属性を確認する

例えば、以下のようなHTMLが表示されます。

 

<img src="example.jpg" alt="赤いレザーハイヒール" width="300" height="200">

 

alt属性が設定されていない場合は、以下のいずれかの状態になっています。

  • alt属性自体がない（ <img src="example.jpg"> ）
  • alt属性が空（ <img src="example.jpg" alt=""> ）
  • alt属性が空白（ <img src="example.jpg" alt=" "> ）

装飾的な画像を除き、内容を伝える必要のある画像には適切なalt属性が設定されていなければなりません。

2. ブラウザの拡張機能を使う方法

Chromeブラウザなら「Web Developer」や「Web Accessibility Evaluation Tool (WAVE)」などの拡張機能を使うと、ページ内のすべての画像のalt属性を一覧で確認できます。

 

「Web Developer」拡張機能の場合、以下の手順で確認できます。

  1. 拡張機能をインストールする
  2. Webサイトを開く
  3. Web Developerツールバーから「Images」→「Display Alt Attributes」を選択する

これにより、サイト上のすべての画像がalt属性のテキストに置き換わって表示されます。alt属性がない場合は「No Alt」と表示されるため、一目で問題箇所がわかります。

3. 画像検索での表示を確認する

実際に効果を確認するには、Googleの画像検索で自分のサイトの画像が表示されるかチェックする方法もあります。

 

Googleで「site:あなたのドメイン」と入力して「画像」タブを選択すると、Googleがインデックスしているサイト内の画像が表示されます。これらの画像が適切な検索クエリで表示されるかを確認しましょう。

よくある問題とその改善方法

alt属性に関する一般的な問題とその改善方法を見ていきましょう。

1. alt属性が設定されていない

最も多い問題は、単純にalt属性が設定されていないケースです。特にWordPressなどのCMSを使っている場合、メディアライブラリにアップロードする際にalt属性を入力することを忘れがちです。また、多くの制作会社はaltタグをきちんと設定してくれません。きちんと指示を出すか、公開前のチェック時に確認してaltタグの内容をしてするようにしましょう。

 

【改善方法】

  • 新しく画像をアップロードする際は、必ずalt属性を入力する習慣をつける
  • 既存の画像は、メディアライブラリから一括で確認・編集する
  • 画像アップロード時にalt属性の入力を促すプラグインを導入する

2. 意味のないalt属性が設定されている

「画像1」「photo」「DSC_0001」など、画像の内容を全く説明していないalt属性も問題です。

 

【改善方法】

  • 画像が何を表しているのか、具体的に説明するalt属性に変更する
  • ファイル名をそのままalt属性にしている場合は、意味のある説明に書き換える
  • 商品画像なら商品名や特徴、人物写真なら人物名や状況説明を含める

3. キーワードの詰め込みすぎ

過剰なSEOを意識するあまり、「東京 美容院 カット パーマ 縮毛矯正 安い」のように、関連キーワードを詰め込みすぎているalt属性も見受けられます。これもキーワード詰め込みスパムと評価され、逆に検索順位を落としてしまいます。

 

【改善方法】

  • 自然な日本語として読みやすいalt属性に変更する
  • 主要なキーワード1〜2つに絞り、それを自然な形で含める
  • 画像が実際に何を表しているのかを優先して説明する

4. 装飾画像に不要なalt属性が設定されている

装飾目的の画像（区切り線、背景パターンなど）には、空のalt属性（alt=""）を設定するのが適切です。内容のないalt属性を設定していると、スクリーンリーダーが不要な情報を読み上げてしまいます。

 

【改善方法】

  • 純粋に装飾目的の画像には空のalt属性（alt=""）を設定する
  • CSSで背景画像として表示できるものは、img要素ではなくCSSの背景画像として実装する
  • 意味を持つアイコンと装飾的なアイコンを区別して、適切にalt属性を設定する

5. 同じalt属性が多用されている

「商品画像」「サービス内容」など、同じalt属性が多数の画像で使われているケースも問題です。

 

【改善方法】

  • 各画像の具体的な内容に合わせて、ユニークなalt属性を設定する
  • 同じ種類の画像でも、細かな違いがわかるよう具体的に説明する
  • 商品一覧などでは、個々の商品名や特徴が分かるalt属性を設定する

alt属性最適化の実践例

実際のalt属性最適化の例を見ることで、効果的なalt属性の特徴をより具体的に理解できます。

例1：ECサイトの商品画像

改善前「レディースシューズ」

改善後「フォーマルシーンにも使える3cmヒール黒革パンプス」

 

【改善ポイント】

  • 商品カテゴリだけでなく、具体的な商品の特徴を説明した
  • 「3cmヒール」「黒革」など検索されやすい特徴を含めた
  • 「フォーマルシーンにも使える」という用途も示した

例2：会社概要ページの社屋写真

改善前「弊社社屋」

改善後「2023年に完成した株式会社〇〇の木造3階建て本社ビル」

 

【改善ポイント】

  • 「弊社」という曖昧な表現ではなく、具体的な会社名を入れた
  • 「木造3階建て」という建物の特徴を含めた
  • 「2023年に完成」という新しさを示す情報を加えた

例3：料理レシピの完成写真

改善前「完成イメージ」

改善後「トマトとバジルをたっぷり使った自家製ミートソースパスタの完成イメージ」

 

【改善ポイント】

  • 料理名を明記した
  • 特徴的な食材（トマト、バジル）を含めた
  • 「自家製」という差別化ポイントを入れた

例4：装飾的な区切り線

改善前「区切り線」

改善後「」（空のalt属性）

 

【改善ポイント】

  • 意味を持たない装飾画像には空のalt属性を設定した
  • スクリーンリーダーが読み上げないようにした

## 画像のalt属性（代替テキスト）最適化のまとめ

画像のalt属性は、見落としがちですが、アクセシビリティとSEOの両方において重要なポイントです。適切に設定することで、様々なメリットが期待できます。

  • 視覚障害のあるユーザーを含め、すべての人が情報にアクセスできる
  • 検索エンジンが画像の内容を理解しやすくなる
  • 画像検索での表示機会が増える
  • ページ全体の評価が向上する

基本的なルールとしては、「その画像が見えない人に、何が写っているのかを説明する」という意識で設定することが大切です。SEOのためだけに不自然なキーワードを詰め込むのではなく、ユーザーにとって有益な情報を提供することを優先しましょう。

 

新しく画像をアップロードする際は、必ずalt属性を設定する習慣をつけることで、サイト全体のアクセシビリティとSEO評価を徐々に高めていくことができます。既存の画像についても、重要なページやアクセス数の多いページから順に見直していくと良いでしょう。

 

より詳しいWebサイトの診断方法については、「Webサイトが集客できない理由 - 10の自己診断法」をご覧ください。また、画像最適化を含めたSEO対策の専門的なサポートが必要な場合は、当社の「Webコンサルティングサービス」もぜひご検討ください。

 

ウェブアクセシビリティを改善したい、ページの最適化に取り組みたい方は、まず課題や問題点をお聞かせください。

 

初回相談は無料です。

いつでもお気軽にお問い合わせください。