图片 SEO：12 个可落地的技巧（带来更多自然流量）

图片 SEO：如何为搜索引擎和用户优化图片内容与站内优化

图片 SEO 远不止是写几个 alt 标签这么简单——远远不止。有人甚至会主张，随着 Google 近来在机器学习方面的进步，alt 标签已经不再重要。比如，当你把一张……的照片上传到……时，会发生下面这种情况……

第 1 步：填写你的 alt 标签。

第 2 步：……？

图片 SEO 远不止是写几个 alt 标签——远远不止。

有人甚至会主张，随着 Google 近来在机器学习上的进步，alt 标签已经不再重要。例如，当你把一张猫的照片上传到 Google Cloud Vision API——他们的机器学习图像识别工具——时，会发生下面这种情况：

Google 能以近乎完美的准确率判断出这是一张猫的照片。这很了不起。

那么，如果 Google 能理解图片内容，添加 alt 标签到底还有什么意义？图片 SEO 已经死了吗？完全没有。

在本文中，我会逐一介绍 12 个可落地的图片优化技巧，帮你获得更多自然流量。

1. 给图片取恰当的文件名

关于图片文件名，Google 是这么说的：

这是 SEO 入门常识。大多数人都这么做。

这很可能是因为 Google 多年来一直在给出同样的建议。

但话说回来，鉴于 Google 近来在机器学习上的进步，以及他们新获得的图像识别能力，这一点究竟真的有多重要？

好问题。我知道那个猫的例子相当厉害。那我们再换一张图片试试。

Google 有 91% 的把握认为这是奶酪。Google 错了。这是黄油。

我第一个承认黄油和奶酪长得很像，但这个道理依然成立：Google 并不完美——你应该尽一切可能帮助它理解你的图片。

这并不意味着要堆砌关键词。让你的文件名保持描述性且简洁明了即可。

好： dog.jpg差： dog-puppy-pup-pups-puppies.jpg

把图片重命名得更有描述性并不费什么力气。所以这值得一做。

2. 使用有描述性的 alt 文本和图片说明

Alt 文本（alternative text，替代文本）用于描述图片。当用户使用屏幕阅读器时，浏览器会向他们展示 alt 文本。如果图片渲染出现问题，浏览器也会显示 alt 文本。

以下是 HTML 语法：

[['Text', '<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>']]

这个例子直接来自 Google 的官方指南，用来展示一个写得好的 alt 标签应该是什么样子。以下是他们关于如何撰写 alt 标签的一般性建议：

Matt Cutts 在一支虽然老旧但依然适用的视频里，也给出了同样不错的 alt 文本建议：

不过，这里有一个几乎总是完美奏效的捷径——把这句话补全：

“这是一张 __________ 的图片/截图/照片/图画。”

把补全后的句子中的连词或连接成分（例如 a/an）去掉，用最后那部分作为你的 alt 文本。举几个例子：

“这是一张巧克力芝士蛋糕的照片。”[['Text', '<img src="chocolate-cheesecake.jpg" alt="Chocolate cheesecake"/>']]“这是一张我的猫 Mark 玩自己玩具的图画。”[['Text', '<img src="mark-the-cat.jpg" alt="My cat, Mark, playing with his toys"/>']]

在为产品图片撰写 alt 文本时，你可能希望稍微偏离这个公式。对产品图片来说，加上产品编号或序列号会很有用，像这样：

[['Text', '<img src="battery-tender.jpg" alt="Battery tender (022-0186G-DL-WH)"/>']]

Google 并没有官方指南要求你这么做。但这说得通，因为 Google 显然理解产品名称与序列号/产品编号之间的关系。想要证据？看看这个查询的相关搜索：

仅凭搜索产品编号，Google 就知道我们要找的是什么产品。所以把这一点纳入你的 alt 文本，或许能帮助 Google 理解这确实是一张产品图片。

哦，别忘了图片说明（caption）。它们也很重要。

Google 是这么说的：

