Shopify 图片 alt 怎么写,AI 和用户才看得懂 - shopi8 中文建站教程

Shopify 图片 alt 怎么写,AI 和用户才看得懂

摘要

一套 Shopify 图片 alt 文本检查和改写模板,帮助店主把商品图、集合图、博客图和主题输出改到用户与 AI 都更容易理解。

很多 Shopify 店铺会把图片当成装饰:商品图很多,alt 文本空着;文件名还是 IMG_1234;场景图没有说明;集合页图片和页面标题不一致。用户能看图大概猜到意思,但搜索系统、屏幕阅读器和 AI 搜索不一定能把这张图和商品事实连起来。

先给结论:图片 alt 不是堆关键词的位置,也不是把商品标题复制一遍。先判断这张图在页面里承担什么任务:展示主体、说明变体、证明材质、解释尺寸、演示用法,还是帮助用户比较选择。任务说清楚,alt、图片旁边的文字、文件名、结构化数据和页面主题才容易对齐。

Shopify 图片需要和 alt 文本、旁边说明、页面主题一起被理解的路径图
图片不是单独被理解。图像内容、alt、页面文字和结构化数据要讲同一件事。

为什么图片会影响 AI 搜索理解

Google 的图片 SEO 文档明确提到,图片页面的上下文、标题、说明、文件名和 alt 文本都会帮助理解图片主题。Google AI features 文档也强调,重要内容要以文本形式可用,高质量图片和视频应该支持文字内容,结构化数据要和页面可见内容一致。

换到 Shopify 店铺上,问题通常不是“图片不够多”,而是图片没有变成可核对信息。比如一张美妆成分图,如果旁边没有成分表、适用肤质和使用频率;一张服装模特图,如果没有尺码、身高、版型和面料;一张家居场景图,如果没有尺寸、材质和摆放空间,AI 和用户都只能得到很模糊的判断。

先按图片任务写 alt

alt 文本的第一任务是让看不到图片的人也能理解图片。Shopify 官方也建议 alt 保持简短、描述性,推荐控制在 125 个字符以内。对独立站来说,好的 alt 应该回答两个问题:图里是什么,为什么这张图对当前页面有用。

Shopify 图片 alt 文本三段式写法模板图
大多数商品图可以用“主体 + 关键属性 + 使用场景”来写,不需要塞满关键词。
图片任务 差的 alt 更好的 alt
展示主商品 dress dress women fashion 米色宽松棉质连衣裙正面图
说明变体 blue 海军蓝尼龙宠物胸背带侧面细节
证明材质 detail image 磨砂不锈钢咖啡杯杯口近景
解释尺寸 size chart 女式针织上衣 S 到 XL 尺码表
演示用法 product lifestyle 小户型客厅里使用折叠边桌
博客说明图 AI search image Shopify 商品图 alt 检查流程图

Shopify 店铺先查这 6 个位置

不要一开始就把全站图片重命名。先选首页、一个重点集合页、两个核心商品页、一篇高价值博客,用 30 分钟查下面 6 个位置。

Shopify 店铺图片 alt 文本和代码输出的六个检查位置图
图片检查要落到商品主图、变体图、场景图、集合图、博客图和主题代码输出。

位置 1:商品主图不要只写商品标题

商品主图通常会出现在商品页、集合页、搜索结果预览和社交分享里。alt 不要只复制商品标题,也不要写一串品类词。更好的写法是说明主体、颜色、材质、角度或关键差异。

可以套这个结构:

结构 写法 示例
主体 品类或产品名 皮革托特包
关键属性 颜色、材质、规格、角度 黑色荔枝纹正面图
页面任务 适用场景或被说明的细节 通勤容量展示

最终可以写成:黑色荔枝纹皮革托特包正面图,展示通勤容量。不要把品牌名、品类词和型号堆十几遍。

位置 2:变体图要和变体名称一致

很多 Shopify 店铺的变体图 alt 仍然是主商品名,用户切换颜色或尺寸时,图片看起来变了,但 alt 没变。对用户和搜索系统来说,这会让图片和商品变体关系变弱。

