alt属性とは？SEO効果やECサイトでの書き方を解説

alt属性とは、Webページ上の画像の内容をテキストで説明するための代替テキストです。画像が表示されない場合や、スクリーンリーダーを使ってページを閲覧する場合に、画像の内容を伝える役割があります。ECサイトでは、商品画像の内容を検索エンジンに伝え、画像検索からの流入を増やすためにも重要です。

本記事では、alt属性の意味からSEOやアクセシビリティへの効果、設定方法、書き方のポイントまでを解説します。

alt属性とは

alt属性とは、画像の内容を説明するテキストであり、画像そのものが見えない状況でも情報を伝える手段として機能する代替テキストのことです。代替テキストはHTMLのimgタグに指定するalt属性の値として記述されます。

alt属性は、「画像代替テキスト」「altテキスト」「オルト属性」などとも呼ばれます。

alt属性と画像キャプションの違い

alt属性と画像キャプション（画像の説明文）には、以下のような特徴と違いがあります。

alt属性	キャプション
表示場所	通常は画面上に非表示。スクリーンリーダーや画像非表示環境で使われる	画像のすぐ下などに表示され、すべてのユーザーが見える
主な対象	スクリーンリーダー利用者、検索エンジン	見えているユーザー全般
役割	画像の説明を代替する裏側の情報	ユーザーの理解を深める補足情報

ECサイトでは、商品ギャラリーにキャプションを表示するケースや、ブログ記事中の写真に一言コメントを添えるケースがあります。キャプションにすべてを書いてaltを空にするのではなく、最低限の画像の意味はalt属性で、詳細な補足はキャプションで、という役割分担がベストプラクティスです。

alt属性で画像の内容を説明する

alt属性はHTMLのimgタグに指定します。基本的な構文は次のとおりです。

<img src="product.jpg" alt="黒いレザーのメンズビジネスバッグ">

検索エンジンのクローラーやスクリーンリーダーは、画像のピクセル情報だけでは内容を正確に把握できません。代わりに、このテキスト情報を手がかりにして画像の意味を理解しています。

ここで重要なのは、代替テキストは「画像そのもの」ではなく「ページ上でその画像が果たしている役割や意味」を説明するものだという点です。商品一覧のサムネイル、セールバナー、ブランドロゴなど、ECサイトには種類の異なる画像が多く存在するため、それぞれに合った代替テキストを考える習慣を付けましょう。

alt属性が重要な理由

アクセシビリティを高められる

代替テキストはWebアクセシビリティを向上させる重要な要素です。アクセシビリティとは、視覚障害、弱視、色覚多様性など、どのような環境・能力の人でもWebサイトを利用できる状態を指します。

視覚障害のあるユーザーは、商品のイメ―ジ写真やカラー展開を伝えるサムネイルなどの画像を、スクリーンリーダーを通じてテキスト（音声）として把握します。この際、各画像の代替テキストが画像の代わりに読まれます。

企業としてアクセシビリティに配慮することは、ウェブアクセシビリティ導入ガイドブックでも強調されており、ブランドイメージの向上や障害者差別解消法への対応という面でも欠かせません。alt属性はアクセシビリティを向上させる重要な要素です。

ユーザー体験の向上につながる

代替テキストがないとユーザー体験が低下します。画像が正しく読み込まれない場面でも情報が欠けず、スクリーンリーダー利用者がページ内をスムーズに移動できることは、ユーザー体験（UX）の質に直結します。

たとえばセール特集ページで「送料無料」「本日限り10%オフ」といった重要な訴求が画像だけに含まれている場合、テキストでも伝える対策に加え、alt属性を適切に設定する二重の備えが必要です。

代替テキストはユーザー体験を向上させ、直帰率の低下やサイト滞在時間の改善にも間接的に寄与します。

画像SEOに役立つ

適切なalt属性はSEOにおいても重要な役割を果たします。Google画像検索のガイドラインでも、alt属性を含めることが画像SEOのベストプラクティスとして明記されています。

検索エンジンは画像のピクセル情報だけでは内容を完全に理解できないため、ファイル名・周辺テキスト・構造化データと並んで、代替テキストは検索エンジンの理解を助ける重要な手がかりです。代替テキストを設定すると画像検索での露出が増加し、サイトへのアクセス数の増加につながる可能性があります。

ただし、alt属性単独で順位が激変するわけではなく、コンテンツ全体の質や内部リンク構造などと組み合わせた総合的なSEO対策が必要です。代替テキストはSEO施策として重要ですが、万能薬ではありません。

商品画像の内容を検索エンジンに伝えられる

ECサイトでは、商品画像のalt属性が商品名、カテゴリ、属性（色、サイズ、素材、用途など）を検索エンジンに伝える役割を持ちます。代替テキストは検索エンジンに画像内容を伝え、代替テキストはページ全体の文脈理解を助けます。

alt属性の設定方法

代替テキストを設定する方法には、以下の3つがあります。簡単な順に解説します。

CMSの画像設定画面で入力する

WordPressなどの一般的なCMSでは、管理画面から代替テキストを設定できます。WordPressの場合の手順は次のとおりです。

