alt属性（オルト属性）とは、Webページ上の画像の内容をテキストで説明するための代替テキストです。スクリーンリーダーによる読み上げや、画像が表示されない場合の情報伝達に使われます。Google（グーグル）も、画像の内容を理解するための手がかりとして、これらのテキストを利用します。
本記事では、alt属性の意味やSEOとアクセシビリティへの効果、Shopify（ショッピファイ）での設定方法、ECサイトでの書き方を解説します。商品画像のalt属性を見直したい方は、参考にしてください。
alt属性とは
alt属性とは、画像が表示されない状況でも内容が伝わるように、画像の内容や役割を説明するテキストです。代替テキストは、HTMLのimgタグに指定するalt属性の値として記述されます。alt属性に記述するテキストは「altテキスト」や「代替テキスト」と呼ばれます。
alt属性と画像キャプションの違い
alt属性と画像キャプション（画像の説明文）には、次のような違いがあります。
|
比較項目 |
alt属性 |
画像キャプション |
|---|---|---|
|
表示場所 |
通常は画面上に表示されない。スクリーンリーダーや画像が表示されない環境で使われる |
画像のすぐ下などに表示され、すべてのユーザーが見える |
|
主な対象 |
スクリーンリーダー利用者、検索エンジン |
画像が見えているユーザー全般 |
|
役割 |
画像の代わりに内容や役を伝える情報 |
ユーザーの理解を深める補足情報 |
ECサイトでは、商品ギャラリーにキャプションを表示したり、ブログ記事の写真に一言添えたりするケースがあります。キャプションは画像を見ている人への補足情報です。キャプションだけでは、画像を見られないユーザーに内容が伝わらないため、alt属性も適切に設定します。
alt属性で画像の内容を説明する
alt属性はHTMLのimgタグに指定します。基本的な構文は次のとおりです。
<img src="product.jpg" alt="黒いレザーのメンズビジネスバッグ">
検索エンジンのクローラーやスクリーンリーダーは、画像のピクセル情報だけでは内容を十分に把握できない場合があります。画像の意味を理解する際には、alt属性に記述されたテキストが重要な手がかりになります。
書く内容は画像の種類によって変わります。商品一覧のサムネイルなら商品の色や形、セールバナーなら画像内に書かれた割引率やセール期間、トップページへのリンクになっているロゴなら「ホームへ戻る」のように移動先を書きます。背景の飾り画像や、すぐ近くの本文と同じことを繰り返すだけの画像は、alt=""と空にすることで読み上げの対象から外せます。
alt属性が重要な理由
アクセシビリティを高められる
代替テキストは、Webアクセシビリティを向上させる要素のひとつです。アクセシビリティとは、視覚障害、弱視、色覚多様性など、どのような状況や能力の人でもWebサイトを利用できる状態を指します。
視覚障害のあるユーザーは、商品のイメージ写真やカラー展開を伝えるサムネイルなどを、スクリーンリーダーを通じてテキスト情報を音声で把握します。この際、各画像の代替テキストが画像の代わりに読まれるため、適切に設定することで画像の内容は伝えやすくなります。企業としてアクセシビリティに配慮することは、デジタル庁の「ウェブアクセシビリティ導入ガイドブック」でも強調されています。ブランドイメージの向上や、障害者差別解消法への対応にもつながる大切な取り組みです。
ユーザー体験の向上につながる
代替テキストがあると、画像が見えない場面でもユーザー体験が損なわれにくくなります。画像が正しく読み込まれなかったときは代わりに内容が文字で表示され、スクリーンリーダーの利用者にはそのテキストが読み上げられます。
たとえばセール特集ページで「送料無料」「本日限り10%オフ」といった訴求が画像だけに入っている場合、画像が表示されなければ、その訴求は誰にも伝わりません。本文のテキストでも同じ内容に触れ、alt属性にも書いておけば、どちらかが欠けても情報を伝えられます。
こうした情報伝達によるユーザー体験の向上は、直帰率の低下やサイト滞在時間の改善にも間接的に寄与します。
画像SEOに役立つ
代替テキストは、検索エンジンが画像の内容を判断する材料になります。Google画像検索のガイドラインでも、alt属性を含めることが画像SEOのベストプラクティスとして挙げられています。
alt属性は、ファイル名や周辺テキスト、構造化データなどとともに、画像の内容を理解するための情報として利用されます。適切なalt属性を設定することで、画像検索での露出やサイトへのアクセスにつながる可能性があります。
ただし、alt属性に書くのは、その画像を説明する言葉だけです。関係のないキーワードを詰め込むのは逆効果になる可能性があります。alt属性だけで検索順位が大きく変わるわけではないため、コンテンツの質や内部リンクと合わせて取り組むことが大切です。
alt属性の設定方法
CMSの画像設定画面で入力する
WordPressなどの一般的なCMSでは、管理画面から代替テキストを設定できます。
- 管理画面の「メディア」→「ライブラリ」を開く
- 対象の画像をクリックする
- 右側に表示される「代替テキスト」欄に説明文を入力する
- 変更を保存する
記事内の画像であれば、ブロックエディタで画像ブロックを選択し、右パネルの「代替テキスト」フィールドに入力する方法もあります。CMSによっては一括編集機能が用意されています。
HTMLのimgタグにalt属性を追加する
独自開発サイトなどでは、HTMLを直接編集して次のように代替テキストを記述します。
<img src="bag-black.jpg" alt="黒いレザーのメンズビジネスバッグ">
装飾目的の画像で読み上げを飛ばしたい場合は、alt=""のように値を空にします。
Shopifyの商品画像にalt属性を追加する
Shopify管理画面での操作手順は次のとおりです。
- 「商品管理」→「すべての商品」を開く
- 対象の商品をクリックする
- 「メディア」セクションで画像サムネイルをクリックする
- 画像の詳細画面で「代替テキスト」欄に説明文を入力する
- 「保存」をクリックする
コレクション画像やブログ記事の画像にも、それぞれの編集画面に代替テキストの
入力欄があります。トップページのバナーなどテーマ内の画像は、テーマエディタで該当セクションを選び、画像の下にある「編集」から入力します。
効果的なalt属性の書き方
画像の内容を具体的に説明する
商品名、たとえば「スニーカー」だけでは情報が足りません。色や素材、形状、対象ユーザーなど、購入の判断に関わる要素まで書きます。
- 悪い例：「白いスニーカー」
- 良い例：「白いキャンバス地のローカットスニーカー（レディース）」
サイズ表の全データや利用規約のような長い情報は、本文やHTMLの表で示します。複数の商品が写ったコーディネート写真やセット販売の画像では、そのページで主役となる商品を軸に説明します。
簡潔でわかりやすい文章にする
代替テキストは1〜2文で簡潔に記述し、目安として50〜80文字前後、最大でも125文字程度に収めます。Shopifyでは最大512文字まで入力できますが、上限まで文字を増やすのではなく、画像の内容を簡潔に説明します。
冗長な修飾語や主観的な表現は削り、画像の内容を簡潔に書きます。
- 悪い例：「とてもおしゃれでかわいくて大人気の花柄ワンピース」
- 良い例：「ピンクの花柄マキシ丈ワンピース（レディース、Aラインシルエット）」
日本語では自然な文の区切りを意識し、PCとスマホ、スクリーンリーダーで表示や読み上げを確認しましょう。
周辺テキストと同じ内容を繰り返さない
alt属性には、周辺の見出しや本文と重複しない、画像から読み取れる情報を記述します。すでにページに表示されている商品名やブランド名をそのまま繰り返すと、スクリーンリーダーの利用者が同じ文言を二度聞くことになります。補足情報や視覚的な特徴を中心に書きましょう。
たとえば商品ページのタイトルが「Shopify Originals コットンTシャツ／ホワイト」の場合、alt属性では「白いコットンTシャツの胸元に黒いShopifyロゴがプリントされている様子」など、画像固有の視覚情報を記述します。一方、ロゴ画像やボタンアイコンのように周辺テキストがない場合は、代替テキストだけで意味を完結させます。
キーワードを自然に含める
alt属性には、画像の内容を説明する範囲で、検索されやすいキーワードを自然な文章の中に1〜2回含めます。商品の種類や色、素材、モデル名、用途のように、画像の説明として成り立つ語であればそのまま書いて問題ありません。
- 悪い例：「レディース ワンピース 通販 安い 送料無料」
- 良い例：「2026年春夏向けの花柄マキシ丈ワンピース（ネイビー、レディース）」
越境ECで多言語ページを運営している場合は、各言語のユーザーが実際に検索する語でalt属性を書きましょう。
キーワードを詰め込みすぎない
Googleの検索スパムポリシーでは、検索順位を操作する目的でキーワードを不自然に詰め込む行為をキーワードの乱用として扱っています。こうした行為は検索評価に悪影響を及ぼす可能性があるため、alt属性もキーワードを詰め込むのではなく、画像の内容を自然に説明するために使いましょう。
- 悪い例：「Shopify Tシャツ, Shopify EC, Shopify オンラインストア, Shopify ロゴT, Shopify 公式」
キーワードだけが並ぶ読み上げは、ユーザーが内容を理解しにくく、サイトへの信頼を損なう可能性があります。
装飾目的の画像にはalt属性を入れない
背景パターン、区切り線、箇条書きの矢印といった装飾画像には情報を伝える役割がないため、alt=""（空alt）を設定します。
空altと、alt属性そのものが書かれていない状態は別物です。alt=""は「この画像は読み飛ばしてよい」という意図を伝えますが、属性自体がないとスクリーンリーダーへの指示がなく、ファイル名をそのまま読み上げてしまう場合があります。
ECサイトの商品画像でalt属性を書くポイント
商品名やブランド名を必要に応じて含める
商品一覧ページや指名検索を意識するページでは、商品名やブランド名をalt属性に含めることを検討できます。一方、商品詳細ページでは見出しに商品名が表示されている場合、視覚的な特徴を中心に書くことで情報の重複を避けられます。
たとえば複数ブランドを扱うECサイトでは、ブランド名を入れておくと「〇〇（ブランド名） スニーカー」のような指名検索に対応できます。ロゴ単体の画像であれば、「Shopify ロゴ」という短い記述でブランド名を自然に含められます。
色、素材、形状、用途などを具体的に書く
画像の内容や購入判断に関わる属性情報を優先して記述しましょう。具体的には、次のように書きます。
- アパレル：「ネイビーのリネンブレンドテーパードパンツ（メンズ、ビジネスカジュアル向け）」
- 食品：「北海道産小豆を使ったどら焼き3個セット」
- インテリア：「オーク材の北欧風ダイニングチェア」
このように、色名や素材名はユーザーが検索に使いやすい一般的な日本語で記述しましょう。
商品の特徴が伝わる表現にする
どんな商品なのかを伝えるには、色や形といった属性に加えて、素材や機能などの特徴も簡潔に記述します。
- 例：「撥水加工を施した軽量ナイロンのトートバッグ（ブラック、A4対応）」
セールやキャンペーン用の画像では、「2026年夏のサマーセール 20%オフ」のように、ユーザーにとって重要な情報を簡潔に伝えます。キャッチコピーや購買を促す表現は本文側で展開し、alt属性には画像が何を示しているかを書きます。
同じ商品の複数画像には異なる説明を入れる
同じ画像でも、文脈によって適切なalt属性は異なります。1商品に複数画像がある場合は、各画像の役割に応じて書き分けます。
|
画像 |
alt属性例 |
|---|---|
|
正面全体 |
ネイビーのリネンテーパードパンツ正面 |
|
背面 |
テーパードパンツの背面。ポケットのステッチが見える |
|
素材拡大 |
リネンブレンド素材の織り目のクローズアップ |
|
着用イメージ |
ジャケットと合わせてビジネスカジュアルに着こなした全身コーディネート |
すべての画像に同じalt属性を設定すると、スクリーンリーダー利用者は画像ごとの違いを区別できません。アングルや写っている部位を具体的に記述することで、商品の特徴を伝えられます。
商品ページの文脈に合わせて書く
同じ画像でも、商品ページに置いた場合と、別ページへのリンクとして置いた場合では、書くべき内容が変わります。たとえば同じスニーカー画像を「新作一覧」に使う場合は「2026年秋の新作キャンバススニーカー（ホワイト）」、「ランニングの始め方」というブログ記事内では「初心者向けの軽量ランニングシューズ」のように使い分けます。
画像をリンクとして使うとき、代替テキストはアンカーテキストの役割も果たします。リンク付きバナー画像であれば、「バナー画像」ではなくリンク先が伝わる表現（「夏の新作サンダル特集ページへ」など）にします。イラストやスクリーンショットをブログ記事に挿入する場合も、前後の文章を補う内容にします。
alt属性を設定するときの注意点
長すぎる説明を避ける
商品の特徴やレビュー内容をすべてalt属性に書こうとせず、詳細は本文や箇条書きで伝えましょう。
地図やインフォグラフィックのような複雑な画像では、alt属性で概要だけを示し、詳細は別のテキストや表組みで伝えます。ECのサイズ表や料金表を画像で掲載している場合も、テキストで確認できる表を用意するか、本文で同じ内容を補足します。
重要な情報を画像だけに入れない
セール期間、価格、クーポンコード、送料条件、特定商取引法に基づく表示などの重要情報を、画像内の文字だけに頼るのは避けましょう。画像内の文字だけでは、スクリーンリーダーの利用者に情報が伝わらないことがあります。「バナー画像の中にだけ書かれたクーポンコード」はよくある失敗パターンです。
これらの情報は必ずHTMLテキストとしても掲載し、alt属性には画像の概要を簡潔に書きましょう。
定期的に商品画像のalt属性を見直す
商品ラインナップやシーズンの訴求内容に合わせて、alt属性も定期的に見直します。古いキャンペーンバナーのalt属性が「2025年冬のセール」のまま残っているのは、よくあるミスのひとつです。
Googleサーチコンソールでは、検索タイプを「画像」に切り替えることで、Google画像検索におけるサイトのパフォーマンスを確認できます。数字を見ながら改善のサイクルを回しましょう。あわせて、商品登録の手順に「alt属性のチェック」を組み込んでおくと、あとからまとめて修正する手間を減らせます。よく使う表現をテンプレート化し、社内マニュアルに書き残しておけば、担当者が変わっても品質を保ちやすくなります。
まとめ
alt属性は画像が見えない人に内容を届け、画像が表示されないときに情報を補い、検索エンジンが画像の内容を理解するための手がかりになります。ECサイトでは商品画像の情報が購入判断に必要になるため、1枚ずつ役割に合った説明を書く価値があります。
書き方は、その画像がページで何をしているかで決まります。商品詳細ページの写真なら見出しと重ならない視覚的な特徴を、リンクになっている画像なら移動先が伝わる言葉を、バナーなら訴求内容を簡潔に伝えます。装飾だけの画像はalt=""として読み飛ばす対象にします。画像の役割に応じて内容を簡潔に記述しましょう。
Shopifyでは、商品画像やコレクション画像、テーマのバナーの代替テキストを管理画面から入力できます。無料体験も実施していますので、ぜひご活用ください。
alt属性に関するよくある質問
alt属性とは？
alt属性とは、画像の内容や役割を説明する代替テキストであり、HTMLのalt属性に設定するものです。画像が表示されない場合やスクリーンリーダー利用時に、画像の代わりに読み上げ、表示されます。
alt属性はSEOに効果がある？
alt属性は、直接的な順位要因というよりも、アクセシビリティと画像検索の観点から間接的にSEOに寄与します。Google画像検索での露出増加やページ全体のテーマ理解の向上に役立ちますが、高品質なコンテンツや内部リンク、ページ速度と合わせた総合的な最適化が必要です。
alt属性と画像説明文の違いは？
alt属性はスクリーンリーダーや検索エンジン向けの裏側の情報で、通常のユーザーには直接見えません。画像説明文（キャプション）は画像のすぐ下に表示される表側の情報で、見えているユーザーの理解を深める補足的な役割を持ちます。
