alt属性(代替テキスト)とは?書き方とSEO効果・設定方法を解説

alt属性(代替テキスト)とは?書き方とSEO効果・設定方法を解説

alt属性(オルト属性)とは、画像の内容を文字で説明する代替テキストのことです。画像が表示されないときに代わりに示されるほか、音声読み上げやSEOにも関わります。適切に設定することで、すべての利用者に画像の意味を伝えられます。

本記事は、画像を多く扱うWeb担当者・オウンドメディア編集者に向けて、alt属性(代替テキスト)の意味と役割、正しい書き方、設定・確認方法を整理しています。SEOでの位置づけや、装飾画像の扱いといった実務のポイントもあわせて示します。

この記事でわかること
  • alt属性(代替テキスト)の意味と役割
  • SEOにおけるalt属性の位置づけ
  • クリックされやすいalt属性の書き方
  • HTMLやWordPressでの設定・確認方法
  • 装飾画像など、判断に迷うケースの扱い

読み終えると、どの画像にどんなalt属性を書けばよいかを判断でき、迷わず設定できるようになります。

目次

alt属性(代替テキスト)とは?その役割

写真立ての中に短い説明のラベルが添えられた様子

alt属性とは、HTMLのimgタグに記述する、画像の内容を説明するテキストです。代替テキストとも呼ばれ、画像を見られない状況でも、その意味を伝える役割を持ちます。まずは、alt属性の意味と、果たす役割を整理します。

  • alt属性の意味
  • alt属性が果たす3つの役割
  • SEOにおける位置づけ

本セクションでは、alt属性の基本と、SEOでの扱いを解説します。

alt属性の意味

alt属性は、imgタグの中に「alt=”画像の説明”」の形で記述します。altは「alternative(代替)」の略で、画像の代わりになるテキストという意味です。

検索エンジンは、画像そのものの内容を人と同じようには理解できません。alt属性は、その画像が何を表しているかを、検索エンジンや支援技術に文字で伝える手がかりになります。

alt属性が果たす3つの役割

alt属性には、大きく3つの役割があります。1つ目は、通信環境やエラーで画像が表示されないときに、代わりにテキストを示すことです。2つ目は、視覚に障がいのある利用者が使う音声読み上げソフトが、画像の内容を読み上げられるようにすることです。

3つ目が、検索エンジンに画像の内容を伝える役割です。特に2つ目のアクセシビリティ(誰もが情報にアクセスできること)は、alt属性の本来の目的であり、SEOだけを目的にした設定にならないよう意識したい点です。

SEOにおける位置づけ

alt属性は、検索エンジンが画像を理解する助けになり、画像検索での表示にも関わります。画像の内容が適切に伝わることで、関連する検索で画像が見つけられやすくなると考えられます。

ただし、alt属性にキーワードを詰め込めば順位が上がる、というものではありません。あくまで画像を正しく説明することが基本で、その結果として検索での理解が進むと捉えるのが妥当です。SEOの全体像はSEO対策とは?わかりやすく基本から実践方法まで徹底解説【2026年最新】で整理しています。

alt属性の書き方

万年筆で短いメモを書き添えている手元

alt属性は、画像の内容を、簡潔かつ具体的に説明するのが基本です。見た人が思い浮かべる情景を、そのまま文字にするイメージで書きます。4つのポイントを押さえると迷いにくくなります。

  • 画像の内容を具体的に説明する
  • キーワードを不自然に詰め込まない
  • 装飾目的の画像は空にする
  • 簡潔にまとめる

本セクションでは、4つのポイントを順に解説します。

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

alt属性には、その画像に何が写っているかを具体的に書きます。たとえば「犬」だけでなく「芝生の上で走る茶色の犬」のように、内容が伝わる説明にすると、画像の意味がより正確に伝わります。

ただし、細かすぎる描写は不要です。そのページの文脈で、画像が伝えたいことが分かる程度に説明します。文章の流れの中で、その画像が果たす意味を意識すると、適切な粒度になります。

キーワードを不自然に詰め込まない

SEOを意識するあまり、alt属性に対策キーワードを羅列するのは逆効果です。画像の内容と関係のない語句を詰め込むと、読み上げでも意味が通らず、検索エンジンからも不自然と受け取られる可能性があります。

関連するキーワードは、画像の内容を説明する自然な文の中に含まれていれば十分です。キーワードのために書くのではなく、画像を説明した結果として関連語が入る、という順番が適切です。

装飾目的の画像は空にする

意味を持たない装飾目的の画像は、alt属性を空(alt=””)にするのが適切です。区切り線や背景の飾りなど、内容の理解に関係しない画像にまで説明を付けると、読み上げの妨げになります。

alt属性を空にすることは、設定漏れとは異なります。「この画像には説明が不要」と明示する意味があり、支援技術はその画像を読み飛ばせます。装飾か情報かを見極めて使い分けます。

簡潔にまとめる

alt属性は、長すぎず簡潔にまとめます。読み上げソフトはalt属性をそのまま読み上げるため、冗長だと利用者の負担になります。要点を押さえた短い説明が理想です。

