图片 SEO：优化图片以提升搜索引擎表现

无论你是在撰写新的博客文章，还是在制作产品页面，很可能都会问自己的页面是否需要图片。答案永远是“是的”。图片能让页面焕发生机，并有助于提升网站的 SEO。别担心；我们会帮助你迅速找到合适的图片，并对其进行 SEO 优化。

目录

• 优化图片
• 始终使用图片
• 让图片出现在 AI 搜索结果中
• 寻找合适的图片
• 准备文章中要使用的图片
• 将图片添加到文章中
• XML 图片站点地图
• 通过图片 CDN 提供图片
• 图片 SEO 总结

关键要点

• 图片能增强网站吸引力，并通过帮助搜索引擎更好地理解内容来提升 SEO。
• 使用高质量视觉素材、描述性文件名以及 WebP 或 AVIF 等适当格式来优化图片。
• 为提升无障碍性和 SEO 而添加替代文本，但应避免关键词堆砌；替代文本应准确描述图片内容。
• 使用图片结构化数据，提高在 AI 驱动的搜索结果和图片搜索中的可见度。
• 实施响应式图片，减小文件大小，并考虑使用图片 CDN 来提高加载速度和性能。

优化图片

图片的作用不只是让内容看起来更美观。它们能帮助搜索引擎理解你的页面，提高页面被发现的机会，甚至能从视觉搜索中带来流量。

本指南涵盖了你优化图片 SEO 所需的一切。你将获得有关选择合适格式、编写有效替代文本以及有效使用结构化数据的实用建议。按照这些步骤操作，你的图片表现将大幅提升。

始终使用图片

如果使用得当，图片能帮助读者更好地理解你的文章，或更直观地了解你提供的产品或服务。老话说“千言万语不如一张图”，这或许不适用于 Google，但当你需要给 1,000 个乏味的词语增添趣味、用图表说明含义，或让社交媒体帖子更吸引人时，它确实很有用。

建议很简单：为你撰写的每篇文章或创建的每个页面添加图片，使其更具吸引力。随着搜索格局快速变化，不再仅仅依赖文字，为页面添加视觉素材可能提升这些页面的表现。

视觉搜索也是其中重要的一环。随着 AI 和其他多媒体技术不断发展，优化图片（以及视频）能让搜索引擎和用户更容易找到你。拥有独特、高质量图片的页面通常互动效果更好，用户停留时间也更长。

Google Lens 每月处理超过 200 亿次搜索。如果不为视觉搜索优化图片，你将错失吸引这部分流量的巨大机会。

Google 图片

Google 图片帮助人们在整个网络上查找视觉内容。它会展示图片，并按相关性、质量和上下文进行整理。搜索时，它会显示缩略图，但点击图片可能会进入图片所在的网页。对于网站所有者来说，Google 图片可以成为流量来源，因为经过优化的图片可能在这里获得排名，并为你带来访问者。它还支持反向图片搜索，让用户能够查找相似图片或确定某张图片在线上出现的位置。

Google Lens

Google Lens 让你只需一张图片即可搜索周围的世界。将相机对准某个物体、地标或产品，它就能识别该对象、查找相似商品，甚至实时翻译文字。对企业而言，这意味着如果图片优化得当，就能为你带来流量。要在 Lens 中获得良好展示，请使用高质量的原创图片，配备清晰的替代文字和结构化数据。Google 会将图片中看到的内容与它所了解的页面信息进行匹配。带有清晰元数据的原创、细节丰富图片表现最佳，因此应避免泛用的图库照片，专注于真正呈现你内容的视觉素材。

让图片出现在 AI 搜索结果中

AI 搜索结果（如 Google 的 AI Overviews 和 AI Mode）正在改变人们查找信息的方式。这些系统会利用图片回答问题，因此优化视觉素材有助于其出现在 AI 生成的回复中。

好消息是，大多数图片 SEO 最佳实践同样适用于 AI 搜索。清晰、描述准确的替代文字能帮助 AI 理解你的图片，就像它能帮助屏幕阅读器一样。诸如 ImageObject 这样的结构化数据可为 AI 系统提供额外上下文，以便解读和引用你的视觉素材。高质量的原创图片同样表现更好，与传统搜索中的情况一样。

