跳到正文
原文
Yoast 官方博客· Edwin Toonen·· 1 天前编辑评分30

图片 SEO:如何优化 alt text 和 title text

Image SEO: How to optimize alt and title text

编辑导读

Yoast 官方博客说明如何通过描述性、相关的 alt text 提升图片 SEO、无障碍体验及 AI 和视觉搜索中的可理解性。title text 仅为可选提示,通常应将重要信息写入页面正文;WordPress 可在媒体库填写 Alt Text,并将纯装饰图片标记为装饰性。

为您的帖子和产品页面添加图片可以让内容更具吸引力。优质图片能辅助传达信息,并提高图片搜索、视觉搜索和 AI 驱动结果中展示您的机会。不过,您需要正确描述这些图片。替代文本有助于屏幕阅读器、搜索引擎和 AI 理解图片所展示的内容。

目录

  • 什么是 alt 属性和 title 属性?
  • 替代文本与 SEO
  • WordPress 中的 alt 和 title 属性
  • 替代文本、AI 与视觉搜索:机器如何看懂您的图片
  • 使用 AI 编写替代文本,但请检查其成果
  • 进一步了解图片 SEO

关键要点

  • 添加替代文本可以提升无障碍性和 SEO,因为它能帮助屏幕阅读器和搜索引擎理解图片。
  • alt 标签会为视障用户描述图片,而 title 属性可提供可选的工具提示。
  • 为图片使用描述性且相关的替代文本,以增强可搜索性和用户体验。
  • AI 工具可以帮助快速生成替代文本,但务必审阅和编辑建议,以确保质量。
  • 对于视觉搜索,请使用产品详细信息和结构化数据优化替代文本,以增强机器的理解能力。

观看视频,快速了解 alt 和 title 属性。

什么是 alt 属性和 title 属性?

这是一个完整的 HTML 图片标签:

<img src="image.jpg" alt="image description" title="image tooltip">

图片的 alt 和 title 属性通常被称为“alt 标签”或“替代文本”,以及“title 标签”。严格来说,它们不是标签,而是属性,但您不必为此操心。这些属性允许您为图片添加文字描述,从而有助于 SEO 和无障碍性。

本文会使用各种术语。无论我们提到 alt 标签/文本/属性,还是 title 标签/属性,谈论的始终是同两个概念。

替代文本

alt 标签供屏幕阅读器使用;屏幕阅读器是一种帮助视障人士等用户使用的辅助技术。这些屏幕阅读器通过读取 alt 标签来告诉用户图片中有什么。不过,不只是屏幕阅读器会读取替代文本。Google 等搜索引擎也会利用这些信息理解图片的上下文,了解图片展示了什么及其用途。

您使用的图片 应该 带有替代文本。这不仅是为了 SEO ,也是为了无障碍性。否则,使用屏幕阅读器的人将无法知道图片的内容。不过有一点需要注意:并非每张图片都需要替代文本。请将替代文本视为内容的一部分,考虑它对读者的价值,并谨慎使用。纯装饰性图片不一定需要替代文本。而包含统计数据的图片则应使用替代文本说明这些统计数据代表什么。

标题文本

当有人将鼠标悬停在图片上时,title 属性会显示为工具提示。大多数图片都不需要使用它。屏幕阅读器无法可靠地播报 title 属性,移动端用户也看不到它们。如果您有值得分享的信息,请将其放在页面正文中。除嵌入式框架外,title 属性在所有地方都是可选的;在嵌入式框架中,它用作框架的无障碍名称。这是屏幕阅读器用户了解 iframe 内容的唯一方式。图片不需要该属性,因为 alt 已经承担了这一作用。

如果图片没有用途怎么办?

如果你的设计中有一些图片 纯粹 出于设计原因而存在,请将这些图片放在 CSS 中,而不是 HTML 中。如果无法避免这些图片出现在页面中,请为它们添加空的 alt 属性,如下所示:

