商品画像のalt属性とは？ECサイトでの書き方と注意点
目次
商品画像のalt属性には、画像を見られない状況でも何が写っているか分かる代替テキストを設定します。SEOのために商品名や関連語を詰め込むのではなく、画像が担っている情報を短く正確に説明することが基本です。
ECサイトでは、正面写真、使用イメージ、サイズ比較、カラーバリエーション、付属品など、一つの商品ページに多くの画像があります。同じaltを全画像へ設定せず、それぞれの画像で利用者が確認できる内容に合わせて書き分けます。
alt属性とは
alt属性は、HTMLのimg要素に設定する代替テキストです。画像が読み込めない場合の説明になり、スクリーンリーダーを利用する人へ画像の内容を伝える役割もあります。画像がリンクの場合は、リンク先を理解する手掛かりにもなります。
Googleも、altテキストをページ内容や画像認識などと合わせて画像の主題を理解する材料として利用しています。ただし、検索語を多く入れれば評価が上がるという意味ではありません。利用者に役立つ、文脈に合った説明を優先します。
最初に画像の役割を分類する
商品ページの画像は、商品そのものを示す画像、仕様を説明する画像、利用場面を示す画像、装飾画像に分けて考えると整理しやすくなります。役割が分からないまま一括設定すると、同じ商品名の繰り返しになりがちです。
- 正面や背面の写真は、商品と向きを説明する
- サイズ比較画像は、比較対象と大きさを説明する
- 使用イメージは、誰がどの場面で使っているかを説明する
- 付属品画像は、同梱される物を説明する
- 意味を持たない背景や区切り画像は装飾として扱う
正面写真のaltを書く
商品を代表する正面写真では、商品名または商品種別と、色やモデルなど識別に必要な情報を書きます。たとえば「ブランドA 真空断熱ボトル500ml ブラック 正面」のように、画像を見たときに分かる範囲で説明します。
すでに周囲の見出しで商品名が明確な場合は、重複を減らして「ブラックのボトル正面」のように書く選択肢もあります。ページから切り離してaltだけを考えるのではなく、近くの文章との関係を見てください。
角度違いと拡大写真を書き分ける
背面写真なら操作ボタンや素材、側面写真なら厚み、拡大写真なら縫い目や端子など、その画像で追加している情報を示します。「商品画像1」「商品画像2」では違いが分かりません。
同じ商品の回転画像を細かく並べていて、各画像から得られる情報がほとんど同じ場合は、すべてに長いaltを設定すると読み上げが冗長になります。画像ギャラリーの実装とアクセシビリティを含め、代表画像と補助画像の扱いを決めます。
使用イメージは状況を説明する
バッグを背負っている写真なら「身長の異なるモデルが背負う様子」、調理器具なら「フライパンで二人分の料理を作っている様子」のように、画像が伝える利用場面を書きます。
画像から読み取れない効果や感情を足さないことも大切です。「必ず快適になる」「驚くほど売上が増える」といった説明は画像の代替ではありません。年齢や属性を断定する必要がない場合は、見た目からの推測も避けます。
文字入り画像は重要情報を本文にも書く
サイズ表、機能比較、キャンペーン条件を画像内の文字だけで伝えると、画像を見られない人や検索エンジンに内容が伝わりにくくなります。重要な情報はHTMLの本文や表としても掲載してください。
altへ画像内の文章をすべて詰め込むと長くなりすぎることがあります。altでは画像の目的を示し、詳しい説明は近くの本文へ置く方法があります。特に料金、期限、注意事項は、更新しやすいテキストとして管理したほうが安全です。
装飾画像では空のaltを検討する
背景の模様、区切り線、意味のないアイコンなど、内容理解に不要な装飾画像では、空のalt属性が適切な場合があります。ファイル名や「飾り画像」と読み上げられるより、支援技術で読み飛ばせるほうが分かりやすいためです。
ただし、見た目はアイコンでも、在庫、警告、配送方法など意味を伝えているなら装飾ではありません。アイコンの意味がテキストでも示されているかを確認し、画像単体で情報を担う場合は代替説明を用意します。
キーワードの詰め込みを避ける
「スニーカー 靴 シューズ 人気 格安 通販 メンズ レディース」のようなaltは、画像の説明になっていません。読み上げる人にとって負担になり、ページ全体の品質も損ないます。
商品名や主要な特徴を自然に含めることは問題ありませんが、画像に写っていない語や、同じ意味の語を並べる必要はありません。「防水スニーカーの側面にある止水ファスナー」のように、対象と注目点を説明します。
ファイル名と周辺テキストも整える
画像ファイル名は、可能であれば短く説明的にします。IMG0001.jpgのような名前より、商品や角度が分かる名前のほうが管理もしやすくなります。ただし、既存画像のURLを一斉に変更すると参照切れや再取得が発生するため、影響を確認してください。
画像は関連する説明の近くへ配置します。素材の拡大写真が、配送情報の下に離れて置かれていると文脈が分かりにくくなります。キャプションや見出しも含め、画像と文章を一つの説明として設計します。
バリエーション画像の注意点
色を選択すると画像が切り替わる商品では、選択中の色とaltが一致するかを確認します。ブラックを選んだのに「ホワイト」と残る実装は、利用者にも検索エンジンにも誤った情報を伝えます。
JavaScriptで切り替える場合は、画像のsrcだけでなくaltも更新されるかをテストします。サムネイル画像と拡大画像で同じaltを使うかどうかも、読み上げ順と機能を見ながら決めます。
大量画像を運用する方法
商品画像が多いECサイトでは、画像種別を商品マスタに持たせ、「商品名＋色＋画像の役割」からaltを生成する方法があります。正面、背面、着用、付属品といった役割が登録されていれば、単純な連番より具体的にできます。
ただし、自動生成の元データが空欄なら、誤ったaltを大量に作ることになります。代表カテゴリで生成結果を確認し、色名や向きが画像と一致しているかをサンプリングします。例外商品を手動で上書きできる仕組みも検討します。
確認に使える方法
ブラウザの開発者向け機能やページのHTMLで、img要素のaltを確認できます。画像を非表示にした状態やスクリーンリーダーで内容が理解できるかを試すと、単なる文字列チェックでは気づきにくい問題が分かります。
Search Consoleだけでは、すべてのaltの良し悪しを判断できません。テンプレート、商品マスタ、実際の表示を組み合わせて確認します。画像の読み込み速度や大きさも重要ですが、altとは別の課題として切り分けます。
よくある間違い
- 全画像へ同じ商品名を設定する
- altを検索キーワードの一覧として使う
- 画像に写っていない効果や仕様を書く
- 装飾画像にも長い説明を付ける
- 色を切り替えてもaltが更新されない
- サイズ表を画像だけで掲載する
- ファイル名を変えて参照切れを起こす
alt属性の作成手順
- 画像ごとの役割を分類する
- 画像が追加している情報を一文で説明する
- 商品名や色など識別に必要な情報を補う
- 周辺テキストとの重複と読み上げ順を確認する
- 装飾画像は空のaltが適切か判断する
- バリエーション切り替え時の動作をテストする
チェック項目
- 画像を見なくても対象と状態が分かるか
- 同じaltが機械的に繰り返されていないか
- キーワードの羅列になっていないか
- 画像と異なる色や仕様を書いていないか
- 重要な文字情報が本文にも掲載されているか
- 装飾画像を適切に読み飛ばせるか
- 画像切り替え後も内容が一致するか
画像がリンクになっている場合
商品一覧やサムネイルで画像自体がリンクの場合、altはリンク先を理解する手掛かりになります。周囲に同じ商品名のテキストリンクがあるなら、読み上げで二重に繰り返されない実装も検討します。
「画像をクリック」のような操作説明だけでは、どの商品へ移動するか分かりません。商品名や選択中のバリエーションを確認できる形にします。
まとめ
商品画像のalt属性は、画像の内容を代わりに伝えるためのテキストです。商品名を繰り返すのではなく、正面、背面、使用場面、サイズ比較、付属品など、画像ごとの役割に合わせて書き分けます。
まずは売上や閲覧の多い商品の画像を一つずつ分類し、実際の画像とaltを照合してください。その結果を画像種別と商品データのルールへ反映すると、大量の商品でも正確さを保ちながら改善しやすくなります。
