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,还需要人工改吗?

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

下一步阅读

分享这篇文章

阅读说明

这些文章更适合当作排查笔记,而不是万能模板。

这篇文章适合怎么读?

先看结论和步骤,再对照自己的网站情况判断是否适用。涉及代码或后台设置的部分,建议先在预览主题或测试环境里试。

可以直接照着改吗?

有些步骤可以直接参考,有些要看主题结构、App、页面内容和当前业务阶段。不要在正式主题上直接试,先备份或用预览主题验证。

代码片段需要注意什么?

不同主题的 section、snippet 和 CSS 结构不一样。复制代码前先确认文件位置和命名,改完后检查桌面端、移动端和购物流程。

后续还会补充吗?

会。内容会围绕建站流程、主题代码、页面优化、速度排查和工具实测慢慢补,不追热点,优先写实际遇到的问题。

我的情况和文章不一样怎么办?

可以先把网站链接、页面现象和你已经尝试过的操作记下来,再决定是继续自查,还是发来让我帮你判断问题类型。

继续看 Shopify 实操笔记

如果这篇文章解决了一部分问题,可以回到博客列表继续看相关笔记;如果情况不一样,再带着页面和现象来判断。

返回博客列表 发来问题