再回头看看上一张图片，就能看到图片说明的示例。它就是图片下方那段描述其内容的小字。我建议尽可能使用它们。

3. 选择最合适的文件类型

网络上大多数图片都是三种文件类型之一：JPEG、PNG 和 GIF。

它们各自使用不同的压缩方式。这意味着这三种文件类型之间的文件大小可能相差悬殊。这很重要。原因如下：

页面加载时间对 SEO 至关重要。Google 已确认，它既是桌面端也是移动端的排名因素。你的任务是为每张图片选择最合适的文件类型——也就是在质量损失最小的前提下提供最佳压缩效果的那一种。

考虑到这一点，下面这同一张图片分别以 JPEG、PNG 和 GIF 呈现：

你可以看到，JPEG 图片明显胜出。它文件最小，而且与另外两张图片相比，画质几乎没有可察觉的差异。那么 JPEG 总是正确的选择吗？并非如此。

我觉得这张示意图说明了一切：

一般来说，JPEG 是照片的最佳格式，而 PNG 最适合线条图、文字等。GIF 最适合动态图像。阅读这篇文章，了解更多关于这三种格式之间技术差异的内容。

大多数专业图像编辑软件（例如 Photoshop）都会让你选择保存为 JPEG、PNG 或 GIF。你也可以用它们把图片从一种格式转换为另一种。没有专业图像编辑软件？试试这款免费工具。

对于截图，这里有几款支持导出为多种格式的应用：

Skitch (Mac)
Monosnap (Mac, Windows)
Lightshot (Mac, Windows)

4. 按网站尺寸调整图片大小

这是 Ahrefs 博客在我 27 英寸显示器上的样子：

注意到内容两侧有大量留白了吗？那是因为博客内容的最大宽度是 720px。换句话说，无论你的屏幕多大，图片的显示宽度都不会超过 720px。

而构成图片的像素越多，文件就越大。

浏览器会把宽度超过 720px 的图片缩小以适应屏幕（至少在响应式网站代码写得好的情况下是这样）。但重要的是，浏览器仍然必须加载完整尺寸的图片。换句话说，如果我们上传一张 6000px 宽的图片，即便它只以 720px 显示，浏览器依然需要加载整张图。这就很慢。

解决办法是：按你所需的最大宽度调整大小后再上传图片。要注意，这个宽度未必是 720px，它取决于你网站的整体设计。第一步是弄清楚这个宽度。深入了解你的 CSS就能做到。

然后你可以用这款工具批量调整图片大小。

重要的只是宽度，所以批量上传图片后，使用“max width”选项只调整宽度即可。

你应该把 JPEG 和 PNG 分两批分别批量上传。否则，工具会把所有图片统一转换成一种文件类型。你可以在工具里选择 JPEG 或 PNG。针对你正在优化的那一批图片，选用合适的选项。

这款工具很棒，原因有两点：

按最大宽度调整：假设你网站的最大宽度是 700px。你有一堆图片需要调整大小。有些宽于 700px，有些窄于 700px。你不希望把那些较窄的图片调整到 700px，因为那会降低整体画质。这款工具会让那些图片保持原有大小，只调整过宽的图片。
保留文件名不变：你花了很长时间为 SEO 给图片命名。你把它们调整大小并下载调整后的版本。打开 .zip，却发现文件名变成了 image1.png、image2.png。（如果你曾从 Google Docs 下载过图片，就会理解这种崩溃！）这款工具会保留原始文件名，所以调整大小后你无需重命名。

5. 减小图片的文件大小

看看这两张图片：

两张都是 JPEG。两者之间的画质几乎没有可察觉的差异，然而第一张图片比另一张小了 58%（31kb 对 73kb）。

关于为网络优化图片，Google 有一份内容极其详尽的文档。

关于文件大小，关键要点是这个：