先检查这些项:

  • 颜色变体图是否写清颜色,而不是只写商品名。
  • 材质变体图是否写清材质差异,例如棉、真丝、尼龙、陶瓷、硅胶。
  • 套装或容量变体是否写清件数、容量或尺寸。
  • 图片 alt 是否和页面上可见的变体名称一致。
  • 图片旁边是否有文本说明,不要只靠色卡或图片表达重要信息。

位置 3:场景图要解释使用情境

场景图最容易被写成“lifestyle image”。这类 alt 对用户帮助很小,也很难支持 AI 搜索理解。场景图应该说明谁在什么情境下使用什么产品,必要时补空间、肤质、体型、宠物体重、设备型号或使用限制。

不同品类可以这样写:

品类 场景图应该补 示例 alt
服饰 穿着角度、版型、场合 模特穿米色风衣的通勤正面图
美妆 肤质、用量、步骤 干皮用户使用保湿精华的脸颊近景
家居 空间、尺寸、摆放 小户型卧室里的窄款床头柜
宠物 体型、安全、清洗 中型犬佩戴可调节胸背带侧面图
配件小电器 兼容、接口、状态 USB-C 充电线连接平板电脑近景

位置 4:集合页图片要对应品类和选择标准

集合页图片经常是品牌海报,alt 写成“collection banner”。但集合页真正需要解释的是这个品类适合谁、怎么选、有哪些关键差异。集合图的 alt 和集合页标题、集合描述要对上。

例如“敏感肌护肤”集合页,集合图 alt 不要写成“skincare products”。可以写成“敏感肌护肤系列,包含洁面、精华和面霜”。如果集合页里有选择标准,图下方还应该用 HTML 文本说明肤质、使用顺序和不适用情况。

位置 5:博客图要服务正文,不要只做装饰

Shopify 博客常用流程图、检查清单图、对比图和截图。正文图的 alt 应该说明这张图表达的步骤或判断点,而不是把文章标题重复一遍。图下的 figcaption 也应该补一句用户能读懂的说明。

如果是工具截图,alt 写“Bing Webmaster Tools AI Performance 中查看 cited pages 的界面”比“AI 搜索截图”更清楚。如果是原创流程图,alt 写“Shopify 图片 alt 文本检查的六个位置图”就够了。

位置 6:主题代码要真的输出 img 和 alt

Google 图片 SEO 文档提醒,标准 HTML img 元素更利于抓取,CSS 背景图不适合承载重要图片。对 Shopify 主题来说,商品主图、集合图、文章封面和正文图都应该检查前台 HTML。

打开页面源代码或浏览器检查元素,确认这些项:

  • 重要图片是否是 <img>,而不是只放在 CSS background-image
  • alt 是否有内容,且不是整站重复。
  • src 是否有可访问的图片地址,懒加载是否没有影响首屏主图。
  • 图片尺寸是否合理,不要为小卡片加载超大原图。
  • Product 结构化数据里的 image 是否和页面主图一致。
  • 社交分享图或 og:image 是否是当前页面代表图,不是旧 Logo。

Shopify Liquid 的 image_tag 可以默认使用媒体 alt 文本,也可以在主题里覆盖 alt。自定义主题或第三方主题改过图片组件时,尤其要检查输出结果,不要只看后台字段。

可复制的图片 alt 检查表

检查项 通过标准 记录结果
图片任务 知道这张图是展示、证明、解释还是对比。 通过 / 待改
alt 文本 简短描述图像内容,没有关键词堆砌。 通过 / 待改
页面上下文 图片旁边有标题、说明、参数或 FAQ 支持。 通过 / 待改
文件名 短、可读、描述图片主题,不是默认编号。 通过 / 待改
前台 HTML 重要图片输出为 img,并带有合理 alt。 通过 / 待改
结构化数据 Product、Article 或页面主图和可见内容一致。 通过 / 待改
加载速度 图片尺寸、格式和懒加载不拖慢关键页面。 通过 / 待改

Shopify 页面怎么改

商品页先改主图、变体图、尺寸图和材质细节图。进入 Shopify 后台 Products,打开商品媒体,在预览页里补 alt。批量商品可以用 CSV 维护 alt,但不要用同一句套全部图片。

集合页先改集合封面图和集合描述。图片 alt 要和集合标题一致,集合描述里要写清选择标准,比如适合人群、材质、尺寸、肤质、宠物体型或设备兼容性。

