商品画像の代替テキストについて

Topic summary

商品画像の代替テキスト(alt属性)に関する技術的な質問です。

質問内容:

  • 商品画像に代替テキストを設定していないにもかかわらず、ストアの商品詳細ページで商品タイトルが自動的に表示される現象について
  • この動作がどこで設定されているのか、Shopifyのヘルプ等に記載があるか

回答のポイント:

  • 代替テキストは{{media.alt}}というオブジェクトで登録される
  • コードを確認した限り、「メディアの代替テキストがない場合、商品タイトルを表示する」という明示的な処理は見当たらない
  • {{media.alt}}というコード自体がこの処理を含んでいる可能性が高い

提案された対処法:
商品画像を表示するファイル(product~~.liquidなど)内のalt="{{media.alt | escape}}"部分を削除すれば、alt属性自体が非表示になる

質問は未解決の状態で、さらなる情報提供が求められています。

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.

お世話になっております。

商品画像の代替テキストについてお伺いさせていただきたいです。

上記の画像のように、

商品画像に代替テキストが登録されていない場合、ストアの商品詳細ページに表示されるまでの間のどこかで、当該商品画像のaltタグに商品のタイトルが設定されるのでしょうか?

Shopifyのヘルプ等に記載されている内容でしたら恐縮なのですが、

参考となる情報が見つからないので投稿させていただきました。

ご教授の程よろしくお願い致します。

Yuttaさま

フルバランスの園畑です。
ご質問を確認いたしました。

代替テキストを設定していないにも関わらず、商品のタイトルが表示されるのは不思議ですよね。。

商品の代替テキストは{{media.alt}}というオブジェクトで登録されます。

ストアで表示されるまでの間にどこかで登録されるのかについては、確実なことは言えませんが、

パッとコードを見た限り「メディアの代替テキストがなかった場合、商品のタイトルを表示する」という処理は見当たらなかったため、{{media.alt}}というコード自体がこちらの処理を含んでいるのかと存じます。(適当な場所で{{media.alt}}を出力したところ、商品のタイトルが表示されました。)

もし、alt自体を非表示にされたいようでしたら、商品画像を表示するファイル内(「~~product.liquid」 など)にある 「alt=“{{ media.alt | escape }}”」の{{ media.alt | escape }}部分を削除されると良いかと存じます。

ご参考になりましたでしょうか。

私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 園畑

1 Like