若要获得最佳效果，请专注于你在图片 SEO 中采用的同一套策略。使用详细的替代文字，提供结构化数据，并确保图片质量高且内容相关。AI 系统通常会调用已编入索引的图片，因此请确保你的图片已被 Google 图片编入索引。

查看 Google Search Console，了解你的图片表现如何。如果你的图片已经针对 SEO 进行了优化，那么很可能也已经为 AI 搜索做好了准备。不过，随着 AI 持续发展，请继续完善这些做法。

寻找合适的图片

使用原创图片总是更好，例如你自己拍摄的高质量照片，而不是图库照片。你的团队页面需要展示真实团队成员的照片，而不是右边的这个人或他其他图库照片中的朋友。

你的文章需要一幅与主题相关的图片。如果只是为了在 Yoast SEO 内容分析中获得一个绿色对勾而添加随机照片，你就做错了。图片应反映文章主题，或在文章中发挥说明作用。此外，尽量将图片放在相关文字附近。如果有一张核心图片，或有一张你希望获得排名的图片，应尽可能将其放在页面顶部，但不要显得生硬。所有这些做法都有一个简单的图片 SEO 原理。图片周围的文字越相关，Google 获得的上下文就越多，这有助于它针对相关查询进行排名。我们稍后会深入讨论图片 SEO。

替代方案

你的网站上没有任何可用的原创图片吗？还有其他方式可以找到独特图片。 例如，Flickr: Creative Commons 和 Unsplash 都是很棒图片来源，因为你可以使用 Creative Commons 图片。使用这些图片时，记得查看使用限制并注明原摄影师。 我们的博客文章概述了在哪里获取优质图片。

避开 一眼可见的图库照片，但如果坚持使用，请选择那些 看起来更真实的照片。无论你使用什么，可能会发现带有人物的图片往往看起来像图库照片。除非这些照片是你自己拍的——在我们看来，这始终是最佳选择。

照片的替代方案是插图或图表。动态 GIF 也值得一提。如今它们随处可见。

尽管动态 GIF 很受欢迎，但不要过度使用。图像的移动会分散读者注意力，使你的文章更难阅读。此外，同样重要且值得提及的是，由于文件大小可能非常庞大，它们会拖慢页面速度。

准备用于文章的图像

找到合适的图像后，例如照片、插图或图表，下一步就是针对你的网站对其进行优化。在添加图像之前，你需要考虑以下几点：

选择合适的文件名

图像 SEO 始于文件名。你希望 Google 即使不查看图像也能知道图像的主题。因此，请在图像文件名中使用你的焦点关键词。很简单：如果你正在撰写一篇关于巴黎圣母院的文章，并使用了一张展示巴黎日出的照片，那么文件名不应是 DSC4536.jpg。合适的文件名应为 notre-dame-paris-sunrise.jpg。这样，照片的主体（以及或许你的文章主题）就会位于文件名的开头。

选择合适的格式

对于图像而言，合适的格式并不存在。这取决于图像的类型以及你希望如何使用它。简而言之，我们建议：

• 对于较大的照片或插图，选择 WebP。它能带来出色的色彩和清晰度效果；
• 如果想保留图像背景的透明性，请使用 PNG；
• 或者使用 AVIF，因为它能生成高质量效果，且文件大小更小。在这种情况下，你确实需要为不支持 AVIF 格式的浏览器提供 WebP 或 JPEG 备用格式。你可以使用 Squoosh 等工具将图像转换为所需格式。
• 徽标和图标请使用 SVG。借助 CSS 或 JavaScript，你可以管理 SVG 格式的图像。例如，可以在不损失质量的情况下调整其尺寸。

如果你知道大部分受众使用特定浏览器或设备，请查看 CanIuse.com，确认这些浏览器是否支持你偏好的格式。选定正确的名称和格式后，就该调整并优化图像了！

针对图像 SEO 调整尺寸

加载时间会影响用户体验和 SEO。网站越快，用户和搜索引擎访问页面就越容易。图像可能会增加加载时间，尤其是在你上传了一张超大图像却以较小尺寸显示时，例如上传一张 2500×1500 像素的图像，却以 250×150 像素的尺寸显示。

即使显示尺寸小得多，整张图像仍必须加载。因此，请将图像调整为想要显示的尺寸。WordPress 会在上传后自动提供多种尺寸的图像，从而帮助你完成这一操作。遗憾的是，这并不意味着文件大小也得到了优化；那只是图像的显示尺寸。因此，请考虑上传图像时采用的尺寸。