为此，Google 推荐了三款开源工具：Guetzli、MozJPEG（由 Mozilla 出品）和 pngquant。你可以在这里阅读他们使用这些工具的指南。不过要注意，这些都是命令行工具。如果你用不惯这类工具，Google 的建议是使用 ImageOptim——一款适用于 Mac 的免费工具。（在这里可以找到 Linux 和 Windows 的替代方案。）

只需把图片拖进去，它们就会被压缩。

你可以在设置里更改压缩级别，甚至启用有损压缩。

它默认还会剥离 EXIF 数据。这有助于进一步减小文件大小——尽管通常幅度不大。如果你不打算使用 ImageOptim，可以用这款免费的网页工具（Google 官方推荐）来剥离 EXIF 数据。

这款工具的效果有多好？我决定做一个小实验。我取了一个包含 15 张图片的小样本——一些是 JPEG，一些是 PNG。我把它们全部以默认设置丢进这款工具。对另外几个替代工具我也做了同样的操作。

以下它们在平均文件大小缩减方面的表现：

Imageoptim：69%（JPEG）。40%（PNG）
Shortpixel：42%（JPEG）。59%（PNG）
Kraken.io：13%（JPEG）。63%（PNG）。
TinyPNG：27%（JPEG）。65%（PNG）。
Optimizilla：27%（JPEG）。60%（PNG）
Imagify.io：6%（JPEG）。1%（PNG）
Compressor.io：42%（JPEG）。58%（PNG）

Imageoptim（Google 推荐的工具）在 JPEG 上表现遥遥领先。但在 PNG 上却是最差的之一。不过，有一点值得注意——ImageOptim 默认的 PNG 质量为 70%。你可以一路调到低至 40%。

这么做的话，PNG 的平均压缩率会提高到 75.6%。这让它成为 JPG 和 PNG 两者综合而言遥遥领先的赢家。

不过，如果沿用上面默认设置的结果，Shortpixel 似乎是最全能的图片压缩工具。

对 WordPress 用户来说这尤其是个好消息，因为有一款 ShortPixel WordPress 插件。每月最多 100 张图片免费。

此外，它还让你可以选择压缩 WordPress 网站上已有的所有图片。列表里的其他工具都做不到这一点。

6. 创建图片站点地图

关于图片站点地图，Google 是这么说的：

你可以在图片站点地图中使用这些标签：

如果你使用 WordPress 和 Yoast SEO，那么图片会自动加入你的站点地图。即便网站把“media”页面设置为 noindex 也是如此。（注意：这现在是 Yoast 最新版本的默认设置。）然而，Yoast 只包含必需的 [['Text', '<image:image>']] 和 [['Text', '<image:loc>']] 标签。如果你在 WordPress 中给图片添加了图片说明，Yoast 并不会把它们加进去。

你需要自己手动把它们加上。

Google 还表示：

如果你用 CDN 来托管图片，这一点值得了解。后面会详细讲。

7. 在合适的地方使用矢量图

关于矢量图，Google 是这么说的：

许多网站用矢量图来做 logo 以及其他简单的站内元素。

SVG（可缩放矢量图形，Scalable Vector Graphics）或许是网络上最流行的矢量格式。它由万维网联盟（W3C）开发，基于 XML。因此，所有现代浏览器都支持它。

无论你用什么浏览器、设备或屏幕分辨率，SVG 看起来都晶莹清晰，因为它不会像素化。你甚至可以把 SVG 显示在一个星球般大小的屏幕上——它也不会损失一丝一毫的清晰度。

以下是 Google 关于优化 SVG 的建议：

SVG 文件应进行压缩精简（minify）以减小体积。
SVG 文件应使用 GZIP 压缩。

他们推荐的 SVG 文件压缩精简工具是 svgo。

不习惯使用命令行界面？可以用这个网页应用或这个 Mac 应用来做同样的事。两者都提供简单的拖拽界面来压缩精简这类文件。我更喜欢那个网页应用。

