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

什么是图片 SEO？

图片 SEO 是优化你网站上图片的过程，让你的页面和图片能在非付费搜索结果中获得更靠前的排名，从而为你的网站带来更多流量。

常见的图片 SEO 策略包括：

• 调整图片尺寸并进行压缩
• 给图片起有描述性的文件名
• 为图片添加替代文本（alt 文本）

图片 SEO 优化之所以有效，是因为它让 Google 等搜索引擎更容易找到并理解你的图片。这意味着它们更有可能在相关搜索查询中展示你的图片（以及图片所在的页面）。

经过优化的图片加载也更快，能帮助用户更快获取所需信息。这两点都是 Google 在给搜索结果排名时看重的因素。

这些也是你的访客会喜欢的。

图片能出现在搜索中的哪些位置？

图片 SEO 的主要好处之一，是它能帮助你的图片出现在搜索结果页面（SERP）中，从而吸引来自用户的宝贵点击。

许多用户会直接使用 Google 图片。以获得这样的结果：

每个月在 Google Lens 上还有数十亿次搜索。Lens 是一款让人们进行视觉搜索的应用——即用摄像头或图片进行搜索。

它会给出这样的结果：

此外，Google 还会定期在标准搜索结果中展示图片。

例如：2024 年 4 月 29 日，Semrush Sensor 显示美国有 55.62% 的标准搜索结果页面包含一个图片包。

就像这一个：

图片结果非常擅长吸引用户的注意力和点击。

但请记住，为图片做 SEO 也能帮助你提升其他排名。

如何为 SEO 优化图片

应用这些图片 SEO 最佳实践，让你的网站对搜索引擎更友好，并提升用户体验。

1. 寻找或创建有用的图片

图片 SEO 优化的第一步，是选择或创建一张能支持你目标的图片。

例如：

• 照片可以展示产品，并分割大段文字
• 平面设计可以传达抽象概念
• 图表和图形可以展示复杂数据
• 图标可以改善网站导航和可用性
• Logo 可以强化你的品牌形象
• 屏幕截图可以提供清晰的说明和示例

尽量自己创建图片，而不是使用图库素材。这样你就能为用户提供独特的价值，并给 Google 更多理由给你排名。

如果你确实要使用别人创建的图片，请确保你拥有必要的授权。否则，你可能违反版权法。

2. 选择合适的图片格式

你可以把图片文件保存或转换为许多不同的格式。

SVG 通常是图标和 Logo 的最佳选择。因为 SVG 可以在不损失质量的情况下调整尺寸，并且可以用 JavaScript 或 CSS（网站编码语言）进行操作。

WebP 是其他类型图片的最佳格式之一。因为：

• 它受到主流搜索引擎、网络浏览器和社交媒体网站的支持（不过一些较旧的浏览器/系统不支持它）
• 它通常能生成比其他格式更小（因而加载更快）的文件
• 它支持透明度和动画
• 它使用有损和无损压缩（有助于在文件大小和图片质量之间取得良好平衡）

然而，SVG 和 WebP 图片可能更难创建和管理。

最好的替代方案是：

• JPEG 用于标准图片
• PNG 用于带透明度、带文字或细节丰富的图片
• GIF 用于简单动画

3. 给图片起有描述性的文件名

Google 会用图片文件名来更好地理解图片所描绘的内容。所以，最佳实践是给你的图片起有描述性（但简洁）的文件名。

例如：

✅ apple-iphone-15-pink-side-view.jpg

❌ apple-iphone-15-latest-model-vibrant-pink-color-side-angle-view-showcasing-camera-lens-and-buttons-2024-release.jpg

❌ IMG00353.jpg

如果你在内容的翻译版本中使用同一张图片，请确保相应地更新文件名。

例如，在你的西班牙语域名上，你可能会使用文件名 iphone-apple-15-rosa-vista-lateral.jpg。

4. 添加描述性的 alt 文本

Alt 文本是存储在网页代码中的一段图片文字描述。

具体来说，它存放在图片标签的 alt 属性中。就像这样：

alt 文本主要用于无障碍访问：文本转语音工具可以朗读这段描述，让视障用户知道图片传达了什么内容。

而且，当页面未能正确加载或加载缓慢时，它也会显示出来。

不过，alt 文本对图片搜索引擎优化也很有用。因为搜索引擎会用 alt 文本来更好地理解图片所描绘的内容。

以下是一些 alt 文本最佳实践：

• 只为功能性图片编写 alt 文本，而不是装饰性图片。这能确保使用辅助技术的人获得更少干扰的体验。
• 描述图片在当前语境中重要的方面。例如，如果你用同一张图表来说明不同的观点，就为每一个实例使用不同的 alt 文本，以清楚地解释你的观点。
• 长度最多保持在 125 个字符以内。一些辅助技术会在这个长度处停止朗读 alt 文本。
• 如果有你的所有读者都需要知道的内容，就把它放在正文内容或图片说明中——而不是 alt 文本里。这样所有人都能获取它。
• 避免使用“image of”（图片）或“photo of”（照片）这类冗余短语。因为已经很清楚 alt 文本指的就是图片。