使用响应式图像

响应式图像有助于 SEO。如果你使用 WordPress，默认情况下会自动完成这一操作。图像应带有 srcset 属性，从而可以根据屏幕宽度提供不同图像。这对移动设备尤其有用。

减小文件大小

图像 SEO 的下一步是确保调整尺寸后的图像经过压缩。这样，图像就会以尽可能小的文件大小提供。值得注意的是，WordPress 确实会压缩你上传的图像，但遗憾的是，这种自动压缩往往不足以单独依赖。

当然，你也可以导出图像并尝试不同的质量百分比。我们倾向于使用尽可能高质量的图像，尤其是考虑到移动设备和桌面设备中高分辨率屏幕的普及。

例如，你仍然可以通过移除 EXIF 数据来减小这些图像的文件大小。我们建议使用 ImageOptim 等工具，或 Squoosh、 JPEGmini、jpeg.io、 Kraken.io 等网站。

优化图像后，你可以使用 Google PageSpeed Insights、WebPageTest.org 或 Pingdom 等工具测试你的页面。

提升 Core Web Vitals 中的 LCP

为图像设置 width 和 height 属性，可以让浏览器在图像加载前预留空间。这可以防止布局偏移，并改善你的 Core Web Vitals，包括最大内容绘制（LCP）。

当你在 CSS 中为图像定义 width 和 height 属性时，浏览器可以在图像完全加载前为其分配所需空间。这能让浏览器更准确地呈现内容，并避免意外布局偏移，以免让用户感到困扰。

这样做有一些重要优势：

1. 防止布局偏移：通过设置图像的精确尺寸，你可以为其预留适当空间。这能确保图像加载时页面上的其他内容不会偏移或跳动。用户可以在不受干扰的情况下开始浏览内容，从而获得更好的用户体验。
2. 提升页面加载速度：当浏览器预先知道图像尺寸时，就可以在其他页面元素继续加载的同时为图像分配空间。这有助于优化页面加载速度，尤其是 LCP 指标，因为最大内容元素的空间从一开始就得到了预留。
3. 优化浏览器渲染：了解图像尺寸可以让浏览器更好地进行渲染和绘制。它可以高效分配资源并优化渲染管线，从而带来更流畅、更快速的浏览体验。

你可以使用内联样式，也可以使用 CSS 中针对图像的外部样式表来指定 width 和 height。下面是一个示例：

img {
  width: 500px; /* Set the desired width */
  height: 300px; /* Set the desired height */
}

除了使用固定的像素值，你还可以使用百分比或基于视口的单位（例如 vw、vh）等相对单位，使图像能够响应不同屏幕尺寸。

需要注意的是，在 CSS 中指定尺寸只会设置图像的显示尺寸，而不会改变其实际文件大小。为了优化图像文件大小以加快加载速度，请考虑在将图像上传到网站前对其进行压缩和调整尺寸。

下载优先级

对于页面上最重要的图像，即 LCP 图像，请添加 fetchpriority="high"。这会指示浏览器优先加载该图像，从而改善用户体验和性能。对于出现在页面更下方的图像，请添加 decoding="async"。这能让浏览器在后台解码它们，以免拖慢其余内容的加载。

通过在 CSS 中为图像指定这些元素，你可以改善网站整体的性能、视觉稳定性和用户体验。将这一做法与其他图像 SEO 技术相结合，例如使用适当的图像格式、压缩和延迟加载，可以最大限度地提升网站速度和 Core Web Vitals。

将图像添加到文章中

虽然 Google 识别图片内容的能力不断提升，但你暂时还不应依赖它的功能。关键全在于你是否为图片提供了相应的背景信息，因此请尽可能填写完整！下文将对此进行讨论。

当你的图片准备好使用时，不要随便把它塞到文章的任何位置。如前所述，将图片放在与其相关的文字内容附近会大有帮助。这能确保文字与图片彼此高度相关，而这正是用户和 Google 所偏好的。

图片说明

图片说明是页面中与图片配套的文字。如果查看这里的图片，那就是每张图片下方灰色框中的文字。为什么图片说明对图片 SEO 很重要？人们在浏览文章时会使用图片说明。浏览网页时，人们往往会扫视标题、图片和说明文字。 早在 1997 年，Jakob Nielsen 就写道：

