Image SEO：图片发现、无障碍与速度实操指南

Image SEO 需要同时完成四件事：图片帮助页面、看不到图片时仍可访问、搜索系统能发现文件，以及用合适质量快速加载。Alt 很重要，但无法修复不相关、被阻挡或过大的 Hero Image。

快速答案：按这个顺序优化

写 Alt 前先分类图片

每个 <img> 都需要 alt 属性，但不一定需要文字。alt="" 会告诉辅助技术忽略装饰或完全重复的图片；遗漏属性可能导致文件名或 URL 被读出。

按照当前页面用途写 Alt

Alt 取决于 Context。同一张照片在 Team Page、案例 或装饰 Banner 上可能需要不同处理。描述用户必须理解或完成的事，不要写文件名、关键词清单或“这是一张图片”。

图片作为链接时，Alt 类似 Anchor Text，应描述去哪里或做什么。title 属性不能代替 Alt。

让图片存在于真正可发现的 HTML

Google 表示可以发现标准 <img> 的 src，包括 <picture> 内的 <img>。Google 不索引 CSS Image。装饰可用 CSS Background；内容、证据与代表图片应使用正常 HTML Image。

如果 JavaScript Gallery 要互动后才把 URL 从 data-src 换出来，必须检查 Rendered HTML 与 Crawler Access。重要图片不应依赖 Click、Login 或被阻挡 Script 才存在。

使用稳定文件名与一致 URL

Google 把 Filename 形容为轻量提示，不是重复关键词的位置。新图片可使用短而描述性的名称，Extension 应符合实际格式。同一图片出现在多个页面时，尽量引用同一个 URL。

不要只为美化 Filename 而更换已经收录的 Image URL。迁移成本可能大于很小的命名收益。

按视觉任务选择格式

Google 目前支持在 Image src 使用 BMP、GIF、JPEG、PNG、WebP、SVG 与 AVIF。没有放诸四海皆准的“最佳格式”或 KB 目标；还要看 Browser Support、画面质量、编辑流程与 Fallback。

含小字的 Screenshot 可能需要 Lossless 或接近 Lossless；照片通常适合 Perceptual Compression。应比较实际输出。

按实际显示位置准备尺寸

CSS 可以把 4,000px 图片显示成 700px，但 Browser 仍可能下载大文件。应围绕真实 Layout Width 与 Device Pixel Density 生成少量有用 Candidate，不要制造大量任意版本。

srcset 列出来源，sizes 描述预计显示宽度，由 Browser 选择。只有需要格式 Fallback 或真正不同 Crop 时才使用 <picture>。

文件到达前预留空间

设置 Intrinsic width 与 height，或提供可靠 Aspect Ratio，让 Browser 预留位置。Responsive CSS 仍可流动缩放；HTML Dimension 描述 Source Ratio，不是强制视觉大小。

LCP 图片必须特别处理

可能成为 Largest Contentful Paint 的图片应在 Initial HTML 可发现、不能 Lazy-load，并尽早开始加载。Measurement 确认是 LCP 后，可测试 fetchpriority="high"；不要全部图片设 High Priority。

Preload 适合 Browser 无法提早发现的真正关键图片。普通 Initial HTML <img> 未必需要。通过Core Web Vitals 指南分别诊断 TTFB、Resource Delay、Transfer 与 Render Delay。

按位置 Lazy-load，不要成为习惯

Native loading="lazy" 适合 Offscreen Image，不是每张图的勋章。页面加载时可见的图片，尤其 LCP，不应等待 Layout 与距离判断。

除非有可抓取 Fallback，否则避免用 JavaScript 把真正 src 隐藏在非标准属性。

把图片放在能解释它的 Context

Google 会利用 Caption、Image Title 与附近文字理解 Subject。相关页面上的相关图片，比在不同文章重复 Generic Stock Photo 更有价值。

不要把唯一重要答案锁在 Screenshot。搜索系统和辅助技术需要 Visible Text，用户也需要复制、翻译与放大。

刻意选择页面代表图片

Google 自动选择 Preview，但可通过 primaryImageOfPage、篇文章 Image 与 og:image 表示偏好。图片应相关、高质量，并在适合时出现在可见页面。