我们免费的 SEO 检查工具会立即标出缺失的 alt 文本。

要检查你网站上的每一张图片，请使用 Semrush Site Audit。打开该工具，按照提示开始你的审计。

然后，转到“Issues”（问题）报告，在搜索栏中搜索“alt attribute”。以找到“# images don't have alt attributes”（# 张图片没有 alt 属性）这条警告。

点击“# images”查看受影响的图片。

如果某张图片是装饰性的、你不想给它添加 alt 文本，就点击眼睛图标隐藏该结果。

否则，就去你的网站添加图片 alt 文本。（正确的做法取决于你网站的搭建方式。如果需要帮助，请咨询开发人员。）

然后你可以重新运行网站审计，检查一切是否正常运作。

5. 调整图片尺寸

把图片调整到更小的尺寸有助于缩短加载时间，而且不必影响图片质量。

一般来说，网站图片的宽度不需要超过 2,500 像素。

但某张特定图片所需的最大尺寸取决于：

• 容器的最大宽度：如果你的图片放在一个容器中（网页设计中用于管理布局的元素），它的尺寸就不应超过容器的最大尺寸
• 图片的用途：例如，你可能需要大的产品照片，以便用户放大查看细节并看得清楚——但缩略图可以小得多
• 受众的设备：使用 Google Analytics 4 查看你的访客使用什么屏幕分辨率——这样你就知道自己需要照顾哪些尺寸

图片编辑和创建工具（比如 Photoshop）通常让调整图片尺寸变得很容易。

但你也可以使用能自动调整你上传图片的网站插件（例如 WordPress 的 Resize Image After Upload）。

6. 压缩图片

各种工具和插件都能让你压缩图片——即在保持所需图片质量水平的同时减小图片文件大小。

就像这样：

最受欢迎的一些选择包括 TinyPNG、Squoosh 和 GIMP。

无论你选择哪种工具，都需要配置各项设置才能达到理想效果：

7. 使用响应式图片缩放

响应式图片缩放是指网站图片会根据用户视口（屏幕上显示网页的区域）的大小自动调整。

它有助于确保在各类设备上都有出色的用户体验。因为它能防止图片难以看清（例如在移动端太大，或在桌面端太小）。

所以，响应式图片缩放能把加载时间降到最低，因为图片不会比它需要的尺寸更大。而这正是它有利于图片 SEO 的主要原因。

你可以在这里看到响应式图片缩放的实际效果：

你通过使用 CSS 让图片具备响应式。

一些网站搭建工具（比如 Wix）默认使用响应式图片缩放。如果没有，你就需要找一个合适的插件，或请网站开发人员帮忙。

8. 实施延迟加载（Lazy Loading）

延迟加载确保内容在显示到用户视口之前不会被加载。

这意味着初始加载时间只受首屏内容（用户在滚动之前在页面中看到的部分）影响，因此更快。

实施延迟加载最简单的方式，是给图片标签添加 loading="lazy" 属性。

就像这样：

只对在所有设备类型上都出现在首屏以下的图片这样做。否则，你会让页面变得更慢，而不是更快。

9. 创建图片站点地图

图片站点地图是一种专门为图片制作的XML 站点地图。

换句话说，它是一个经过特殊格式化的文件，列出了你希望搜索引擎抓取并索引（即找到并加入可能搜索结果的数据库）的图片。

创建图片站点地图有助于确保搜索引擎机器人在抓取你网站时不会遗漏任何重要的图片。

Google 建议你按如下方式组织图片站点地图：

有许多站点地图生成工具可供你使用。

创建图片站点地图后，使用 Semrush 的 Site Audit 工具检查是否存在任何问题。

只需前往“Issues”报告，搜索“sitemap”。

你会立即看到自己是否有需要处理的错误、警告或提示。

点击“Why and how to fix it”（为何出现以及如何修复）获取关于任何问题的更多信息。

并点击蓝色链接查看详细报告。

10. 使用内容分发网络

内容分发网络（CDN）让你能把图片托管在世界各地的多台服务器上。

这能提升加载速度，因为数据会从离每个用户“最近”的服务器传输，而不是每次都从你的源服务器传输。

“最近”不一定由实际地理位置决定，而是由哪台服务器能更快、更可靠地传输数据决定。

正如下图所示：

要为你的图片实施 CDN，你需要：

• 选择一个 CDN 服务商（例如 Cloudflare 或 Amazon CloudFront）
• 把 CDN 与你的网站集成（例如通过插件）
• 把你的图片上传到 CDN
• 更新你的 DNS 记录，让图片请求经由 CDN
• 修改你网站的 HTML（以及你的图片站点地图），以引用新的图片 URL

你会需要网站开发人员的帮助。

11. 启用浏览器缓存

浏览器缓存是指访客的浏览器把某些文件（如图片）存储一段指定的时间，这样当它们再次被请求时就能更快地加载。

假设一个新用户访问你的首页：