“有助于扫视的元素包括标题、大号字体、粗体文字、高亮文字、项目符号列表、图示、图片说明、主题句和目录。”

你是否需要为每张图片添加说明？不需要，因为有时图片还有其他用途。请决定是否也要将图片用于 SEO。只有在添加说明对访问者而言合理的情况下，你才应添加说明。请优先考虑访问者的需求，不要仅仅为了图片 SEO 而添加说明。

alt 文本

alt 文本（或替代文本标签）会添加到图片中，以便在访客因任何原因无法看到图片时，仍有描述性文字可供阅读。Wikipedia 是这样解释的：

替代文本 （或 alt 文本）是与图片关联的文字，其作用与图片相同，并能传达图片中同样的关键信息。 在读者无法查看图片的情况下，例如他们关闭了网页浏览器中的图片，或者因 视力障碍 而使用 屏幕阅读器 时，替代文本可确保不会丢失任何信息或功能。 缺失或无用的替代文本可能会给视力障碍用户带来困扰。

替代文本旨在提升你网站的可访问性，因此务必为你使用的图片添加替代文本。此外，如有必要，也考虑在该页面的替代文本中加入 SEO 关键词，但不要把每张图片的替代文本都塞满关键词。最重要的是，要描述图片中的内容，让搜索引擎和人们都能理解。围绕图片提供的信息越相关，搜索引擎就越会认为这张图片重要。

不过，请记住，并非每张图片都需要替代文本。相反，应将替代文本视为内容的一部分，并在合适的地方添加。例如，如果图片纯粹用于装饰，那么就不需要替代文本。在这种情况下，添加替代文本对读者没有任何价值。另一方面，如果你使用的是包含统计数据的图片，比如上个月搜索冰淇淋的人数，那么替代文本中就应体现这一点。你可以在 W3 的这篇文章中查找替代文本的指导，也可以查看我们关于优化搜索引擎替代文本的指南。

使用 AI 为你的产品生成替代文本

为每张图片编写替代文本可能会让人感觉工作量很大，尤其是当你的网站有数百张产品图片时。因此，我们开发了 Yoast AI Generate 来生成图片替代文本。该功能现已在 Yoast WooCommerce SEO 和 Yoast SEO AI+ 中提供，它会直接根据你的产品数据，在产品编辑器或 Yoast SEO 批量编辑器中为产品图片生成相关的替代文本。你始终可以审核并批准建议，因此一切尽在你的掌控之中。

title 文本

有些浏览器会在鼠标悬停在图片上时，将标题文字显示为“工具提示”。大多数桌面浏览器会按预期显示标题文字。图片的标题与替代文本相似，许多使用标题的人会复制替代文本。越来越多人干脆不填写标题，为什么呢？下面是 Mozilla 的看法：

“title 存在许多无障碍方面的问题，主要是因为屏幕阅读器的支持非常不可预测，而且大多数浏览器只有在鼠标悬停时才会显示它（例如，键盘用户无法访问）。”

在正文中加入补充信息，比将其附加到图片上更好。

阅读更多：进一步了解 alt 标签和 title 标签的优化 »

添加图片结构化数据

当单纯的 <img> 标签让搜索引擎只能自行猜测时，结构化数据可以让图片信息变得明确：schema.org 标记（如 ImageObject），以及 Article 或 Product 等类型上的 image 属性，都会告诉搜索引擎图片展示的内容及其与页面的关联。在 AI 驱动的搜索体验能够自动选择并引用图片的如今，这一点尤为重要。

对 WordPress 用户来说，好消息是 Yoast SEO 会自动处理大部分工作：它不会只输出图片 URL，而是生成完整的 ImageObject 节点，其中包含标题、尺寸和内容 URL。所有这些信息都会被连接成全站统一的 schema 图谱，将你的特色图片关联到文章 schema，并将产品图片关联到 WooCommerce 商品列表。图片许可元数据（license 和 acquireLicensePage）等功能默认不包含在内，但可以通过 Yoast 的 schema API 过滤器添加。

如果你希望 Google 理解你的图片，需要遵守相关指南。你可以在 Google 的《结构化数据通用指南》中找到所有这些指南。请阅读有关 Yoast 如何使用 ImageObject 的开发者文档。