1. 管理画面の「メディア」→「ライブラリ」を開く
2. 対象の画像をクリックする
3. 右側に表示される「代替テキスト」欄に説明文を入力する
4. 変更を保存する

記事内の画像であれば、ブロックエディタで画像ブロックを選択し、右パネルの「代替テキスト」フィールドに入力する方法もあります。既存記事の画像にも後から代替テキストをまとめて編集でき、CMSによっては一括編集機能が用意されています。

HTMLのimgタグにalt属性を追加する

独自開発サイトやEC-CUBEなどのカスタマイズでは、HTMLを直接編集して代替テキストを記述します。用途に応じた記述例を示します。

<img src="bag-black.jpg" alt="黒いレザーのメンズビジネスバッグ">

Shopifyの商品画像にalt属性を追加する

Shopify管理画面での操作手順は次のとおりです。

1. 「商品管理」→「すべての商品」を開く
2. 対象の商品をクリックする
3. 「メディア」セクションで画像サムネイルをクリックする
4. 画像の詳細画面で「代替テキストを追加」のリンクをクリックする
5. テキストを入力して「保存」をクリックする

コレクション画像やブログ記事の画像も、それぞれの編集画面で同様にalt属性の入力欄があります。テーマエディタ（オンラインストア 2.0）のセクション内画像では、セクション設定パネルから入力できます。

Shopifyではalt属性に最大512文字まで入力可能ですが、スクリーンリーダーの読み上げとユーザー体験を考慮し、125文字以内にとどめましょう。

効果的なalt属性の書き方

画像の内容を具体的に説明する

商品名、例えば「スニーカー」だけでは情報が不足するため、購入判断に関わる要素を具体的に盛り込むようにします。

• 悪い例：「白いスニーカー」
• 良い例：「白いキャンバス地のローカットスニーカー（レディース）」

EC商品画像では、色・素材・形状・対象ユーザーなど、画像から視覚的に分かる情報をテキスト化することが重要です。ただし、サイズ表の全データや利用規約のような長文情報はaltではなく、本文やHTMLテーブルで提供します。

複数の商品が写ったコーディネート写真やセット販売画像では、そのページで伝えたい主役商品を軸に説明しましょう。

簡潔でわかりやすい文章にする

代替テキストは1～2文で簡潔に記述します。目安としては50〜80文字前後、最大でも125文字程度に収めるのが実用的です。

冗長な修飾語や主観的な表現は削り、事実ベースで記述します。

• 悪い例：「とてもおしゃれでかわいくて大人気の花柄ワンピース」
• 良い例：「ピンクの花柄マキシ丈ワンピース（レディース、Aラインシルエット）」

日本語では句読点の位置で読み上げのリズムが変わるため、自然な文章構造を意識しましょう。PC・スマホ・スクリーンリーダーそれぞれで確認し、長すぎる場合は本文側に説明を移すのがよい運用です。

周辺テキストと同じ内容を繰り返さない

見出しや本文にすでに書かれている情報（商品名・ブランド名など）を、alt属性でそのまま繰り返すのは非効率です。代わりに、補足情報や視覚的な特徴を中心に書きましょう。

たとえば商品ページタイトルが「Shopify Originals コットンTシャツ／ホワイト」の場合、altでは「白いコットンTシャツの胸元に黒いShopifyロゴがプリントされている様子」など、画像固有の視覚情報を加えます。

一方、ロゴ画像やボタンアイコンのように周辺テキストがない場合は、代替テキストだけで意味を完結させる必要があります。SEO目的で同じキーワードを機械的に繰り返すと、キーワードスタッフィングと見なされるリスクがある点にも注意しましょう。

キーワードを自然に含める

alt属性に商品名やカテゴリ名を含めること自体は有効です。ただし、キーワードは自然に含めるべきであり、詰め込みすぎは避けるべきです。

• 悪い例：「レディース ワンピース 通販 安い 送料無料」
• 良い例：「2026年春夏向けの花柄マキシ丈ワンピース（ネイビー、レディース）」

検索されやすい語を自然な日本語の文章の中に1〜2回含めるパターンが理想です。越境EC向けに多言語ページを運営している場合は、各言語のユーザーが実際に検索するキーワードでalt属性を書き、機械翻訳のまま放置しないよう注意してください。

キーワードを詰め込みすぎない

Googleの検索スパムポリシーでは、キーワードの不自然な詰め込みが順位低下やインデックス削除のリスクにつながると説明されていますが、alt属性も例外ではありません。

• 悪い例：「Shopify Tシャツ, Shopify EC, Shopify オンラインストア, Shopify ロゴT, Shopify 公式」

このような羅列をスクリーンリーダーで聞いた場合、意味が通じず、ユーザーに不信感を与えます。

装飾目的の画像にはalt属性を入れない

背景パターン、区切り線、箇条書きの矢印といった装飾画像には情報伝達の役割がないため、空にしていても問題はありません。このような要素には、alt=""（空alt）を設定します。

ECサイトの商品画像でalt属性を書くポイント