• 如果你网站 Logo 的缓存时间是 365 天，那么当用户点击进入你网站上的另一个页面，和/或在接下来的一年里再次访问你的网站时，它会加载得更快。
• 如果你网站 Logo 没有被缓存，浏览器每次都需要重新下载这张图片。这会消耗更多带宽，并增加服务器必须处理的请求数量。

一般来说，图片可以缓存很长时间，因为它们很少更新。

你可以用 Google Lighthouse 查看你网站上的图片是否被缓存了合适的时长。

安装 Chrome 扩展程序后，选择 Lighthouse Viewer 选项来分析某个特定网页。

12. 应用站内 SEO 最佳实践

站内 SEO是优化页面以在搜索结果中获得更高排名的过程。它也能帮助你页面上的图片表现更好。

首先，写一个有描述性的标题标签。

Google 会查看这个标题来更好地理解你的页面内容。它还会影响与你的搜索结果一同出现的标题链接。

例如，David Austin Roses 为其某个页面使用了标题标签“Apricot & Orange Roses”。

而这个标题会与相应的图片结果之一一同出现：

还要写一个好的元描述。

这是可能出现在搜索结果中的页面摘要。就像这样：

为了降低文字被截断的风险，标题写 50-60 个字符、元描述写大约 105 个字符是个好主意。

想获得更多优化建议，请使用 Semrush 的 On Page SEO Checker。

它会基于最佳实践和对竞争内容的分析，提供量身定制的建议。

13. 添加结构化数据

为你的网站添加结构化数据（也叫Schema 标记）能提高你获得富摘要的机会——即带有图片等吸睛额外元素的搜索结果。

例如，Cooking Classy 使用 Schema 标记来帮助 Google 识别其 funfetti 蛋糕食谱的主要图片、评价、准备时间和配料。

这帮助它获得了像这样的富结果：

你可以用 Schema 来为文章、活动、组织等指定图片。

还有一种 ImageObject Schema，让你可以提供关于图片的额外细节（例如创作者姓名和图片许可的链接）。

这些细节可能会显示在 Google 图片结果中。就像这样：

访问 Google 的指南，了解每种 Schema 类型的详细信息。

实施 Schema 后，运行我们免费的 网站 SEO 检查工具，快速标出结构化数据错误。

要检查它在整个网站上是否正常工作，请使用 Semrush Site Audit。

如果你发现“# structured data items are invalid”（# 个结构化数据项无效）这个错误，就点击进入报告。

然后你就能看到受影响的 URL 和字段，并采取纠正措施。

14. 优化你的 Open Graph 元标签

你可以使用 Open Graph 元标签来确保你的页面在社交媒体网站等各种平台上分享时能被最佳地预览。

每个页面都有四个必需属性：

• og:title 指定预览中应显示的标题
• og: type 指定对象的类型（例如“article”）
• og:image 指定用于预览的图片的 URL
• og:url 指定页面的 URL

你还可以添加许多其他种类的标签。

例如，Semrush 的首页使用了这些 Open Graph 标签：

以下是你在 Facebook 上分享该链接时的样子：

如果你的网站搭建工具不允许你自定义 Open Graph 元标签，你或许可以改用 Yoast SEO 这样的插件。

如果需要帮助，请咨询开发人员。

如何检查你网站上的图片

我们免费的 网站审计会立即标出缺失的 alt 属性。

要检查整个网站上的失效图片、缓慢页面和其他与图片相关的 SEO 问题，请使用 Semrush Site Audit。

设置好你的项目后，转到“Issues”标签页。然后搜索“image”。

你会看到七项检查的结果：

• # 张内部图片失效：链接在你网站上、托管在你域名下的图片无法正常显示——可能是因为文件被删除了
• # 个页面加载速度缓慢：加载缓慢的页面，图片优化不佳可能是其中一个原因
• # 张外部图片失效：链接在你网站上、由外部域名（例如 CDN）托管的图片无法正常显示——可能是因为 URL 拼写错误
• # 张图片没有 alt 属性：图片标签不包含任何 alt 文本的情况
• # 个在 robots.txt 中被屏蔽的内部资源问题：你域名下被 robots.txt 文件屏蔽、因而搜索引擎无法访问的资源（如图片）
• # 个资源被格式化为页面链接：a href 链接中包含的是资源（如图片）的 URL 而非网页 URL 的情况——通常应改用其他标签
• # 个在 robots.txt 中被屏蔽的外部资源问题：另一个域名下被该网站 robots.txt 文件屏蔽、因而搜索引擎无法访问的资源（如图片）

如果你有任何“错误（Errors）”，就点击蓝色链接了解更多。

例如，下面是一份关于内部失效图片的报告。

用眼睛图标隐藏任何不需要修复的问题。

然后，使用复选框和“Send to…”（发送到……）按钮，在 Semrush CRM、Trello 或 Zapier 中创建任务。

处理完任何图片 SEO 的“错误”后，接着处理“警告”，然后是“提示”。

也查看该工具标记出的任何其他问题。它们都是可能对你的 SEO 表现产生负面影响的事项。