「alt属性って、画像に付けるテキストですよね？なんとなく入れてるけど、実際どこまで重要なんですか？」——先日、戸田市内で雑貨店を営む店主の方からこんなご相談をいただきました。ECサイトを自力で運営されていて、商品画像は丁寧に撮影しているのに、alt属性はほぼ空欄のまま。「なんか書いた方がいいって聞いたんですよ」という感じで、よくわからないまま放置されていたそうです。
実はこれ、かなりあるあるな状況なんです。弊社ミアキスがサイト診断をご依頼いただくと、約7割のサイトでalt属性が未設定か、ほぼ意味のない記述になっています。「image001.jpg」とか「photo」とか、ファイル名をそのまま入れているケースも珍しくありません。今日はそのalt属性について、SEOとアクセシビリティの両面から、現場目線でしっかり解説していきますね。
alt属性とは何か？まず基本から整理しよう
alt属性とは、HTMLの<img>タグに付ける「代替テキスト（alternative text）」のことです。書き方としてはこんな感じ。
<img src="handbag-red.jpg" alt="赤いレザーハンドバッグ">
この「赤いレザーハンドバッグ」という部分がalt属性です。画像が何らかの理由で表示されない場合に、代わりにこのテキストが表示されます。また、視覚に障害のある方がスクリーンリーダーというソフトを使ってWebページを読む際、このalt属性のテキストが読み上げられます。
もう一つ大事な役割があって、Googleなどの検索エンジンのクローラーは画像そのものを「見る」ことができません。テキスト情報を読み取ることしかできないんです。だから、alt属性に書かれた内容を手がかりに「この画像は何なのか」を理解しています。つまり、alt属性はロボットへの「画像の説明文」でもあるわけです。
SEO的にalt属性がなぜ重要なのか
Googleの画像検索という入り口から、サイトへの流入が生まれることをご存知でしょうか。特にECサイトや飲食店のメニューページなどは、画像検索からのアクセスが馬鹿にできません。alt属性をしっかり書いておくと、画像検索の検索結果に表示されやすくなり、新たな集客チャンネルになりえます。
また、通常の検索においても間接的な影響があります。Googleはページ全体のコンテンツを評価する際に、テキスト情報を重視しています。画像しかないページより、画像＋適切なalt属性がセットになっているページの方が、「ちゃんとコンテンツとして機能しているページ」と評価されやすいんです。
先ほどの戸田市の雑貨店さんのケースでは、商品画像のalt属性を「商品名＋素材＋カラー」の組み合わせで整備し直したところ、3ヶ月後には画像検索経由のサイト訪問数が約2.4倍に増えました。もちろんすべての効果がalt属性だけによるものとは言い切れませんが、無視できない変化でした。
alt属性とキーワードの関係
「じゃあ、キーワードをたくさん詰め込めばいいんですか？」という疑問が出てきますよね。これはNGです。「赤 ハンドバッグ 革 レザー 人気 安い おすすめ」みたいに無理やりキーワードを詰め込む行為は「キーワードスタッフィング」と呼ばれ、Googleのガイドライン違反になる可能性があります。
あくまで「画像を見ていない人に、この画像が何かを正確に伝えるテキスト」を意識して書くのが正解です。自然に書いたら結果的にキーワードが含まれる、というのが理想的な状態です。
アクセシビリティにおけるalt属性の役割
SEOの話だけになりがちなんですが、alt属性はアクセシビリティ（誰もが使いやすいWebの実現）においても非常に重要です。視覚障害のある方はスクリーンリーダーを使ってWebを利用しています。このソフトはページのテキストを音声で読み上げてくれるんですが、alt属性がないと画像のファイル名をそのまま読み上げてしまうんです。
「image001.jpg」「DSC_4872.jpg」——これが読み上げられても、その画像が何なのか全くわかりませんよね。適切なalt属性があれば「赤いレザーハンドバッグの商品画像」と読み上げられ、視覚のない方でもページの内容を正確に把握できます。
日本でも2024年に障害者差別解消法が改正され、民間事業者にも合理的配慮の提供が義務化されました。Webアクセシビリティへの対応は、今後ますます重要になっていきます。サービスの詳細ページでも、弊社がアクセシビリティ対応をサポートしていることをご紹介しています。
装飾的な画像にはalt=""を使う
ちょっとした応用知識として、装飾目的の画像（区切り線の模様や背景的なイラストなど）には、alt属性を空にする（alt=""）のが正解です。alt属性自体を省略するのとは意味が違います。
空のalt属性を書くことで、スクリーンリーダーに「この画像は読み上げなくていい装飾だよ」と伝えることができます。alt属性を省略すると、ソフトによってはファイル名を読み上げてしまうことがあるので注意が必要です。
実際のお客様からのよくある質問
Q：ロゴ画像のalt属性は何と書けばいいですか？ヘッダーに使っているのですが。
A：これは戸田市内の美容室を経営されているお客様からいただいた質問です。ロゴ画像のalt属性は「会社名＋ロゴ」で書くのが一般的です。例えば「ミアキス ロゴ」といった具合ですね。ただし、そのロゴ画像がサイトのトップページへのリンクになっている場合（よくあるパターンです）は、「トップページへ戻る」という目的を伝えるalt属性にすることも検討してください。ナビゲーション的な役割の画像は、リンク先の説明を書くのがアクセシビリティ的に正しい対応です。
Q：商品ページが100ページ以上あります。全部のalt属性を手作業で直すのは現実的ではないのですが…。
A：おっしゃる通りです。弊社でもCMSの設定やプラグインの活用で、商品名データベースと連携して自動的にalt属性を生成する仕組みを導入したケースがあります。一度仕組みを作ってしまえば、新商品を追加するたびに自動でalt属性が設定されるようになります。どんな規模感のサイトかによって最適な対応が変わりますので、まずはお問い合わせいただけると具体的なご提案ができます。
今日から使えるalt属性の書き方チェックリスト
最後に、弊社でお客様のサイトをチェックする際に使っている基準を共有しますね。
- 画像の内容を具体的に説明しているか（「写真」「画像」だけで終わっていないか）
- キーワードを不自然に詰め込んでいないか
- 装飾的な画像には
alt=""を設定しているか - 商品画像には商品名・色・素材など具体的な情報を含めているか
- リンク付き画像は、リンク先の説明を書いているか
- 日本語・英語が混在する場合、適切な言語で書かれているか
alt属性は地味に見えて、SEOとアクセシビリティの両方に効いてくる、コスパの高い対策です。特にECサイトや店舗サイトを運営されている方には、ぜひ一度現状を確認してみてほしいと思います。
弊社ミアキスでは、サイト全体のalt属性診断から修正対応、さらに継続的な保守運用まで対応しています。料金プランもリーズナブルに設定していますので、埼玉県内のみならず全国どこからでもお気軽にご相談ください。「うちのサイト、大丈夫かな？」という漠然とした不安からでも、まずはお問い合わせいただければ一緒に確認していきましょう。