Shopify 和 B2B 网站图片 SEO 与性能检查清单

图片不只是视觉素材。它会影响搜索理解、页面速度、转化信任和无障碍体验。Shopify 店铺里的产品图、Collection 横幅、变体图、评论图片和活动首屏图，会直接影响用户是否相信这个产品。B2B 网站里的图表、案例图片、团队照片、客户 Logo、资源缩略图和服务页配图，也在承担证明能力的工作。

问题在于，图片通常被设计、开发、内容、SEO 和运营团队分开处理。每个人都接触图片，但很少有人负责最终 QA。这份清单适合在新主题、网站改版、迁移或图片量较大的内容更新上线前使用。

先做一份简单的图片清单。不要只看首页 hero 图和几张产品图。每个模板里的图片类型都要列出来，因为不同图片有不同的 SEO 和性能任务。

一份好用的清单应该写清楚模板、图片角色、来源系统、负责人、固定比例、最低展示宽度、兜底状态，以及移动端展示方式。Shopify 项目要包括产品媒体、变体图、Collection 卡片、博客图片、主题区块图片、徽章、图标和第三方应用图片。B2B 网站要包括服务页配图、案例卡片、资源缩略图、合作 Logo、作者照片、图表、截图和下载资料预览图。

• 把图片标记为收入关键、信任证明、编辑内容、装饰元素或运营素材。
• 记录图片由谁上传：Shopify 后台、WordPress 媒体库、Headless CMS、DAM 或应用后台。
• 标记首屏图片，因为它们可能影响 Largest Contentful Paint。
• 单独列出会进入社交分享、产品 Feed 或结构化数据的图片。

图片 SEO 不是从压缩开始的。文件名、Alt 文本、图注、附近标题、产品名和页面文案，都会帮助搜索引擎理解图片含义。目标是讲清楚，不是把同一个关键词塞进所有字段。

Alt 文本应该根据图片用途来写。产品图要说明产品和关键视觉细节。图表要总结视力正常用户从图里得到的信息。纯装饰分隔图在 HTML 里应该使用空 Alt。客户 Logo 墙如果用于证明信任，可能需要保留品牌名。按钮图标通常应该通过按钮自身的可访问标签表达含义，而不是单独写 Alt。

• 上传前使用描述性文件名，例如产品材质、型号、使用场景或页面主题。
• 避免 image、banner、screenshot、graphic 这类没有信息量的 Alt 文本。
• 多语言网站的重要产品图、服务图和编辑配图，要为每个语言版本写对应描述。
• 确认 CMS 编辑可以自己修改 Alt 文本，不需要每次找开发处理。

很多性能问题不是图片本身错了，而是给错了尺寸。2400px 的桌面首屏图，不应该原封不动发给 390px 的移动端视口。缩略图不应该和完整产品图库共用同一个大源文件。响应式图片规则要和真实布局匹配。

给每一种图片类型定义源图尺寸、生成宽度、文件格式、质量档位和裁切规则。现代 Shopify 和 B2B 网站通常可以优先使用 AVIF 或 WebP，并在需要时提供 JPEG 或 PNG 兜底。具体数值取决于设计，但内容图片可以从 320、640、960、1280、1600、2000px 这些宽度开始规划。

• 使用 srcset 和 sizes，让浏览器根据视口和布局槽位选择合适文件。
• 缩略图要控制预算，很多小图压缩后应该低于 100 KB。
• 首屏 hero 图要和下方图库、卡片图片分开处理。
• 同时测试 1x 和 2x 屏幕，保证清晰度，同时不要传输过大的图片。

首屏最大的图片经常就是 Largest Contentful Paint 元素。它如果加载太晚、造成布局移动，或者被低优先级脚本挡住，页面就会显得慢，即使其他代码很干净也一样。

关键图片要有稳定尺寸、固定比例和可预测容器。真正的首屏主图如果是 LCP 候选元素，就应该使用 preload 或更高优先级。首屏以下的图片可以懒加载，但不要因为插件默认设置，就把主 hero 图也懒加载。还要检查 CLS：没有 width、height 或 aspect-ratio 的图片，很容易在渲染后把内容推开。

• 在首页、产品页、Collection 页、服务页、案例页和文章页上确认 LCP 元素。
• 有意识地设置加载优先级：主图 eager 或 preload，下方内容 lazy。
• 图片加载前就预留空间，避免布局移动。
• 用真实移动网络条件复测，不要只看桌面 Lighthouse 默认结果。

图片应该进入页面的结构化数据和社交分享信息。产品页需要在 Product schema 和商品 Feed 里提供正确图片。文章和案例页需要稳定的 Open Graph 分享图。资源中心需要统一缩略图，否则内部链接看起来会不可信。

QA 时要看渲染后的 HTML，不要只看 CMS 字段。确认图片 URL 可以被抓取，规范 URL 正确，重要图片没有被 robots 规则或防盗链配置误挡。Shopify 项目要检查 Collection 卡片、产品 JSON-LD、变体媒体，以及评论或 UGC 应用注入的图片。WordPress 和 Headless 项目要检查特色图片字段、图片转换、CDN URL 和社交元数据。

• 确认 Open Graph 和 Twitter 图片使用指定封面，而不是页面里的随机第一张图。
• 按需检查 Product schema、Article schema、BreadcrumbList 和 image 字段。
• 确认图片 URL 返回 200 状态码和正确 content type。
• 不要让薄弱的附件页或媒体页被索引，和真正的落地页竞争。

图片迁移很容易悄悄破坏自然流量和用户信任。旧图片 URL 可能消失，文件名可能变化，CDN 转换可能失败，或者低质量缓存版本在上线后继续显示。WordPress 迁移到 Shopify、旧主题迁到 Headless Commerce、CMS 图片服务更换时，都要特别注意。

上线前，用开启图片的方式抓取新旧模板。抽查旧站高价值图片 URL，尤其是有图片搜索排名、进入商品 Feed、或被合作伙伴材料引用的图片。决定哪些旧图片 URL 需要重定向，哪些可以安全 404，哪些必须保留，因为外部系统仍然在引用它们。

• 测试带参数的图片 URL、不同尺寸变体和 CDN transformation 路径。
• 验证长期静态资产的 cache-control，以及活动图片需要快速更新的路径。
• 确认私有 staging URL 或签名 URL 没有被发布到正式 CMS 字段。
• 保留原始源文件，并让维护团队上线后仍然能访问。

如果上线清单没有变成日常流程，图片优化很快就会失效。一张新的活动 Banner、一张供应商照片、一张销售 PPT 截图，或一个资源缩略图，都可能通过一次上传破坏性能预算。

为持续维护制定轻量规则。编辑需要知道最大尺寸、可接受格式、命名方式、Alt 文本要求，以及哪些高影响图片需要复查。开发则应该在主题或组件系统里提供安全默认值，让编辑不需要理解每个响应式图片细节，也能安全发布。

• 把图片检查加入内容发布、产品上传、活动上线和月度维护流程。
• 追踪过大图片、缺失 Alt、失效图片 URL 和速度较慢的图片密集模板。
• 每次主题、插件、应用、CDN 或 CMS 有重大变更后，都重新看一次图片性能。
• 保留一份简短交付表，写清负责人、上传规则、转换规则和复测日期。