谷歌SEO教程第69篇—谷歌图片 SEO 最佳实践

Google 图片可以帮助用户以直观的方式在网络上发掘信息。得益于图片说明、醒目标记等新功能，用户可以获取与图片相关的更多信息，从而快速浏览网络上的信息。

为图片添加更多相关信息可使搜索结果变得更加实用，从而给您的网站带来更多优质流量。您可通过确保自己的图片和网站已针对 Google 图片进行优化（例如，为图片使用 alt 属性或使用结构化数据标记），使您的内容更容易被发现。发布图片时请遵循我们的指南，以提高您的内容在 Google 图片搜索结果中出现的几率。

打造超凡的用户体验

要想提升您的内容在 Google 图片中的曝光度，请以提供出色的用户体验为原则：在设计网页时主要考虑用户，而非搜索引擎。以下是一些建议：

提供适当的相关信息：确保您的视觉内容与其所在网页的主题相关。我们建议您仅在能为网页增添原创价值的情况下展示图片。我们极不赞成在网页中使用非原创的图片和文字内容。
优化放置位置：尽可能将图片放置在相关文字附近。必要时，也可考虑将最重要的图片放置在网页顶部附近。
勿将重要文字内嵌在图片中：避免将文字（特别是网页标题和菜单项等重要的文本元素）内嵌在图片中，因为并非所有用户都能访问这类文本（而且网页翻译工具不适用于图片）。为了尽可能让更多的人能访问您的内容，请使用 HTML 格式提供文本，并为图片提供替代文本。
创建信息丰富的优质网站：对 Google 图片而言，优质的网页内容与视觉内容同等重要，它可以提供背景信息并更能吸引用户点击相应的搜索结果。网页内容可用于为图片生成一段文本摘要，而且 Google 在进行图片排名时会考虑网页内容质量。
创建适合在各种设备上访问的网站：比起桌面设备，用户会更多地使用移动设备在 Google 图片上进行搜索。因此，请务必将网站设计成适合所有类型和尺寸的设备浏览。请使用移动设备适合性测试测试您的网页在移动设备上的运行效果，并获取反馈以了解哪些内容需要修正。
为图片创建良好的网址结构：Google 会利用网址路径以及文件名来理解图片。我们建议您好好组织图片内容，使网址结构合乎逻辑。

检查网页标题和说明

Google 图片会自动生成标题链接和摘要，以充分描述每条结果并表明结果与用户查询有何关系。这可帮助用户决定是否要点击某条搜索结果。下面这两个示例展示了标题链接和摘要在 Google 搜索结果页上可能的显示效果：

我们会使用很多不同的来源生成此信息，例如标题中的描述性信息以及每个网页的 meta 标记。

请遵循 Google 的标题和摘要指南，帮助我们改善为您的网页显示的标题链接和摘要的质量。

添加结构化数据

如果您添加了结构化数据，Google 图片就能以富媒体搜索结果的形式（包括使用醒目标记）展示您的图片，这种做法不仅可为用户提供与您的网页相关的信息，还能为您的网站带来更有针对性的流量。Google 图片支持下面这几类内容的结构化数据：

产品
视频
食谱
图片元数据

请遵循结构化数据常规指南以及专门针对您的结构化数据类型的指南，否则您的结构化数据可能无法在 Google 图片中显示为富媒体搜索结果。对于上述每一种结构化数据类型，您都必须提供图片属性字段，才能在 Google 图片中显示相应标记和富媒体搜索结果。下面这两个示例展示了富媒体搜索结果在 Google 图片上可能的显示效果：

优化网站速度

图片通常是影响整体网页大小的最大因素，可能会导致网页在加载时既速度缓慢又开销巨大。请务必采用最新的图片优化技术和自适应图片技术，以提供优质且高速的用户体验。

您可以使用 PageSpeed Insights 分析网站速度，并访问我们的为什么速度很重要？页面，了解提高网站性能的最佳实践和技巧。

添加高画质照片

与模糊不清的图片相比，高画质图片对用户更有吸引力。另外，搜索结果略缩图中的清晰图片也更能吸引用户，并提高获取用户流量的可能性。

为图片添加描述性的标题、说明、文件名和文字

Google 会从图片所在网页的内容中提取与图片主题有关的信息，包括图片说明和图片标题。请尽可能确保将图片放置在与其相关的文字附近以及与其主题相关的网页上。

