Web上には「alt属性の正しい設定方法」という情報があふれていますが、SEO重視かアクセシビリティ重視かによって書き方が異なることも事実です。しかし、どちらか一方に偏るのではなく、画像が置かれる文脈に応じてalt属性を考えることが大切だと私は考えています。
この記事では、alt属性の基本ルールと、コーディング時に「こう考えてみてはどうか」ということをお伝えしていきます。SEOとアクセシビリティ、どちらとも考えてつけてみてください。
alt属性とは何か – その本来の役割
alt属性は、画像が表示されない、または見えないといった場合に代替テキストとして表示されるものです。スクリーンリーダーの音声読み上げにも使用され、画像の内容を理解するための重要な手がかりとなります。
また、検索エンジンのクローラーに画像の内容を伝える役割も果たします。特に画像検索で表示されたい場合は必須の設定と言えるでしょう。
alt属性の基本ルール
- 意味のある画像 → 適切な説明を記載
- 装飾的な画像 →
alt=""と空にする - いずれの場合も、alt属性自体は必ず記述する
alt属性は必須
まず、alt属性はHTML仕様上、img要素に必須です。たとえ代替テキストが不要な装飾画像であっても、alt="" と空の値を設定する必要があります。「この画像には代替テキストが不要である」ことをスクリーンリーダーや検索エンジンに明示的に伝えるためです。
alt属性自体が存在しない場合、スクリーンリーダーによっては画像ファイル名を読み上げてしまい、「DSC_1234.jpg」「img_2025_001.png」のような無意味な情報がユーザーに届いてしまいます。これでは、音声でコンテンツを利用しているユーザーにとって邪魔な情報になってしまいますよね。
やってはいけないalt属性の書き方
適切なalt属性を書く前に、まずは「やってはいけないこと」を押さえておきましょう。これらは、SEO的にもアクセシビリティ的にもマイナスになる可能性があります。
キーワードを詰め込む
【悪い例】
<img src="puppy.jpg" alt="子犬 犬 かわいい プードル ペット 動物">キーワードの羅列はスパムと見なされる可能性があります。また、スクリーンリーダーで読み上げられた際も「こいぬ、いぬ、かわいい、ぷーどる、ぺっと、どうぶつ」と不自然に聞こえ、ユーザーにとって不快です。
【良い例】
<img src="puppy.jpg" alt="芝生の上で遊ぶトイプードルの子犬">その画像にテキストが必要なら、キーワードは自然と含まれます。検索エンジンもユーザーも、理解しやすいです。
画像に関係ないテキストを入れる
alt属性は画像の代替となるテキスト情報を設定するものです。画像に関係ないことを記載しても意味はありません。それどころかマイナスの評価になる可能性もあるので、無理にテキストを入れるくらいなら空欄にした方が良いでしょう。
記事の内容と画像が無関係な場合、そもそもその画像は必要なのか再考すべきです。どうしても使いたい場合は、後述するfigcaptionで説明する方法もあります。
周辺にあるテキストをそのままコピーする
すでに誰でも見れる（聞ける）内容なら、わざわざ画像にもその内容を示す必要はありません。alt属性に文章をコピペするといったことは避けましょう。
【悪い例】
<h2>富士山の初冠雪が観測されました</h2>
<p>2025年10月23日、気象台は富士山の初冠雪を観測しました。平年より21日遅い観測となりました。</p>
<img src="fuji.jpg" alt="2025年10月23日、気象台は富士山の初冠雪を観測しました。平年より21日遅い観測となりました。">【良い例】
<h2>富士山の初冠雪が観測されました</h2>
<p>2025年10月23日、気象台は富士山の初冠雪を観測しました。平年より2週間遅い観測となりました。</p>
<img src="fuji.jpg" alt="雪化粧した富士山。山頂から5合目付近まで白く覆われている">画像独自の情報（視覚的な様子）を伝えるようにします。記載する内容が思いつかなければ、無理に入れる必要はありません。コピペするくらいならなしで良いのです。
「画像」「写真」というテキストを入れる
img要素自体が「画像」を意味するため、alt属性に「画像」というテキストは不要です。視覚的に見ている人にとっても、わざわざ「これは画像です」と説明する必要はありませんよね。
同様に「写真」「イラスト」といった種類を示す言葉も、ほとんどの場合不要です。例外として、写真とイラストを区別することに意味がある場合（例: 「実際の製品写真」vs「イメージイラスト」）のみ記載を検討しましょう。
ファイル名をそのまま使用する
サイトのシステムによっては、alt属性が空の場合に自動的にファイル名を挿入する機能がありますが、これは適切ではありません。ない方がマシです。
<img src="DSC_1234.jpg" alt="DSC_1234">
<img src="product-image-2024-11-27-final-v2.png" alt="product-image-2024-11-27-final-v2">装飾画像の扱い方
理想を言えば、装飾目的の画像はCSSの background-image で設定すべきです。HTMLは構造、CSSは見た目という役割分担がWeb標準の考え方だからです。
しかし現実的には、特にWordPressのようなCMSで記事を投稿する際、すべてをCSSで管理するのは難しいこともあります。
主にコーディング段階で意識すべき点ですが、記事執筆時にも「この画像は本当に情報を伝えているか? それとも装飾か?」を判断する習慣をつけましょう。
リンク画像のalt属性
画像をリンクとして使う場合、alt属性にはリンク先の情報を含めます。画像の説明だけでなく、「どこに飛ぶのか」を明示することが重要です。
ロゴ画像の場合
<a href="/"><img src="logo.png" alt="ロゴ"></a>上記の書き方ではなく、以下のように記述します。
<a href="/"><img src="logo.png" alt="○○株式会社 ホームへ"></a>ヘッダーやフッターのサイトのロゴにもリンクをつける場合もあると思います。
ヘッダーのロゴリンクは慣習として「ホームに戻る」ことが広く認識されているため、上述したように「ホームへ」というテキストを入れずとも意味が通じます。
- 画像が読み込めない時に何が表示されるべきか
- スクリーンリーダーユーザーに何を伝えるべきか
この2つの観点では「○○株式会社」という情報だけで十分でしょう。
バナー画像の場合
バナーにはテキストが含まれることがほとんどです。画像に書いてある通りに記載しましょう。よくあるのがalt属性には簡易的なテキストのみを記載しているパターンです。
【悪い例】
<a href="/campaign/">
<img src="sale-banner.jpg" alt="セール">
</a>【良い例】
<a href="/campaign/">
<img src="sale-banner.jpg" alt="冬のセール開催中、最大50%オフ - キャンペーンページへ">
</a>画像とテキストリンクを併用する場合
画像とテキストを並べて、同じリンク先に2回飛ばす設計は避けるべきです。併用する場合は画像のaltは空で構いません。テキストの重複を避けることが大切です。
<a href="/product/">
<img src="product.jpg" alt="">
新商品の詳細はこちら
</a>グラフ・図表・インフォグラフィックの場合
より多くの情報が詰まっているグラフ画像などは、読み上げても理解できるようにするべきです。情報量が多ければ、画像とは別にその内容が分かる表や説明文を用意しましょう。
【別途説明がある場合】altは「〇〇のグラフ」といった簡潔なテキストでOK。
【別途説明がない場合】画像が主要な情報源である場合は、altに詳細なデータを含めます。
情報量が多すぎる場合
あまりにも情報量が多い場合は、画像とは別に以下の方法を検討します。
- 詳細な表を別途用意する
- 本文で詳しく説明する
- aria-describedby属性を使用する
文脈にそわない画像の扱い方
この記事での場合の例でみていきます。
ここにアライグマの画像を挿入します。画像に沿った内容を入れれば良いのでalt属性は「アライグマ」に設定します。
しかしこの記事はalt属性について解説しているものであり、アライグマとは何の関係もありません。このような場合、画像に「アライグマ」というalt属性を設定することは適切でしょうか?
検索エンジンの視点
この記事のテーマとアライグマは無関係です。検索エンジンも「alt属性についてのコンテンツ」として認識してくれるはずです。そのためalt属性に「アライグマ」と書いても、記事の評価にプラスになることはないでしょう。むしろコンテンツの関連性が低下する可能性があります。
アクセシビリティの視点
目の見える人にとっては画像自体が表示されずとも「ここにアライグマの画像が設定してある」という理解ができると思います。でもこれは重要な情報ではないので、なくてもいいです。
表示されない時やスクリーンリーダーで読み上げた場合を想像してください。alt属性のテキストが出てきてどう思いますか？私はいらないと思います。
【スクリーリーダーでの読み上げ例】
「文脈にそわない画像の扱い方」（見出し） 「ここで、実際に体験していただきたい例があります」（本文） 「アライグマ」（画像のalt） 「この記事はalt属性について解説しているものであり...」（本文の続き）
文脈と無関係な「アライグマ」という単語が突然挿入され、ユーザーは混乱するはずです。音声でコンテンツを利用しているユーザーにとって、これは余計な情報です。
利便性を考えた時に、音声で読まれた際にスムーズにコンテンツを見てもらえる方が大事だと思います。
適切な対処法
1. alt属性を空にする
<img src="raccoon.jpg" alt="">2. そもそも画像を削除する
内容と無関係なら、画像自体が不要かもしれません。
3. キャプションで説明する
<figure>
<img src="raccoon.jpg" alt="">
<figcaption>※記事内容とは無関係ですが、息抜きとしてかわいいアライグマの写真を掲載しました（Photo by Gary Bendig on Unsplash）</figcaption>
</figure>このように、<figure>と<figcaption>を使えば、画像とキャプションの関係性を明示的にマークアップできます。キャプションで文脈を補足すれば、alt属性は空でも問題ありません。
よくあるアドバイスを深掘りする
Web上には「alt属性の正しい書き方」としてよく見かけるアドバイスがあります。これらは決して間違いではありませんが、もう少し深く考えてみましょう。
私がここで伝えたいのは、「こういうふうに入れましょう」という部分だけを参考にするのではなく、それを踏まえて、本当にそこにある画像に対して正しいか、alt属性の本質的な意味とコンテンツ内で使用する際の画像の役割を考えることが大切だということです。
「画像の内容を正確に伝える」は正しいが…
【アドバイス例】「ピザ」より「おいしそうなピザ」と書いた方が良い。
本当にそうでしょうか?
例として簡単なものをあげているのだと思いますが、これをこのまま使うのではなく、文脈でより適切なものを選んでいきましょう。
不要なケース
ピザのレシピ記事で、完成品の写真として掲載する場合。
<h2>マルゲリータピザの作り方</h2>
<p>生地を伸ばし、トマトソースを塗り、モッツァレラチーズをのせて焼きます。</p>
<p>完成したピザがこちらです。</p>
<img src="pizza.jpg" alt="完成したマルゲリータピザ">周辺テキストで「完成したピザ」と説明されていれば、「おいしそうな」という主観的な形容詞は不要です。
必要なケース
「おいしいピザの見分け方」という記事で、良い例と悪い例を比較する場合。
<h2>おいしいピザの見分け方</h2>
<p>焼き立てのおいしいピザと、時間が経ったピザでは見た目が異なります。</p>
<img src="good-pizza.jpg" alt="チーズがとろけて焼き色が均一な、焼き立てのピザ">
<p>↑ これがおいしいピザの特徴です</p>
<img src="bad-pizza.jpg" alt="チーズが固まり、焦げ目が多い冷めたピザ">
<p>↑ これは避けたいピザです</p>この場合、視覚的な違いを言葉でしっかり説明する必要があります。画像が「情報を伝えるため」に存在している明確な例です。
「内容は簡潔に」の真意
【アドバイス例】alt属性は短く簡潔に書きましょう
上述した内容と合わせると、「内容を正確に簡潔に」ということです。
たまに20字くらいの一文でもより端的に表した方が良い、といった内容も見かけましたが、正確に伝えるのとどちらが良いのでしょうか。
長すぎることはアクセシビリティ的にも問題が出ることはありますが、単に外見を説明するだけでいいのか、いつどこでどうなった画像なのか、より詳細を示した方が良いこともあるはずです。
「簡潔に」とよく言われますが、これは「短ければ良い」という意味ではありません。
正しくは、「無駄な装飾語を省き、必要な情報を過不足なく伝える」ということです。
長くても良い例
以下のような長いalt属性は、決して悪くありません。具体的な視覚情報を伝えると長くなるものです。
<img src="sakasa-fuji.jpg" alt="河口湖畔から撮影した逆さ富士。湖面に映る富士山の姿が完全なシンメトリーを描き、朝日に照らされた山頂部分がピンク色に染まっている">「美しい富士山」とだけ書かれているより、富士山の美しさを詳細にイメージできます。これは必要な情報です。
<img src="historical-fuji.jpg" alt="1930年代の富士山。現在のような登山道の整備はなく、険しい岩場を登る白装束の登山者たちの姿が写っている">歴史的な写真の場合、時代背景や当時の様子を伝えることができます。
長いだけで冗長な例
一方、以下は長いだけで情報量が少ないです。
<img src="fuji.jpg" alt="とても美しくて素晴らしい、息をのむような絶景の富士山の写真画像">「美しい」「素晴らしい」という形容詞ばかりでは、主観的で画像の視覚的な特徴を伝えていません。このように書くなら短くした方が良いでしょう。もしくは情報をしっかり伝えるようにします。
<img src="fuji.jpg" alt="雪化粧した富士山。青空を背景に、山頂から5合目付近まで白く輝く雪に覆われている">判断基準
「この画像が表示されなかったとき、altテキストだけで同じ情報・体験を得られるか?」
難しいことではありますが、重要な基準です。必要な情報を伝えるために長くなるなら、それは適切な長さです。
補足: スクリーンリーダーの文字数制限について
一部のスクリーンリーダーは125文字前後で読み上げを切る場合があると言われています。グラフなどと同様に、長い説明が必要な場合は、aria-describedby属性や周辺テキストでの補足も検討しましょう。
同じ画像でも文脈で変わるalt属性
同じ画像でも、ページやその画像で何を伝えたいかによって、さまざまなalt属性の内容が考えられます。この画像がなぜここにあるのか、コンテンツにどう貢献しているのかという視点で考えていきます。
例: リビングルームのインテリア画像
まずリビングルームのインテリア画像を例に見ていきましょう。
この画像に対して、どのようなalt属性が適切でしょうか?
パターン1: 画像の外見をそのまま説明する
<img src="livingroom.jpg" alt="ベージュのレザーソファに白とオレンジのクッション、籐の鉢カバーに入った観葉植物、白いラグのあるナチュラルなリビングルーム">視覚的な要素を網羅していますが、長すぎる可能性もあります。また、「何のために」この画像があるのかが不明確です。alt属性をつけるかどうか検討すべきでしょう。
パターン2: 家具販売サイトの商品ページ
ECサイトでは画像SEOも重視したいところです。商品（ソファ）にフォーカスした説明文にします。
<h2>ベージュレザーソファ - 商品詳細</h2>
<p>天然皮革を使用した3人掛けソファです。ナチュラルなインテリアに最適...</p>
<img src="livingroom.jpg" alt="ベージュレザーソファのスタイリング例">観葉植物やクッションは主役ではないため、詳細に触れる必要はありません。
パターン3: インテリアショップの施工事例ページ
<h2>ナチュラルモダンなリビング事例</h2>
<img src="livingroom.jpg" alt="ナチュラルモダンなソファと観葉植物のコーディネート例">インテリア全体のスタイルを伝えることが目的です。「ナチュラルモダン」というテイストが重要な情報になります。
パターン4: 個人ブログで体験談を語る
<h2>インテリア初心者の私が理想のリビングを作るまで</h2>
<p>長年インテリアに悩んでいましたが、ようやく満足できる空間ができました...</p>
<img src="livingroom.jpg" alt="インテリアに悩んでいた私が初めて作ったナチュラルテイストのリビング">個人的な文脈や感情を含めることで、ブログ記事のストーリーに沿った説明になります。
パターン5: アクセシビリティを最重視する場合
ユーザーが画像を「見なくても」イメージできることを最優先する場合。
<img src="livingroom.jpg" alt="木製フレームのベージュレザーソファに白いニット調クッションとオレンジ色のクッションが置かれ、編み込み模様の鉢カバーに入った緑豊かな観葉植物が隣に配置された、白いラグの上のリビング空間">詳細な描写により、視覚的な情報を言葉で再現しています。
例: 富士山の画像
同様に、富士山の画像も文脈で変わります。
ニュース記事の場合
ニュース価値（日付、平年との比較）を含める。
<h2>富士山で今季初の冠雪を観測</h2>
<p>気象台は23日、富士山で今季初めての冠雪を観測したと発表しました...</p>
<img src="fuji.jpg" alt="2025年10月23日、今季初めて冠雪した富士山。平年より21日遅い観測">観光サイトの場合
視覚的な魅力を言葉で伝える。
<h2>富士山の絶景スポット</h2>
<img src="fuji.jpg" alt="青空を背景に雪化粧した富士山。山頂から5合目付近まで白く輝く雪に覆われている">登山ガイドの場合
登山者が知るべき情報（雪の状態、天候）を強調。
<h2>冬季登山の注意点</h2>
<img src="fuji.jpg" alt="冬の富士山。山頂部は完全に雪に覆われ、強風により雪煙が上がっている">このように、「何を伝えたいか」によってalt属性の内容は大きく変わります。画像単体で判断するのではなく、ページ全体の文脈の中で考えましょう。
alt属性を書く前に自問すべき3つの質問
実際にalt属性を書く前に、以下の3つの質問を自分に投げかけてみてください。
この画像は何のために存在するのか?
alt属性が必要かどうかを判断します。
- 装飾目的? →
alt="" - 情報を伝えるため? → 具体的な説明を記載
- 機能的な役割（ボタン、リンクなど）? → 機能を明示
画像が表示されなかったら、このaltテキストだけで同じ情報が伝わるか?
画像を非表示にして、altテキストだけを読んでみてください。それで内容が理解できるなら、適切なalt属性と言えます。
周辺のテキストで既に説明されていないか?
重複を避けることも大切です。本文で既に詳しく説明されているなら、alt属性で繰り返す必要はありません。本文で説明していない視覚的な情報を補足する内容にしましょう。
実践チェックリスト
しっかりとしたalt属性にしたい方はぜひチェックしてみてください。
基本チェック
- img要素にalt属性が存在する（空でも必須）
- 装飾画像は
alt=""になっている - 「画像」「写真」などの不要な単語を削除した
- ファイル名がそのまま入っていない
内容チェック
- 画像の役割（装飾/情報/機能）を判断した
- 画像が表示されなくても、altだけで内容が理解できる
- 周辺テキストとの重複を避けた
- キーワードの詰め込みをしていない
- 文脈に沿った内容になっている
アクセシビリティチェック
- スクリーンリーダーで読み上げた時を想像した
- リンク画像の場合、リンク先が明示されている
- グラフや図表の場合、データや傾向が伝わる
SEOチェック
- ページの主題と関連性のある内容
- 自然な文章になっている
- 必要に応じて、ファイル名も最適化した
SEOとアクセシビリティの両立
適切なalt属性は、検索エンジンにもユーザーにも役立ちます。「SEOのため」「アクセシビリティのため」と分けて考えるのではなく、「この画像から何を伝えたいか」を言語化することが、結果的に両方を満たす最善の方法です。
無理にキーワードを入れなくても、その画像がコンテンツに必要で、適切な説明なら自然とキーワードは含まれるはずです。
「富士山の絶景スポット10選」という記事があり、その中に画像を含めた場合。
<img src="fuji-kawaguchiko.jpg" alt="河口湖畔から見た逆さ富士。湖面に完璧に映る富士山と、朝焼けに染まる空">視覚情報を伝えられ、「富士山・河口湖・逆さ富士・絶景」とキーワードが自然に含まれます。これらのキーワードを羅列するよりずっと自然で分かりやすいです。
画像周辺のテキストも最適化する
alt属性だけでなく、以下の要素も組み合わせることでSEO効果が高まります。
ファイル名も意識しましょう。IMG_001.jpg より fuji-kawaguchiko-sakasa-fuji-2024.jpg といったファイル名にすることです。ファイル名も検索エンジンが参照する情報です。また万が一ファイル名が読み上げられてもなんとなく意味がわかりやすいと思います。意味のある名前をつけましょう。
キャプション（<figcaption>）は視覚的にも表示されるため、すべてのユーザーに情報を提供できます。
画像の前後の本文も、検索エンジンは画像と関連づけて評価します。ユーザーにも分かりやすでしょう。
またより高度なSEOを目指すなら、構造化データも活用しましょう。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"contentUrl": "https://example.com/fuji-kawaguchiko.jpg",
"description": "河口湖畔から見た逆さ富士。湖面に完璧に映る富士山と、朝焼けに染まる空",
"name": "河口湖の逆さ富士"
}
</script>画像検索SEOについて
最後に、画像検索SEOについて補足します。
通常の検索（テキスト検索）との違い
通常のコンテンツSEO（テキスト検索）において、alt属性が検索順位に大きく影響することはほとんどありません。 検索順位を決める主要な要因は、コンテンツの質、被リンク、ユーザー体験などです。
しかし、Google画像検索での表示を目指す場合、alt属性は重要な要素の一つです。
Googleの画像認識技術の現状
「検索クローラーは画像の内容を判別できない」とよく目にしますが、現在のクローラーは判別できないのでしょうか。画像認識技術は大きく進化しています。人間ほどではないにせよ画像が何を表しているのかは理解しているのではないかと思いました。わざわざ画像の説明を書くべきなのかと。
私と同じような考えの人ももちろんいるわけで、Googleの回答としては重要なものだということです。詳細は以下記事を参照していただければと思います。
AIの画像認識が進歩しても、人間が書いたalt属性は画像SEOでは依然として重要 – 海外SEO情報ブログ
また画像SEOのベストプラクティスについては公式ガイドを参照してください。
Googleは機械学習により、画像に何が写っているかをある程度認識できます。しかし、それでも以下の理由からalt属性は重要です。
- 文脈の理解: 画像認識AIは「富士山」と認識できても、「初冠雪の富士山」「歴史的な富士山の写真」といった文脈は理解できません。
- テキスト情報の補完: 画像内のテキストやグラフのデータは、alt属性で補完する必要があります。
- 信頼性: 人間が書いたalt属性は、AIによる推測より信頼性が高いとGoogleは評価します。
まとめ
alt属性は、画像の役割・ページの文脈・ユーザーのニーズによって書き方が変わります。同じ画像でも、掲載するページによって最適なalt属性は異なる場合もあるでしょう。
画像がどのような役割を持つのか、検索に画像を表示させたいのかなどによってテキストを入れていくことが大切だと思います。
- 意味がない画像でも、img要素にalt属性をつけることはルールであるため、値を空にした alt=”” をつける。
- アイキャッチを含む装飾用で、画像に深い意味がなければ、alt属性に何を記載するかを特に気にする必要はない。
- 特に重要な意味のない画像ならアクセシビリティに配慮する。
- そのページで意味を持つ画像なら、alt属性は必ず設定する。そしてちゃんと文脈に沿った内容であること。
alt属性がそのページの検索順位に影響することはほぼないと言われています。これはコンテンツSEOのことで、画像検索でのSEOを考えるなら重要要素の一つです。
alt属性を適切に設定することで、見ることができないユーザーや画像が表示されない環境のユーザー、そして検索エンジンにも、より良い情報を提供できます。
「より多くの人に届けるサイト」というものを、このalt属性から学びました。とても長い記事となりましたが、ここまで見てくださりありがとうございます。
カテゴリー : HTML-CSS
