こんにちは、ツバサです。
商品ページのリニューアルで制作会社とやりとりしていたら「画像のaltを入れてください」と言われた。altという単語自体は見たことがあったけど、何を書けばいいのかよくわかっていなかったので調べてみた。
alt属性とは
ひとことで言うと、HTMLのimgタグに設定する「画像の説明文」のこと。画像が何らかの理由で表示されなかったときに、代わりにこのテキストが表示される。altは「alternative（代替）」の略だ。
MDN Web Docsのimg要素の解説を読むと、alt属性は画像の「テキストによる代替」を提供するものと書いてある。目が見えるユーザーにとっては画像を見ればわかるけれど、スクリーンリーダー（音声読み上げソフト）を使っている人にはこのalt属性のテキストが読み上げられる。つまり、アクセシビリティの観点でかなり重要な属性ということだ。
もうひとつの役割が、検索エンジンへの情報提供。Google検索セントラルの画像SEOに関するドキュメントには、Googleが画像の内容を理解するためにalt属性を使っていると明記されている。画像検索で自分の商品画像を見つけてもらうためにも、alt属性はちゃんと書いておいたほうがいい。
コードとしてはこんな形になる。
<img src="product.jpg" alt="ブランド名 トートバッグ ネイビー">
EC実務で出てくる場面
EC担当をしていると、alt属性を意識する場面がけっこう多い。僕が遭遇したケースをいくつか書いておく。
制作会社からの指摘
今回の僕のケースがまさにこれ。商品画像を差し替えるタイミングで「altが空のままになっています」と指摘された。恥ずかしながら、画像をアップロードするときにalt欄を空欄にしたまま放置していた。Web担当者Forumのalt属性に関する記事でも、alt属性が空欄のまま運用されているサイトが多いと指摘されていた。
楽天・Amazonの商品画像登録
ECモールの管理画面で商品画像を登録するとき、alt属性を入力する欄が用意されている場合がある。楽天のRMSでは画像のalt属性を設定できる仕組みがあり、商品名やキーワードを含めておくとモール内検索でも拾われやすくなると言われている。ECのミカタの商品ページ改善に関する記事でも、alt属性の設定がEC運営の基本として紹介されていた。
SEO改善の一環として
サイトのSEO改善に取り組んでいるとき、PageSpeed InsightsやLighthouseで「画像にalt属性がありません」という警告が出ることがある。SEOの観点からすると、alt属性は画像検索からの流入を増やすための基本的な施策のひとつだ。
覚えておきたいポイント
書き方の基本ルール
alt属性には、その画像に何が写っているかを簡潔に書く。たとえば商品画像なら「商品名 カラー サイズ」のように、ユーザーが画像を見なくても内容がわかるテキストにする。W3CのWeb Accessibility Tutorialsの画像ガイドには、画像の種類ごとにalt属性の書き方がまとめてあって参考になった。
やってはいけないのが、キーワードの詰め込み。「トートバッグ バッグ 鞄 かばん おしゃれ 人気 送料無料」みたいに書くとスパム扱いされる可能性がある。Google検索セントラルでも明確にキーワードの乱用はNGと書いてあった。
装飾用の画像は空にする
罫線やスペーサーなど、コンテンツとは関係ない装飾画像には alt="" と空のalt属性を入れる。空にしておけばスクリーンリーダーがその画像を読み飛ばしてくれる。altを入れないのとは違って、意図的に「この画像は説明不要です」と伝える意味がある。
画像のリンクにはalt属性が必須
画像をリンクとして使っている場合（バナーなど）、alt属性はそのリンク先の説明を書く。リンク先が「セール会場」なら alt="夏のセール会場はこちら" のようにする。alt属性が空のリンク画像は、スクリーンリーダーのユーザーにとってはどこに飛ぶかわからないリンクになってしまう。
