altタグとは？初心者でもわかる役割とSEOへの影響をやさしく解説

「画像に説明文をつけたほうがいいと聞いたけれど、何を書けばいいのかわからない」

この記事では、altタグの基本的な役割から、SEO・アクセシビリティとの関係、実務で迷わない書き方までわかりやすく解説します。

<img src="sample.png" alt="夏の海で海水浴を楽しむ家族">

altタグが重要な理由

alt属性には、大きく「アクセシビリティ」と「検索エンジンへの情報伝達」という2つの役割があります。

アクセシビリティの向上

Webサイトを見る人すべてが、同じように画像を確認できるとは限りません。

たとえば、視覚に障害がありスクリーンリーダーを利用している場合、画像そのものを見るのではなく、alt属性に設定されたテキストをもとに内容を把握します。

そのため、画像に重要な情報が含まれている場合は、画像を見なくてもその情報を理解できるようにすることが大切です。

検索エンジンが画像を理解する手がかりになる

検索エンジンは、画像だけでなく、ページ内の文章や画像周辺の情報、alt属性などを組み合わせて画像の内容を理解します。

適切なalt属性を設定することで、以下のような情報を検索エンジンに伝えやすくなります。

• 何の商品を写した画像なのか
• どのようなサービスの利用シーンなのか
• 図やグラフが何を表しているのか

Google画像検索などで画像が見つかる際の情報の一つにもなります。

ただし、alt属性を設定しただけで検索順位が大きく上がるわけではありません。

SEOのためにキーワードを無理に詰め込むのではなく、「その画像が何を伝えているのか」を正確に説明することを優先しましょう。

すべての画像に説明文を書く必要はない

alt属性についてよくある誤解が、「すべての画像に説明文を入れなければならない」というものです。

実際には、画像の役割によって書き分けます。

内容を伝える画像

商品写真、サービスの利用シーン、図解など、ページの内容を理解するうえで意味がある画像には、内容が伝わるalt属性を設定します。

<img src="wallet.jpg" alt="赤い革製の二つ折り財布">

装飾だけを目的とした画像

背景の模様や飾りなど、なくてもページの意味が変わらない画像は、説明する必要がありません。

この場合はalt属性そのものを削除するのではなく、空のalt属性を設定する方法があります。

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

こうすることで、スクリーンリーダーに不要な情報を読み上げさせずに済みます。

重要なのは、「画像があるからaltを書く」のではなく、「この画像が伝えている情報は何か」を考えることです。

altタグの正しい書き方

基本は、「その画像を見ることができない人にも意味が伝わるように書く」です。

たとえば、財布の商品画像の場合を考えてみましょう。

検索キーワードを並べるのではなく、画像の内容を自然に説明します。

書き方のポイント

• 画像が伝えている内容を書く
• ページの文脈に合わせて説明する
• 必要であればキーワードを自然に含める
• 「画像」「写真」など、見ればわかる説明を無理に追加しない
• キーワードを羅列しない
• 装飾画像はalt=""を使う

alt属性には「必ず○文字以内」という絶対的なルールはありません。長すぎる説明を避け、必要な情報を簡潔に伝えられる長さを意識しましょう。

同じ画像でもaltタグは変わることがある

実務では、画像だけを見てalt属性を決めるとは限りません。

同じ画像でも、ページ内で果たしている役割によって適切な説明が変わるためです。

たとえば、店舗でスマートフォン決済をしている写真があったとします。

キャッシュレス決済について説明する記事なら、

店舗でスマートフォンを使ってキャッシュレス決済をする利用者

といった説明が考えられます。

一方、店舗DXについて説明しているページなら、

スマートフォン決済を導入した店舗の利用イメージ

のほうが、ページの内容に合う場合があります。

つまり、alt属性は単純な「画像の名前」ではありません。そのページで画像が何を伝えるために使われているかまで考えることがポイントです。

図解やグラフのaltタグはどうする？

図解やグラフでは、画像の見た目を細かく説明することよりも、「その図から何がわかるのか」を伝えることが重要です。

たとえば、売上推移のグラフであれば、

alt="2025年1月から12月までの月別売上推移"