博客页先改正文图。每张图用 figure 包住,图片宽度和正文宽度一致,alt 说明图表达的判断点,figcaption 用一句话解释用户应该看哪里。

主题代码先查商品图组件、集合卡片、博客卡片和分享图。重要图片不要只做背景图;如果主题覆盖了 alt,要确认它没有把后台媒体 alt 盖掉。

数据追踪可以先看 Search Console 里的图片搜索表现和页面表现,再结合 GA4 的落地页数据。不要只因为图片搜索没有立刻带来订单,就判断 alt 没价值。alt 先服务可访问性和页面理解,其次才是搜索表现。

常见误区

误区 1:把 alt 当关键词字段

alt 不是关键词列表。关键词堆砌会让用户体验变差,也可能让搜索系统认为页面不自然。用正常人能听懂的描述写清图片即可。

误区 2:所有图片都复制商品标题

同一个商品页里的主图、细节图、场景图、尺码图和包装图任务不同,alt 也应该不同。复制标题只会让图片之间没有差异。

误区 3:只补 alt,不补正文说明

如果图片表达的是尺寸、材质、步骤或对比,页面上也应该有 HTML 文本说明。不要把关键购买信息只放在图片里。

误区 4:把重要图片做成 CSS 背景

背景图适合装饰,不适合承载商品、集合封面、步骤截图和证据图。重要图片应该用标准 img 元素输出,并保留 alt。

误区 5:为了 SEO 把图片做得很大

清晰不等于无限大。商品页和集合页要兼顾加载速度,尤其是移动端。优先使用合适尺寸、压缩格式、响应式图片和必要的懒加载。

FAQ

Shopify 商品图片 alt 要写品牌名吗?

如果品牌名能帮助用户区分产品,可以写一次,但不要每张图都硬塞品牌名。主图可以带品牌和品类,细节图更应该写清材质、角度、颜色或使用场景。

alt 用中文还是英文?

看页面主要服务的用户语言。中文页面优先用中文,英文页面用英文。多语言店铺要让翻译后的页面、alt、集合描述和结构化数据保持一致。

图片文件名一定要改吗?

重要图片建议改成简短可读的文件名,但不必为了历史图片大规模折腾。先改主图、集合图、博客封面和高价值页面里的正文图。

装饰图需要写 alt 吗?

纯装饰图可以使用空 alt,但商品图、集合图、步骤图、对比图、尺寸图和证据图不应该空着。判断标准是:没有这张图,用户是否会少知道一件重要信息。

AI 搜索会直接读取图片 alt 吗?

不能把所有 AI 搜索平台简单归为一种机制。更稳的判断是:图片 alt、页面文字、结构化数据和上下文会共同帮助搜索系统理解页面。先把这些基础信息对齐。

主题已经自动生成 alt,还需要人工改吗?

需要抽查。自动建议可能能补空白,但不一定理解每张图在当前页面里的任务。核心商品、集合封面、对比图和步骤图建议人工检查。

下一步阅读

📢 Share this article

Any other questions?

Our professional team is ready to answer your questions.

Was this article helpful to me?

This article is suitable for all merchants and developers who want to learn about Shopify. Whether you are a beginner just starting out with Shopify or an advanced user looking to improve your skills, you will gain practical knowledge and techniques from it. The methods in this article have all been tested and proven in practice and can be directly applied to your projects.

How can we apply the methods described in the article?

Each step in this article comes with detailed instructions and code examples, which you can directly copy and use. It's recommended to try it in a test environment first to confirm the results before applying it to the production site. If you encounter any problems during implementation, feel free to leave a comment or join our discussion group for help; we and our community members will be happy to assist you.

Can the code in the article be used directly?

Yes! All the code examples we provide have been tested and can be used directly in your Shopify theme. Remember to adjust the parameters and styles according to your actual needs. If you encounter any problems, feel free to leave a message for discussion.

How often will new content be updated?

We publish 2-3 high-quality Shopify tutorials and operational tips every week. Follow our WeChat official account or join our discussion group to get the latest content and exclusive resources first.

Can I get help if I encounter a problem?

Of course! You can leave a comment below the article or join our WeChat group to connect with 1000+ Shopify merchants and developers. We'll get back to you as soon as possible.

Ready to get started?

Follow us to get the latest Shopify tutorials and operational tips.

Join the community Contact Us