不要每页都用同一个 Generic Logo、不相关 Stock Photo 或极端比例图片。通过Structured Data 流程保持真实一致，并用Content Refresh 流程检查旧图。

用 Image Sitemap 与 CDN 处理发现缺口

Image Sitemap 可让 Google 发现原本难找的 Image URL，但不会让不相关图片排名，也不能代替正常 HTML。只加入 Canonical Page 上有用的 Public Image。

Image Sitemap 可以引用 CDN Domain。实际可行时在 Search Console 验证 CDN Ownership，让 Crawl Error 可被报告。先修复不断改变的 URL、过期签名与 Bot Block。

记录 Ownership、Permission 与 Licensing

能在搜索看到图片，不代表有权使用。记录图片是原创、客户提供、Licensed Stock、Commissioned、Public Domain 或 Generated，并保存 Terms 与 Source Evidence。

Google 支持通过 Structured Data 或 IPTC Photo Metadata 提供 Creator、Credit、Copyright、License 与 Acquire-license Page。不要只为省少量 Bytes 就删除关键 Rights Metadata。

从 Template 到单张 Asset 审核

分别衡量图片结果

Search Console 的 Image Type 代表 Google Images Tab 结果。按 Page、Query、Country、Device 与 Date 分析；不要假设它涵盖所有普通 Web Result 或 Discover 内的图片。

把搜索数据与 Real-user Performance 和业务结果结合。图片即使没有 Image 搜索 Click，也可能因为解释流程、减少客服问题或辅助转化而成功。

常见 Image SEO 错误

• 每个 Alt 都加关键词。
• 装饰图不用空 Alt。
• 信息图缺少 Alt 属性。
• 重点编辑图片只用 CSS Background。
• Lazy-load LCP Hero。
• Small Card 传送原始相机文件。
• 不检查 Mobile 意义就使用同一个 Desktop Crop。
• Preload 或 High Priority 太多图片。
• 每篇 篇文章 都用同一个 Generic Logo。
• 以为 Image Sitemap 能修复 Blocked Image。
• 没有检查法律和 Attribution 就删除 Rights Metadata。
• 只衡量 File Size，不看用途、无障碍与转化。

常见问题

每张图片都要写 Alt 吗？

每个 <img> 都需要 Alt 属性，但装饰和完全重复图片通常使用 alt=""；信息图和功能图需要有用等同意义。

Alt 应该多长？

没有 SEO 字数指标。以能在当前 Context 理解意义或动作的最精简文字为准；复杂内容放在附近 Visible Text。

Alt 要放 Keyword 吗？

使用描述图片所需的自然用词。主题确实出现在图片时会自然包含，不要强塞或重复。

WebP / AVIF 一定更好吗？

通常压缩良好，但仍取决于图片、Quality Setting、Browser Support 与制作流程，应测试实际画面与传输。

图片要控制在多少 KB？

没有统一目标。根据 Rendered Slot、视觉细节、图片数量与真实用户网络建立 Performance Budget。

Hero 要 Lazy-load 吗？

页面加载时可见或可能成为 LCP 就不要。让它提早发现，再衡量 Fetch Priority 是否帮助。

Google 会索引 CSS Background Image 吗？

Google 明确表示不索引 CSS Image。想被发现的有意义图片应使用标准 HTML Image。

需要 Image Sitemap 吗？

重点图片难以发现或网站图片很多时可使用，但它不能代替 Crawlable HTML 与有用 Landing Page。

可以使用 Stock 或 AI 图片吗？

拥有正确使用权并真正帮助页面即可。保留 Provenance 与 License；不要把生成图片伪装成真实客户、结果或事件证据。

怎样衡量 Image SEO？

在 Search Console 筛选 Image 搜索，再结合 Page / Query、Field Performance、Accessibility Review 与 Landing Page 业务结果。

官方参考资料

• Google 搜索 Central: Google Images best practices
• Google 搜索 Essentials
• Google 搜索 Central: Image license metadata
• web.dev: Responsive images
• web.dev: Image performance
• web.dev: Optimize Largest Contentful Paint
• web.dev: Browser-level image lazy loading
• W3C WAI: Alt decision tree
• MDN: The img element
• Ahrefs: Image SEO best practices
• Google Search Console API: 搜索 Analytics query