などと設定できます。

ただし、複雑なグラフの内容をすべてalt属性だけで説明しようとすると、非常に長くなってしまいます。

重要なデータや結論については、画像だけに情報を閉じ込めず、本文や表でも説明するほうが適切です。

これはSEO対策というよりも、ページそのものをわかりやすくするための考え方です。

altタグの設定方法

HTMLで直接設定する場合

HTMLでは、imgタグ内のalt属性に説明文を記述します。

<img src="sample.png" alt="夏の海で海水浴を楽しむ家族">

WordPressの場合

WordPressでは、画像をアップロードした際やメディアライブラリから、代替テキストを入力できます。

記事を作成する担当者が複数いる場合は、「何を書くのか」を社内で統一しておくと運用しやすくなります。

よくあるaltタグの失敗

とりあえずすべての画像に文字を入れる

alt属性は、埋めること自体が目的ではありません。

意味のない装飾画像まで説明すると、かえってスクリーンリーダー利用者に不要な情報を増やしてしまう場合があります。

SEOキーワードを詰め込む

たとえば、

alt="ホームページ制作 格安 SEO対策 東京 おすすめ 制作会社"

のような書き方は避けましょう。

画像の説明になっておらず、ユーザーにとっても有益ではありません。

ファイル名をそのまま入れる

alt="IMG_1234"

では、画像の内容を理解できません。

すべての画像に同じaltを設定する

商品や事例の画像が複数あるにもかかわらず、すべて

alt="サービスイメージ"

としてしまうケースもあります。

画像ごとに役割が異なるのであれば、それぞれに合わせて設定しましょう。

altタグを確認するときのチェックリスト

画像を確認するときは、次のポイントを見ると判断しやすくなります。

• この画像には、本文を理解するために必要な情報があるか
• 画像を見られなくても意味が伝わるalt属性になっているか
• 画像の内容とalt属性が一致しているか
• 不自然にSEOキーワードを入れていないか
• 装飾画像まで無理に説明していないか
• 図表の重要な情報が画像だけに閉じ込められていないか

「altが設定されているか」だけを見るのではなく、適切なaltになっているかを確認することが重要です。

Webサイト全体のaltタグを改善するには

画像が数百枚、数千枚あるWebサイトの場合、すべてを一度に修正する必要はありません。

まずは、以下の優先順位で確認すると効率的です。

1. 問い合わせや購入につながる重要ページ
2. 検索流入の多いページ
3. 商品・サービスを説明する主要画像
4. 図解やグラフなど情報量の多い画像

そのうえで、新しく追加する画像についてルールを決めれば、今後の修正量を増やさずに済みます。

たとえば、

• 商品画像：商品名＋特徴
• 事例画像：何をしている場面なのか
• 図解：図が示している内容
• 装飾画像：alt=""

といった簡単なルールでも、担当者によるばらつきを減らせます。

AIを使ってalt属性の候補を作ることもできますが、最終的には「そのページで画像が何を伝えているのか」を確認してから設定することが重要です。

altタグだけでSEO対策は十分？

alt属性は、Webサイト改善の一部分です。

検索流入を増やしたい場合は、以下なども含めて考える必要があります。

• ページの内容
• タイトルや見出し
• 内部リンク
• ページ構造
• 表示速度
• モバイルでの使いやすさ
• 画像サイズや形式
• コンテンツそのものの有用性

alt属性だけを大量に修正するよりも、サイト全体を確認して「どこから改善すると効果的か」を判断するほうが効率的な場合もあります。

まとめ

altタグは、画像の内容や役割をテキストで伝えるための仕組みです。

SEOのためだけに設定するものではなく、画像を見ることができないユーザーにも情報を届けるという重要な役割があります。

設定するときは、以下を意識しましょう。

• 画像が伝えている内容を書く
• ページの文脈に合わせる
• キーワードを無理に詰め込まない
• 装飾画像は空のalt属性を使う
• 「設定されているか」ではなく「内容が適切か」を確認する

Webサイト全体の画像やSEO設定をどこから改善すればよいかわからない場合は、重要なページから優先順位をつけて進める方法がおすすめです。