<img src="image.png" alt="">

空的 alt 属性可确保屏幕阅读器跳过该图片。如果你使用的是 WordPress,可以将图片设置中的“替代文本”字段留空。

提示:使用我们的 SEO 检查工具快速扫描页面,查看有多少图片包含替代文本。

替代文本与 SEO

Google 关于图片的文章中有一节标题为“使用描述性文件名、标题和替代文本”。这并非巧合。Google 非常重视替代文本,并用它来判断图片中有哪些内容,以及这些内容与周围文本有何关联。添加优质替代文本可能很麻烦,尤其是在你使用大量图片时。对于拥有大型产品目录的网站,我们开发了 Yoast AI Generate,可读取你的 产品数据并生成相关的 alt 标签。请验证并应用。

你始终应该 向帖子和页面中添加图片 和 页面 以 使内容更具描述性和吸引力。通过为图片添加替代文本,你可以向屏幕阅读器、AI 平台和搜索引擎用户提供图片内容的文字描述。这能提升可访问性,而加入关键词也有助于搜索引擎和 AI 平台理解你的产品图片。

我们 不是 说你应该把焦点关键词塞进每一个 alt 标签。你的帖子需要优质、高质量且相关的图片,并在合适的情况下让焦点关键词出现在替代文本中。以下是 Google 关于如何选择优质替代文本的建议:

撰写替代文本时,应专注于创建实用、信息丰富的内容,恰当地使用关键词,并结合页面内容来表达。避免用关键词填满 alt 属性(也称为关键词堆砌),否则会恶化用户体验,并可能导致你的网站被判定为垃圾网站。

如果你的图片展示的是特定产品,请在 alt 标签中同时包含完整产品名称和产品 ID,以便更容易找到该产品 Generally,如果某个关键词有助于查找图片中 显示的内容,请尽可能将其包含在 alt 标签中。此外,别忘了将图片文件名改为能描述其内容的名称。

WordPress 中的 alt 和 title 属性

WordPress 让添加替代文本变得很简单。上传图片时,在媒体库中填写“替代文本”字段。如果将其留空,WordPress 会复制文件名,但这样并没有帮助。花点时间编写恰当的描述。必要时,WordPress 还允许你将图片标记为装饰性图片。Yoast SEO AI+ 和 Yoast WooCommerce SEO 可使用 AI 为你的产品图片生成替代文本,直接在产品编辑器或 Yoast SEO 批量编辑器中完成。请审核建议并应用合适的建议

screenshot showing the image block settings in wordpress with an alt text filled in
WordPress 中的图片区块设置,已填写替代文本

替代文本、AI 与图片搜索,以及机器如何看懂你的图片

如今,许多人使用智能手机摄像头在网上搜索物品。他们用手机对准一把椅子或一双鞋,让 Google 帮忙找到它们。搜索中的 AI Mode 支持照片搜索,而 Google Lens 则帮助购物者识别街上的产品。这一切都意味着,你的替代文本比以往任何时候都更加重要。

Google 的 AI 使用计算机视觉分析图像。它擅长识别物体和模式,却难以理解上下文和具体产品细节。你的替代文本可以通过提供图像的额外信息来帮助这些机器“看见”。这样,你就能为 AI 平台提供所需信息,让它们将你的图像与用户的搜索匹配起来。

当你使用 Lens 应用搜索产品时,Google 会将图像中捕捉到的内容与你撰写的描述结合起来。下面是一个例子:如果你的替代文本写着“红色防水跑鞋,10 号,透气网面鞋面”,AI 会将该描述与视觉输入关联起来。因此,当有人搜索“防水跑鞋”或使用 Lens 搜索类似鞋子时,你的图像可能会出现。

AI Overviews 的运作方式也一样。Google 会从整个网络提取图像来为其答案提供说明,并且可能利用你的替代文本来判断哪些图像符合查询条件。因此,优秀的描述能提高你的图像出现在这些结果中的机会。

