图像 SEO 完全指南 - 通过 Alt 文本、文件名和尺寸优化提升搜索流量
为什么图像 SEO 重要 - 获取 Google 图片搜索流量
Google 图片搜索占全部搜索流量的 20% 以上。优化图像 SEO 可以从这个巨大的流量池中获取访客,同时改善页面整体的搜索排名。
图像 SEO 的价值:
- Google 图片搜索是第二大搜索引擎
- 图像结果出现在通用搜索结果中 (图像包)
- 优化的图像改善页面加载速度,间接提升排名
- 图像 alt 文本为页面提供额外的关键词信号
Google 如何理解图像: Google 通过 alt 文本、周围文本、文件名、页面标题和结构化数据来理解图像内容。虽然 Google 有图像识别能力,但文本信号仍然是最重要的排名因素。
Alt 属性的最佳写法 - 平衡搜索引擎与无障碍
alt 属性同时服务于 SEO 和无障碍访问,需要在两者之间找到平衡。
写作原则:
- 描述图像内容,而非图像的功能或装饰性质
- 包含相关关键词,但不堆砌
- 简洁明了,通常 5-15 个词
- 不以"图片是"或"这是一张"开头
示例:
- ❌
alt="图片"- 无信息量 - ❌
alt="WebP 格式 图像压缩 Web 优化 性能 速度"- 关键词堆砌 - ✅
alt="WebP 格式与 JPEG 的文件大小对比图表"- 描述性且含关键词
特殊情况:
- 装饰性图像:
alt=""(空字符串,非省略) - 链接图像: alt 描述链接目标而非图像内容
- 图表/信息图: alt 概述关键数据点
- 产品图: 包含产品名称、型号、颜色等
文件名与目录结构 - URL 级别的优化
图像文件名和 URL 路径为搜索引擎提供额外的内容信号。
文件命名规则:
- 使用描述性的英文单词,用连字符分隔:
webp-compression-comparison.jpg - 避免:
IMG_20240101.jpg、photo1.png、untitled.webp - 包含关键词但保持自然
- 全小写,不使用空格或特殊字符
目录结构:
- 按类别组织:
/images/tutorials/、/images/products/ - URL 路径也是排名信号:
/images/webp-format/comparison-chart.webp
文件大小优化:
- Google 偏好加载快的页面,大图像拖慢速度
- 使用 WebP/AVIF 格式减小文件大小
- 压缩质量 75-85 通常是 SEO 的最佳平衡点
结构化数据与图像站点地图 - 向 Google 明确传达信息
通过结构化数据和图像站点地图,主动向 Google 提供图像的详细信息。
Article 结构化数据中的图像:
{"@type": "Article", "image": ["https://example.com/photo-1x1.jpg", "https://example.com/photo-4x3.jpg", "https://example.com/photo-16x9.jpg"]}
提供多种宽高比的图像,Google 会根据展示位置选择最合适的。
图像站点地图:
<url> <loc>https://example.com/page</loc> <image:image> <image:loc>https://example.com/image.webp</image:loc> <image:title>描述性标题</image:title> </image:image></url>
注意: 图像站点地图帮助 Google 发现通过 JavaScript 加载的图像或 CSS 背景图像,这些可能不会被常规爬取发现。
Core Web Vitals 与图像优化 - LCP 和 CLS 解决方案
图像是影响 Core Web Vitals 的最大因素,优化图像直接改善 LCP 和 CLS 分数。
LCP (Largest Contentful Paint) 优化:
- 首屏大图通常是 LCP 元素
- 使用
<link rel="preload" as="image">预加载 LCP 图像 - 不对 LCP 图像使用
loading="lazy" - 使用
fetchpriority="high"提升优先级 - 确保图像 URL 在 HTML 中直接可见 (非 JavaScript 动态加载)
CLS (Cumulative Layout Shift) 防止:
- 始终设置
width和height属性 - 使用 CSS
aspect-ratio预留空间 - 避免图像加载后改变容器大小
INP 考虑: 大量未优化的图像会占用主线程解码时间,影响交互响应。使用 decoding="async" 让图像解码不阻塞主线程。
懒加载与预加载 - 优化加载策略
合理的加载策略确保关键图像快速显示,非关键图像不浪费带宽。
原生懒加载:
<img src="photo.webp" loading="lazy" alt="...">
- 浏览器在图像接近视口时自动加载
- 无需 JavaScript,性能开销为零
- 不要对首屏图像使用 (会延迟 LCP)
预加载关键图像:
<link rel="preload" as="image" href="hero.webp" type="image/webp">
- 告诉浏览器尽早开始下载
- 仅用于 LCP 图像或首屏关键图像
- 过度预加载会适得其反 (竞争带宽)
响应式预加载:
<link rel="preload" as="image" imagesrcset="small.webp 400w, large.webp 800w" imagesizes="100vw">
配合 srcset 预加载正确尺寸的图像,避免下载过大的版本。