画像に含まれる文字情報が重要な場合は、その文字をalt属性に記述します。図やグラフのように情報量が多い画像は、本文でも内容を補足すると、より確実に伝わります。

alt属性の設定・確認方法

ノートパソコンと小さな工具が置かれた作業机

alt属性は、HTMLに直接記述するか、WordPressの編集画面から設定できます。設定後は、意図したとおりに入っているかを確認します。

  • HTMLのimgタグに記述する
  • WordPressの編集画面で設定する
  • 設定状況を確認する

本セクションでは、設定と確認の方法を解説します。

HTMLのimgタグに記述する

HTMLで直接記述する場合は、imgタグにalt属性を追加します。次のように、alt=”画像の説明”の形で記載します。

<img src="dog.jpg" alt="芝生の上で走る茶色の犬">

装飾目的の画像は、alt=””と空にします。alt属性そのものを省略すると、支援技術がファイル名を読み上げてしまう場合があるため、空であっても記述しておくのが基本です。

WordPressの編集画面で設定する

WordPressの場合、画像を選択したときに表示される「代替テキスト」の欄に説明を入力すると、alt属性として出力されます。コードを書かずに、画像ごとに設定できます。

メディアライブラリで画像に代替テキストを設定しておくと、その画像を使う際に引き継がれます。よく使う画像は、登録時に設定しておくと効率的です。

設定状況を確認する

alt属性が入っているかは、ページのHTMLソースを表示して確認できます。ブラウザの検証機能で画像の要素を見ると、alt属性の中身をチェックできます。

ページ数が多い場合は、サイト全体のalt属性の不足を検出するツールもあります。まずは重要なページから、意味のある画像に適切な説明が入っているかを点検するとよいでしょう。

alt属性の運用で意識したいこと

整理整頓された机の上でノートを見返す落ち着いた手元

私たちが記事制作の現場で意識しているのは、alt属性を「SEOのための作業」ではなく「画像を見られない人にも内容を届ける説明」として書くことです。この視点に立つと、書くべき内容は自然と定まります。読み上げて意味が通るかを基準にすると、判断に迷いにくくなります。

よくある相談として、すべての画像に対策キーワードを入れたほうがよいか、というものがあります。実際には、キーワードを詰め込んだalt属性は読み上げでも検索でもプラスになりにくく、画像を正しく説明したほうが結果的に伝わります。目的を取り違えないことが、遠回りに見えて確実です。

また、AI検索の観点でも、画像に適切な説明が付いていることは、コンテンツ全体の理解を助けると考えられます。テキストで意味が補われたページは、生成AIからも内容を把握されやすくなります。画像を含めた記事全体の見直し方は【SEO対策】検索順位を上げる正しいリライトのやり方!記事の選び方から具体的な手順までもあわせてご確認ください。

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

alt属性に関して、よく寄せられる質問をまとめました。

alt属性はすべての画像に設定すべきですか?

意味を持つ画像には設定し、装飾目的の画像はalt=””と空にします。写真や図解など、内容の理解に関わる画像には、適切な説明を入れます。一方、区切り線や背景の飾りなど、情報を持たない画像に説明を付けると、読み上げの妨げになります。「設定するか空にするか」を画像ごとに判断し、alt属性そのものを省略しないことがポイントです。

alt属性とファイル名はどちらが重要ですか?

どちらも画像の内容を伝える手がかりですが、役割が異なります。alt属性は、利用者や検索エンジンに画像の意味を説明するもので、アクセシビリティに直接関わります。ファイル名も内容を表す名前にしておくと補助になりますが、まず優先すべきはalt属性の適切な設定です。両方を内容に沿ったものにしておくと、画像の理解が進みやすくなります。

alt属性に文字数の制限はありますか?

明確な文字数の制限はありませんが、簡潔にまとめるのが基本です。読み上げソフトはalt属性をそのまま読み上げるため、長すぎると利用者の負担になります。画像の要点が伝わる範囲で、短く説明します。図やグラフのように情報量が多い画像は、alt属性で要点を示し、詳細は本文で補足すると、無理なく伝えられます。

まとめ:alt属性は「画像を説明する」が基本

alt属性(代替テキスト)とは、画像の内容を文字で伝える説明です。アクセシビリティを支える本来の役割があり、その結果として検索エンジンの理解にも役立ちます。本記事のポイントは以下の通りです。

  • alt属性は、画像が見られないときの代替と読み上げ、SEOに関わる
  • 画像の内容を、具体的かつ簡潔に説明する
  • キーワードの詰め込みは避け、装飾画像はalt=””にする
  • HTMLの記述、またはWordPressの代替テキスト欄で設定できる
  • 「読み上げて意味が通るか」を基準にすると迷いにくい

アマノートは、alt属性を含めた画像まわりの最適化を、コンテンツの質を高める編集とあわせて支援しています。画像の多いサイトで設定の方針に迷われている場合は、現状の点検からご相談いただけます。

  • URLをコピーしました!
  • URLをコピーしました!
目次