针对视觉搜索进行优化

下面介绍如何针对视觉搜索进行优化。你可以在我们的图片 SEO 文章中找到更多提示:

撰写能回答“这是什么,以及它为何重要?”这一问题的替代文本。包含产品名称、特征、颜色和上下文。保持自然,甚至不要考虑堆砌关键词。

为你的图像添加结构化数据,向搜索引擎描述你的内容。此外,它还能帮助 AI 平台理解和归类你的图像。

使用具有描述性的文件名,例如,不要使用“IMG_1234.jpg”,而应尝试使用“red-waterproof-running-shoe.jpg”。

测试你的图像,将其上传至 Google Lens,看看会出现什么结果。如果对结果不满意,请调整替代文本并再次尝试。

请记住,目标始终不变。你正在帮助机器像我们人类一样理解你的图像。做好这一点,你的图像就能出现在更多地方,包括日益增长的 AI 平台列表中。

使用 AI 撰写替代文本,但请检查其成果

我们都知道,为数百张产品图像撰写优质替代文本需要花费大量时间。AI 可以帮助你大幅加快完成这项工作。

AI 替代文本工具使用计算机视觉分析你的图像,并自动生成描述。在产品编辑器或 Yoast SEO 批量编辑器中上传一张咖啡杯的照片。在 Yoast SEO 中添加焦点关键词,AI 就会返回类似“ wooden 桌上的带把手蓝色陶瓷杯”这样的替代文本。

多年来,这项技术迅速改进。如今,优秀的工具可以准确识别产品、颜色、场景、动作等。对于拥有大型目录的电商网站而言,这可以节省大量时间。无需亲自撰写每一条描述,也能清除积压任务。

AI 并非万能

遗憾的是,通用 AI 并不了解你的产品,但我们会读取你的产品数据。它无法判断你的藏青色衬衫是蓝色的,也无法判断模特是否在微笑。它不会区分装饰性图像和承载关键信息的图像。最重要的是,它无法判断自己生成的描述是否对无法看见图像的人有所帮助。

请记住,专家不是 AI,而是你。它生成的结果为你提供了一个良好的起点,但你仍然需要审阅和编辑。在某些情况下,你甚至必须完全重写或重新生成。

将 AI 用于最重要的任务,例如你的产品目录。这样,你就可以专注于为首页主视觉图、落地页以及解释复杂概念的内容撰写尽可能好的替代文本。图表、信息图和截图值得你亲自用文字描述,因为 AI 往往只会为它们生成千篇一律的说明。

保持简单:

  1. 使用 Yoast AI Generate for image alt text 为你的图片生成替代文本
  2. 发布前审查每一条建议
  3. 重写并更正每一条错误的建议
  4. 别忘了在最关键的地方加入你的品牌语气

Yoast SEO AI+ 和 Yoast WooCommerce SEO 可以直接在 Yoast SEO 批量编辑器中为产品图片完成这项工作。你只需添加焦点关键词、生成替代文本,然后审查并批准建议。

AI 的工作速度非常出色,但请运用你自己的判断力。让 AI 负责处理大量内容,同时用你的眼睛和专业知识确保每张图片都能为读者提供帮助。

使用 Yoast AI Generate for image alt text 为你的 WooCommerce 产品添加替代文本

进一步了解图片 SEO

我们有一篇广受关注且内容深入的文章介绍了 图片 SEO。该文章描述了许多优化图片的不同方法,但在 alt 和 title 标签方面相对缺乏细节。可以将本文视为那篇文章的补充。如果你想进一步了解图片 SEO 的良好实践,那篇文章值得一读。

阅读更多:针对搜索引擎优化图片 »

文章《图片 SEO:如何优化替代文本和标题文本》首发于 Yoast。

来源:Yoast 官方博客 · https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/

部分链接为推广/关联链接。