ここでは一般的なalt属性の原則を、ECサイトの商品画像に特化して落とし込みます。アパレル、食品、インテリア、コスメなど、日本のオンラインショップで多いジャンルを想定し、何をどこまで書くと購入判断に役立つかを解説します。

数百〜数千SKUを扱うShopifyストアでは、alt属性のテンプレート化やバルク編集も視野に入れ、効率と品質のバランスを意識しましょう。EC撮影ガイドと合わせて読むと、撮影段階からalt属性を意識した運用が可能です。

商品名やブランド名を必要に応じて含める

商品一覧ページや指名検索を意識するページでは、商品名やブランド名（企業名）をalt属性に含めると効果的です。一方、商品詳細ページでは見出しに商品名が表示されているため、altでは視覚的な特徴を中心に書く方が情報の重複を避けられます。

マルチブランドECの場合、ブランド名を入れることで「〇〇（ブランド名）　スニーカー」のような指名検索にも対応しやすくなります。ロゴ単体の画像であれば「Shopify ロゴ」のようにシンプルな記述で十分です。

色、素材、形状、用途などを具体的に書く

購入検討に直結する属性情報を優先して記述しましょう。

• アパレル：「ネイビーのリネンブレンドテーパードパンツ（メンズ、ビジネスカジュアル向け）」
• 食品：「北海道産小豆を使ったどら焼き3個セット」
• インテリア：「オーク材の北欧風ダイニングチェア」

画像から視覚的に分かる要素＋購入判断に影響する要素を優先的に書くのが判断基準です。カラー名や素材名は、ユーザーが検索に使いやすい一般的な日本語表現を優先してください。

商品の特徴が伝わる表現にする

単なる属性列挙ではなく、「防水」「軽量」「オーガニックコットン」「日本製」など商品の特徴やベネフィットを短く織り込むと、alt属性の情報密度が上がります。

• 例：「撥水加工を施した軽量ナイロンのトートバッグ（ブラック、A4対応）」

セールやキャンペーン用の画像では「2024年夏のサマーセール 20%オフ」のように、ユーザーにとって重要な情報を簡潔に伝えます。ただし、キャッチコピーや感情的表現は本文側で展開し、alt属性では画像が何を示しているかに集中しましょう。

同じ商品の複数画像には異なる説明を入れる

同じ画像でも文脈によって適切なalt属性は異なります。1商品に複数画像がある場合は、各画像の役割に応じて書き分けます。

画像	alt属性例
正面全体	ネイビーのリネンテーパードパンツ正面
背面	テーパードパンツの背面。ポケットのステッチが見える
素材拡大	リネンブレンド素材の織り目のクローズアップ
着用イメージ	ジャケットと合わせてビジネスカジュアルに着こなした全身コーディネート

すべてに同じ商品名だけを入れると、スクリーンリーダー利用者はどの画像がどのアングルか区別できません。

商品ページの文脈に合わせて書く

同じ画像でも、置かれるページの文脈によって適切なalt属性は変わります。たとえば同じスニーカー画像を「新作一覧」に使う場合は「2024年秋の新作キャンバススニーカー（ホワイト）」、「ランニングの始め方」というブログ記事内では「初心者向けの軽量ランニングシューズ」のように書き分けます。

リンク付きバナー画像の場合は、「バナー画像」ではなくリンク先が伝わる表現（「夏の新作サンダル特集ページへ」など）にするのが適切です。イラストやスクリーンショットをブログ記事に挿入する場合も、その文章の説明を補う文脈に合わせて記述してください。

alt属性を設定するときの注意点

ここまでの内容を実務で運用する際に、見落としやすいポイントをまとめます。

長すぎる説明を避ける

理想は50〜80文字前後、最大125文字程度です。商品の特徴やレビュー内容をすべてaltに押し込むのは避け、詳細は本文や箇条書きに分散させます。

地図やインフォグラフィックのような複雑な画像ではaltで概要だけを示し、詳細は別途テキストや表組みで提供しましょう。ECのサイズ表や料金表を画像で掲載している場合は、可能な限りHTMLテーブルでも情報を提供するか、テキストの補足を用意すべきです。

重要な情報を画像だけに入れない

セール期間、価格、クーポンコード、送料条件、特定商取引法に基づく表示などの重要情報を、画像内の文字だけに頼るのは避けましょう。「バナー画像の中にだけ書かれたクーポンコード」はよくある失敗パターンです。

これらの情報は必ずHTMLテキストとしても掲載し、画像のalt属性では概要を簡潔に伝えます。スマホ画面の小ささ、画像解像度の問題、翻訳やコピー＆ペーストの利便性など、テキストで提供するメリットは多くあります。

定期的に商品画像のalt属性を見直す

商品ラインナップの入れ替えやシーズンの訴求変更に合わせて、alt属性も定期的に見直しましょう。古いキャンペーンバナーのalt属性が「2026年冬のセール」のまま残っているのはよくあるミスです。

Googleサーチコンソールの画像検索レポートを活用し、どの画像から検索結果経由で流入があるかをチェックしながら改善サイクルを回すのが効果的です。商品登録フローに「alt属性のチェック」を組み込み、テンプレートや教育用マニュアルで運用負荷を抑える工夫も取り入れてください。