那张截图概括了关于 SVG 你需要知道的一切。你可以看到，SVG 的原始大小是 8.54kb。这小得离谱。而压缩精简（并 gzip 后）的版本更小，只有 3.56kb——节省了 41.67%。

Gzip 压缩是在服务器层面启用的。换句话说，上面那个 SVG 只有在服务器允许的情况下才会只占用 3.56kb 带宽——否则它会占用 8.54k。

用这款工具检查你的服务器是否启用了 gzip 压缩。如果没有，按这些说明启用它。

8. 提供响应式图片

假设你往网站上传了一张 720px 宽的图片。

如果有人在显示区域小得多的移动设备上访问，比如宽 320px，那么他们的浏览器仍必须加载那张 720px 的图片。那张图片看起来会完全没问题。但一张 320px 宽的图片也同样没问题。

看出问题了吗？加载那张 720px 的图片浪费带宽，只会拖慢页面加载速度。这对 SEO 没好处。

解决办法是使用 [['Text', 'srcset']]。

这是一段神奇的 HTML 代码，它告诉浏览器针对不同的屏幕分辨率加载不同版本的图片。

以下是语法，随后是解释：

[['Text', '<img src="image.jpg" srcset="image-medium.jpg 1000w, image-large.jpg 2000w">']]

语法的第一部分是一个相当标准的 [['Text', '<img>']] 标签。然后我们还加入了指向同一张图片另外两个不同尺寸版本的链接——medium（宽 1000px）和 large（宽 2000px）。

接下来这部分解释，我打算几乎一字不差地借用这篇文章的说法，因为它把这里发生的事解释得非常出色。

假设你在一个屏幕宽度为 320px、且是 1x（非视网膜屏）的显示设备上。你有的图片是 small.jpg（宽 500px）、medium.jpg（宽 1000px）和 large.jpg（宽 2000px）。

浏览器会这样处理：

现在另一个浏览器访问这个网站。它同样是 320px 的显示设备，但它是视网膜屏（2x）。那个浏览器做同样的计算，只是接着会这样处理：

明白了吗？浏览器本质上是选择最高效的图片发送给访客，从而减少带宽占用并改善加载时间。完美。但这是否意味着你需要给所有图片都上传许多不同尺寸的版本呢？不一定。

WordPress 会自动处理好（从 WordPress 4.4 起——你们现在应该都已经在用了）。对于你上传的每张图片，WordPress 默认会生成这些版本：

缩略图（Thumbnail）：正方形裁剪（150px × 150px）。
中等（Medium）：调整大小，使最长边为 300 像素（宽或高）。
中大（Medium Large）：调整为宽 768 像素。
大（Large）：调整大小，使最长边为 1024 像素（宽或高）。
完整（Full）：原始图片。

此外，WordPress 还会自动添加 srcset。

这是我们的博客（运行在 WordPress 上）中它看起来的样子：

再强调一次：那段代码完全由 WordPress 生成。我们并没有上传那张图片的多个版本。

注意，如果你想针对视网膜屏进行优化，可以使用 @2x 语法。还有这款 WordPress 插件，它几乎开箱即用地为此类显示添加支持。话虽如此，除非你对图片压缩做得太狠（即 JPEG 压缩到约 40% 以下），否则你很可能会发现你的“常规”图片在视网膜屏上放大显示效果也完全没问题。反正这是我的经验之谈。

9. 利用结构化数据标记（用于食谱、产品和视频）

结构化数据标记（Schema markup）大概是你更熟悉的、用于 Google 网页搜索场景的东西。它在常规搜索结果里看起来是这样：

但你知道吗，结构化数据标记也可能与图片 SEO 相关？

这是因为 Google 会在移动端图片搜索结果的缩略图上显示相关的徽章（badge）。它们看起来是这样：

关于这些徽章，Google 是这么说的：

目前，Google 支持四种类型的标记：产品、食谱、视频和 GIF。

要确保你的图片在 Google 图片搜索中显示这些徽章很容易。你只需在页面上添加相应类型的结构化数据标记即可。

