代替テキスト(alt属性)
代替テキストとは、HTMLのalt属性に設定する画像の短い説明文で、スクリーンリーダーが視覚障害のある利用者に読み上げ、検索エンジンが画像の内容を理解して画像検索に表示すべきかどうかを判断するために読み取るテキストです。
商品画像に代替テキストが必要なのは、検索エンジンが写真そのものを見ることはできず、画像に付けられた説明だけを読み取れるからです。alt属性は同時に三つの役割を果たします。スクリーンリーダーが読み上げる対象になり、画像が読み込めなかったときに代わりに表示され、クローラーには画像の内容を平易な言葉で伝えます。良い代替テキストは、商品名、色、素材、商品に印字された文字など、実際に写っているものを記述します。キーワードを詰め込んだり、同じ一文をすべての画像で繰り返したりするものではありません。背景の質感や区切り線のような純粋に装飾的な画像であれば、空のalt属性(alt="")が正しく、支援技術がノイズを読み上げずに読み飛ばせます。
手作りの陶器を販売するShopifyストアを考えてみます。炻器のマグカップの商品ページには五枚の写真があります。正面から見たマグカップ、釉薬の質感を寄せて撮ったもの、取っ手、手と並べたサイズ比較、朝食のテーブルに置いたライフスタイル写真です。「マグカップ」や「商品画像1」といった一般的な代替テキストは、誰にも何も伝えません。適切に書けば、ディテールの写真は「炻器のマグカップに施した青の斑点状リアクティブ釉薬のクローズアップ」となり、サイズの写真は「容量350mlを示すために片手で持った炻器のマグカップ」となります。スクリーンリーダーを使う買い物客は、これで商品の特徴を理解できます。Googleの画像検索も、リアクティブ釉薬のマグカップを探している人にこの商品を表示するだけの情報を得られますし、写真が無言で伝えていた具体的な特徴を運営者がしっかり拾えています。
正直に言えば、代替テキストはあくまで画像を説明するものであり、ランキングを狙うコンテンツを隠す場所ではありません。仕様、寸法、成分表、お手入れ方法、顧客レビューは、ページ上に実際に選択できるテキストとして存在しなければなりません。こうした情報が画像やインフォグラフィックに埋め込まれていると、検索エンジンやAI回答エンジンはそれを読み取れず、商品は実際よりも内容が薄く見え、詳細をプレーンテキストで持つ競合に負けてしまいます。
この点は、買い物客がAIアシスタントに買い物を任せるようになるにつれて、いっそう重要になります。ChatGPT、Perplexity、Google AI Overviewsに、ある予算内で最適なマットブラックのケトルを尋ねるとき、これらのシステムは主にページが公開しているテキストをもとに動きます。機械による画像認識の活用にはばらつきがあり、人間と同じように写真を読み取ると当てにすることはできません。だからこそ、丁寧に書かれた代替テキストは、画像に意味を結びつけて商品を正確に引用するための数少ない手がかりの一つになります。それだけで内容の薄いページを支えることはできません。
代替テキストは、数あるアクセシビリティと発見性の手がかりの一つとして扱い、単独のランキング操作の手段とは考えないでください。適切な人と適切なクローラーが画像を見つける助けにはなりますが、ページにその地位をもたらす中身は、やはり目に見える本文に存在している必要があります。