同样，Google 也可通过文件名推断图片的主题。尽可能使用简短但具有描述性的文件名。例如，my-new-black-kitten.jpg 比 IMG00023.JPG 更好。尽可能避免使用 image1.jpg、pic.gif、1.jpg 等通用文件名。如果您的网站包含数千张图片，建议您自动为图片命名。

如果要本地化图片，请记得还要翻译文件名；如果您使用的是非拉丁字符或特殊字符，请遵守网址编码指南。

在 `alt` 属性中使用描述性的替代文本

替代文本是一段描述图片的文本，可协助看不到网页中图片的用户（包括使用屏幕阅读器或网络连接带宽偏低的用户）了解图片内容。

Google 会结合使用替代文本与计算机视觉算法和页面内容来理解图片的主题。如果您决定将图片用作链接，图片的替代文本还可作为定位文字发挥作用。

在编写替代文本时，请创建实用、信息丰富的内容，并且内容要恰当使用关键字且与网页内容相符。请避免在 alt 属性中滥用关键字（亦称为关键字堆砌），因为这会导致不良的用户体验，并且可能会导致您的网站被视为垃圾网站。

效果欠佳（缺少替代文本）：

<img src=”puppy.jpg”/>

效果欠佳（关键字堆砌）：

<img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food“/>

效果较佳：

<img src=”puppy.jpg” alt=”puppy“/>

效果最佳：

<img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch“/>

此外，还要考虑替代文本的可访问性，以遵守 W3 准则。对于 <img> 元素，您可以添加该元素的 alt 属性；对于内嵌 <svg> 元素，您可以使用 <title> 元素。例如：

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

我们建议您通过审核无障碍性和使用慢速网络连接模拟器测试您的内容。

帮助我们发现您的所有图片

使用语义 HTML 图片元素嵌入图片

使用语义 HTML 标记有助于抓取工具找到并处理图片。Google 会解析网页中的 HTML <img> 元素（即使这些元素包含在 <picture> 元素等其他元素中），以将图片编入索引，但不会将 CSS 图片编入索引。

效果良好：

<img src=”puppy.jpg” alt=”金毛寻回犬” />

效果欠佳：

<div style=”background-image:url(puppy.jpg)”>金毛寻回犬</div>

使用图片站点地图

通过提交图片站点地图，您可以提供我们可能无法通过其他方式发现的图片的网址。

与一般的站点地图（设有强制性的跨网域限制）不同，图片站点地图可以包含来自其他网域的网址。这意味着您可以使用 CDN（内容分发网络）托管图片。如果您使用了 CDN，建议您在 Search Console 中验证该 CDN 域名的所有权，以便我们能在发现任何抓取错误时通知您。

使用支持的图片格式

Google 图片支持以下格式的图片： BMP、GIF、JPEG、PNG、WebP 和 SVG 。另外，最好让文件扩展名与文件类型相匹配。

您还可以将图片内嵌为数据 URI。数据 URI 提供了一种内嵌图片等文件的方式，可以通过将 img 元素的 src 属性设置为采用 Base64 编码的字符串来实现，格式如下：

<img src="data:image/svg+xml;base64,[data]">

虽然内嵌图片能够减少 HTTP 请求，但需要慎重判断何时使用这种图片，因为这种图片可能会导致网页大小大幅增加。要了解详情，请参阅 web.dev 页面中的“内嵌图片的利与弊”部分。

自适应图片

设计自适应网页可以带来更好的用户体验，因为用户可以在各种设备上使用这些网页。请参阅我们的自适应图片指南，了解处理网站上图片的最佳实践。

网页使用 <picture> 元素或 img 元素的 srcset 属性来指定自适应图片。但是，某些浏览器和抓取工具无法理解这些属性。我们建议您一律通过 src 属性指定后备网址。

借助 srcset 属性，您可指定同一图片的不同版本，特别是针对不同屏幕尺寸。

示例：<img srcset>

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

<picture> 元素是一个容器，用于对同一图片的不同 <source> 版本进行分组。它提供了一种后备方法，让浏览器能够根据设备特征（例如像素密度和屏幕尺寸）选择合适的图片。对于尚不支持新图片格式的客户端而言，picture 元素也非常便于利用内置的优雅降级功能处理新图片格式。

根据 HTML 标准第 4.8.1 节的规定，在使用 picture 元素时，请务必提供 img 元素（带 src 属性）作为后备，格式如下：

示例：<picture>

<picture>
 <source type="image/svg+xml" srcset="pyramid.svg">
 <source type="image/webp" srcset="pyramid.webp">
 <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>