在食谱页面上添加食谱（recipe）标记。

在产品页面上添加产品（product）标记。

在有视频的页面上添加视频（video）标记。

注意，GIF 不需要任何额外的标记——Google 已经知道它们是 GIF。

当然，除非你的网站上有这类内容，否则你无需操心结构化数据标记。Google 之所以支持这四种内容类型的徽章，很可能是因为他们发现用户经常在 Google 图片中寻找这类内容。

10. 考虑使用懒加载

懒加载（lazy loading）指的是浏览器推迟加载图片（或任何其他对象——视频等），直到它们需要显示在屏幕上时才加载。其他图片则在需要加载时才加载——也就是当你滚动页面时。

关于懒加载，Google 是这么说的：

过去一直有很多争论：懒加载的图片对 SEO 是好还是坏。Google 也发出过自相矛盾的说法。不过，或许 Google 在 2018 年确实推荐懒加载的最佳证据是这个：

这是来自 Google 自己的 PageSpeed Insights 工具的一条建议。

Google 在这里解释了如何实现懒加载（以某种能确保他们看得到懒加载内容的方式——非常重要！）。有几种不同的方法，但它们都涉及 JavaScript。如果你对这些不熟悉或用不惯，或许值得雇一名程序员来帮忙处理。

如果你使用 WordPress——就像我们一样——那么市面上有几款懒加载插件。

它们大多评价不佳。我们最近在 Ahrefs 博客上实现了懒加载（你或许已经注意到），用的是 A3 Lazy Load 插件。目前为止，一切良好。

11. 利用浏览器缓存

浏览器缓存是指图片（以及其他文件）被存储在访客的浏览器中。结果是，当他们将来再次访问你的网站时，加载会更快。

例如，当你进入这篇博客文章时，你必须下载文中所有图片并在浏览器中显示它们。那么，如果没有浏览器缓存，假如你明天想重读这个页面，整个过程就需要从头再重复一遍。

然而，有了浏览器缓存，情况就是你的浏览器会保留其中一些图片。所以当你再次查看这个页面——或类似的页面——时就无需重新下载全部图片。许多图片已经在你的电脑上，因此加载会快得多。

关于浏览器缓存，Google 是这么说的：

如果你的网站能因浏览器缓存而受益，你甚至可能在 Google PageSpeed Insights 中看到这条警告：

那么，如何为你的图片启用浏览器缓存呢？

在 WordPress 中，这相当简单。只需安装一款像 W3 Total Cache 这样的插件。它会默认启用浏览器缓存，并把所需的修改添加到你的 .htaccess 文件中。

对于非 WordPress 用户，你需要手动把这段代码添加到你的 .htaccess 文件中：

[['Text', '<IfModule mod_expires.c>\r\nExpiresActive On\r\n# Images\r\nExpiresByType image/jpg "access 1 year"\r\nExpiresByType image/jpeg "access 1 year"\r\nExpiresByType image/gif "access 1 year"\r\nExpiresByType image/png "access 1 year"\r\n</IfModule>']]

你可以把“1 year”部分改成“1 month”“1 week”“1 day”“1 hour”等等。不过，这些设置对大多数网站来说应该都适用。这也正是 W3 Total Cache 默认使用的值。

在这里了解更多关于浏览器缓存及其工作原理的内容。

重要提示。实施之前，务必确认这段代码与你的服务器兼容。.htaccess 文件有时会相当麻烦。

12. 使用 CDN

大多数网站都从单一位置的一台服务器上提供所有文件（包括图片）。

假设你的网络服务器在英国，那么当英国的用户访问你的网站时，你的图片不必传输很远。然而，对美国的访客来说就是另一回事了。图片必须传输远得多才能到达他们那里。这会降低你网站的加载速度。

内容分发网络（CDN）通过在全球服务器网络上缓存你的文件来解决这个问题。这样一来，当有人访问你的网站时，图片会从离他们最近的服务器加载。