想进一步了解结构化数据吗？报名参加我们的免费结构化数据培训课程，了解如何为你的页面添加结构化数据！

OpenGraph 与社交分享

此前，我们介绍过使用图片进行社交分享。如果你将下面的图片标签添加到页面 HTML 的  <head> 部分，如下所示：

<meta property="og:image" content="https://example.com/link-to-image.jpg" />

这样可以确保该图片会包含在你分享到 Facebook 或 X 的内容中。OpenGraph 也用于 Threads、Pinterest 和 LinkedIn 等其他社交媒体平台。甚至 Slack 等生产力软件也支持 OpenGraph。

Yoast SEO 提供了一个 Social media appearance 部分，你可以在其中设置社交帖文预览；在 Premium 版本中，还可以进行 preview。请务必使用高质量图片，例如你在帖子中使用的原始图片，因为社交平台通常会使用质量更高、尺寸更大的图片。

XML 图片站点地图

作为 Web 开发者，你可能想知道 XML 图片站点地图。我们更愿意将其描述为 XML 站点地图中的图片。Google 对此有明确的说明：

图片站点地图是一种告诉 Google 您网站中其他图片的方法，尤其是那些我们可能无法通过其他方式找到的图片（例如您的网站通过 JavaScript 代码访问的图片）。您可以创建独立的图片站点地图，也可以在现有站点地图中添加图片站点地图标签；对于 Google 而言，这两种方式都同样可行。图片站点地图基于通用站点地图，因此 通用站点地图最佳实践 同样适用于图片站点地图。我们还建议您遵循 发布图片的通用最佳实践。

人们时不时会问我们有关 XML 图片站点地图的问题。我们的插件不会生成此类站点地图，而是遵循 Google 的建议，将其包含在页面或文章站点地图中。只需向下滚动我们的 文章站点地图，您就会看到我们已为所有文章添加了图片（其中有一列专门用于此目的）。在 XML 站点地图中添加图片有助于 Google 索引您的图片，因此请务必这样做，以改善图片 SEO。

通过图片 CDN 提供图片

我们都知道，CDN 是最常用于提升网站速度的优化手段之一。一些提供 CDN 的公司还提供专门用于图片的 CDN。图片 CDN 围绕一些基本任务构建：优化您的图片，并以尽可能快的速度将其交付给访客。使用图片 CDN 可以大幅加快图片交付速度，因为图片会自动优化，并从距离访客更近的服务器提供

图片 CDN 可让您处理图片的转换、优化和交付。您可以决定加载什么内容以及加载方式。例如，您的图片可以即时转换为现代格式，并向支持 AVIF 的浏览器提供 AVIF；如果需要，则依次回退到 WebP 和 JPEG，因为这些格式在质量相当或更好的情况下加载速度快得多。

有多种图片 CDN 可供选择，例如 Sirv、Cloudinary 和 Imagekit。Cloudflare 等平台还可让您决定如何调整图片大小、重新格式化并提供图片。

图片 SEO 摘要

图片 SEO 是多个要素的综合。随着 Google 每天都在更好地识别图片中的元素，确保图片及其元素有助于打造良好的用户体验和 SEO 是理所当然的。试图糊弄 Google 是愚蠢的。

在文章中添加图片时，请注意以下事项：

• 使用与文本相匹配的高质量、独特且相关的图片
• 为您的图片选择一个好的文件名
• 使用 WebP 和 AVIF 等现代图片格式
• 确保图片尺寸与显示的图片大小相符
• 尽可能使用 srcset
• 减小文件大小以加快加载速度
• 为您的图片指定 width 和 height
• 如果合适，请添加说明文字，以便更轻松地浏览页面
• 使用恰当的图片替代文本。无需使用标题文本
• 为您的图片添加结构化数据
• 为图片添加 OpenGraph 和 Twitter Card 标签
• 在 XML 站点地图中使用图片
• 通过 CDN 提供图片
• 尽可能提供所有相关信息！

图片不仅有助于 SEO 和用户体验，在转化方面也可能很重要。因此，不要低估图片 SEO 对您网站的重要性！

继续阅读：WordPress SEO：WordPress 网站获得更高排名的权威指南 »

文章《图片 SEO：为搜索引擎优化图片》最初发布于 Yoast。