这里有一张来自 CloudFlare 的酷炫 GIF，完美地呈现了这个过程：

市面上的 CDN 有很多。这里仅列举几个：

Cloudflare（提供免费套餐）；
KeyCDN；
Amazon CloudFront（提供免费套餐）；
Google Cloud CDN（提供免费试用）

如果你使用 WordPress，搭建 CDN 很容易。注册你选定的 CDN，按照说明操作，然后用像 W3 Total Cache、CDN Enabler 或 WP Rocket 这样的插件在你的网站上启用 CDN。就这么简单。

不过，值得注意的是，你的 CDN 会有一个类似 xyz.cdnprovider.com 的 URL。

从 SEO 角度看这不太好，原因如下：

你的图片实际上托管在一个独立的域名上。如果有人选择嵌入你的一张图片并链接到你，他们有可能链向 CDN 而不是你的网站。这意味着你错失了一条链接。
如果你将来想更换 CDN 服务商，这会带来麻烦。你将不得不更改（或重定向）你所有的图片 URL 等。

在 CDN 这件事上，John Mueller 的建议是：

出于这个原因，我会建议设置一条 CNAME 记录。把它看作一个别名，用来代替 CDN 服务商分配给你的那个丑陋 URL。这样一来，你的 CDN 可以是 cdn.yourdomain.com，而不是 xyz.cdnprovider.com。

阅读这份指南，了解如何设置它（以及关于 CDN 你通常需要知道的一切）。

附加技巧：从图片反向链接中找回“链接权重”

信息图。GIF。图表。这些都是常常被别人嵌入到自己网站上的可链接资产（linkable asset）。

来看一个例子：

这是来自我们的精选摘要研究的一张图片，被嵌入到了别人的博客文章里。

通常情况下，人们这么做时会链回图片来源，但并非总是如此。有时候人们完全不链接，另一些时候他们直接链接到图片本身（例如 yourdomain.com/yourimage.jpg）。

这个网站正是这么做的。

遗憾的是，这条反向链接实际上被浪费了，因为没有任何 PageRank 传递到页面本身，也无法在我们网站内“流动”。

你可以通过向这些链接者发一条简短的消息，从这些反向链接中找回“链接权重”：

它又快又简单，而且转化率往往高得惊人。

如何找到这类反向链接？很简单。前往：

站点浏览器（Site Explorer） > 输入你的域名 > 选择“domain/*”模式 > 反向链接 > 在“URLs of backlinks”中搜索 .jpg

主动联系，并尝试把其中任何值得的价值转化过来。

你也可以通过搜索 .png 和 .gif 图片来重复这个过程。

如果你使用 CDN，你还可以找到那些链接到托管在你 CDN 子域名上的图片的人。

站点浏览器（Site Explorer） > 输入 CDN 子域名 > 选择“prefix”模式

上面的截图展示了 cdn-backlinko.pressidium.com 的链接档案——这是 Brian Dean 为 backlinko.com 使用的 CDN。它有来自 158 个引荐域名（即独立网站）的 2,300 多条反向链接。

换句话说，有 157 个网站（其中一个是 backlinko.com 自己）链接到托管在该 CDN 上的图片和其他文件，而不是链接到网站本身。

这就是 157 个链接机会。

在我们的链接回收（link reclamation）完整指南中，了解更多类似的反向链接建设策略。

结语

图片 SEO 是一个复杂的主题。Google 在这方面有海量的文档。他们那篇关于自动化图片优化的页面就超过 15,000 字。

正因如此，有必要说明：我并没有在这篇文章里涵盖一切。那是不可能的。如果你想知道全部内容（而且有几周的空闲时间），可以阅读 Google 的文档。本文有意聚焦于那些我认为会带来最大正向 SEO 影响的“大”要素。

请记住，你也应该努力确保图片质量高、能为出色的用户体验做出贡献。这意味着要避开低质量的素材图、让产品图片可以放大查看等等。