如何在 WordPress 中编写完美的图像 Alt 标签

技术教程 2021年11月7日
1293 0

优化图片 alt 标签不仅仅可以改善您的 WordPress 网站的 SEO……事实上，更重要的是，它可以并且将会使访问您网站的每个用户更容易访问您的内容.

人们常说"一张图片胜过千言万语".但是你如何在你的 alt 标签中描述这些图像呢?你需要一千个字吗?您甚至需要使用图片 alt 标签吗?

当我们考虑"alt 标签"(您确实考虑过它们，对吧?)时，我们很少冒险超越将 alt 属性想象为有利于我们网站 SEO 的东西.嗯……这些小狗比眼睛看到的要多得多！我们很快就会看到，替代文本在网络可访问性方面也发挥着重要作用.

在本教程中，我们将了解如何针对 SEO 和可访问性优化 alt 标签，并向您展示如何在 WordPress 中编写完美的图片 alt 标签……每次！

如果你认为一个视频值一千张图片，这里是本教程的总结(注意那些眼睛发疯的小狗)......

想象一下……

您已经为自己或客户设置、配置和优化了 WordPress 网站.

您的网站需要内容.一个好的内容策略是确保您页面上的所有元素都能吸引人类读者和搜索引擎.

在内容中添加合适的图片有助于吸引更多读者，鼓励他们在您的网页上停留更长时间，并强化您的信息.不过，我们还希望确保这些图片能够帮助您在图片搜索结果中获得更高的排名并提高您网站的可访问性.

这是图片替代标签的用武之地.

WordPress image editor: alternative text input field
Alt 标签可让您针对 SEO 和网络可访问性优化图像.

什么是 alt 标签?

"alt 标签"或 alt 属性是一种替代文本，用于描述图像或图像在由于某种原因(例如连接速度慢或 src 属性错误)无法显示时表示的内容，或者用户因视力障碍、浏览网页时关闭图像等原因而无法查看.

Screenshot of WordPress post with images turned off to display alternate text.
当图像未显示在您的网站上时显示替代文本并帮助视障用户.

这种替代文本信息对于在浏览网页时使用屏幕阅读器的人很有用，因为它们会读出 alt 标签图像文本并使您的图像可访问，对于 改进图片搜索引擎优化，因为 alt 标签可帮助搜索引擎找出页面内容中图片的上下文，并在用户在线搜索图片时为搜索结果正确索引这些内容.

Google images search results for keyphrase "puppy love".
替代文本改进了搜索引擎对图像的索引.

Alt 标签与标题标签

虽然这两个属性都使用替代文本来改善图片在您的内容中的使用方式，但 alt 属性应描述图片所代表的内容，以帮助用户了解图片在页面上的作用(即其用途)，而 title 属性应用于在您将鼠标悬停在图像上时显示工具提示.

Screenshot showing a tooltip created by inputting text into the Image Title Attribute field.
使用标题标签为您的图像创建工具提示.

HTML 图像标记的完整语法如下所示:

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

您可以在通过媒体库将图片上传到 WordPress 后立即添加替代文本……

Screenshot of WordPress Add Media screen highlighting Alt Text input field.
将图片上传到媒体库后添加替代文本.

并且在编辑图像时(您也可以在编辑过程中为图像添加标题标签)……

Image Details screen with Alternative Text and Image Title Attribute fields highlighted.
检查编辑图片时是否填写了alt属性.

如何在 WordPress 中编写完美的图像 Alt 标签

现在我们已经介绍了 alt 标签的基础知识，让我们看看我们通常会添加到内容中的图像类型以及使用不同类型图像的替代文本的指南.

为了帮助将事情放在上下文中，我们将在 WordPress 中创建一个示例帖子，并应用"最佳实践"指南来使用具有不同类型图像的 alt 标签来尝试实现搜索结果和可访问性的最佳结果.

所以，这是我们的初始帖子，有一些文字和第一张帖子图片......

Sample post with text and image.
让我们优化这只小狗！

在决定如何处理这篇博文中的图片之前，让我们先看看使用 alt 属性优化图片的最佳实践指南.

为 WordPress SEO 使用 Alt 标签

替代文本属性的基本准则如下:

Google 的图片最佳做法说，当为您的图像选择替代文本，您应该专注于创建有用的、信息丰富的内容，在页面内容的上下文中适当地使用关键字.它还警告不要通过用关键字填充 alt 属性来参与"关键字填充"的黑暗艺术，因为这会导致负面的用户体验，并可能导致您的网站被视为垃圾邮件.

事实上，以下是 Google 网络垃圾邮件团队的前负责人 Matt Cutts 关于使用 Alt 标签改进网站搜索结果的看法……

根据谷歌的说法，这是使用 alt 标签和下图之间的关系......

Cute chihuahua in a cup.
想要更多流量到杯子里的小狗照片吗?添加 alt 标签哟……怎么了，小狗！

(图片:pixabay.com)

  • 糟糕(缺少替代文字): <img src="puppy.jpg"/>
  • 糟糕(关键字填充): <img src="puppy.jpg" alt="puppy dog pup pups puppies doggies pups litter puppies dog chihuahua puppies dog training puppy training cute puppy"/>
  • 更好: <img src="puppy.jpg" alt="puppy"/>
  • 最佳: <img src="puppy.jpg" alt="chihuahua dog puppy in backyard"/>

如果图片纯粹是装饰性的，则不应使用 alt 标签.

因此，

<img src="puppy.jpg" alt=""/>

虽然上述内容看起来相当简单，但当您考虑可访问性问题时，事情可能会开始变得有点混乱.

这使我们可以在内容中使用不同类型的图像.

您可以在 WordPress 中使用的不同类型的图像

如果想知道您应该使用哪种替代文本来处理哪种类型的图像开始让您发疯，只需下载我们在下面汇总的 PDF 备忘单，并在优化图像时将其用作 ruff 指南......

Click banner to download the Alt Tag Decision Tree PDF Cheatsheet
哟……点击横幅下载 Alt Tag 决策树 PDF 备忘单……它是免费的！

WordPress 允许您将各种图像添加到帖子、页面和自定义帖子类型.根据万维网联盟的 Web 内容可访问性指南 (WCAG)，出于可访问性目的，图像分为以下类别:

信息图片

这些是用于以图形方式表示概念和信息的图像，例如图片、照片和插图.

信息图像可用于:

  • 标记其他信息(例如，用于联系详细信息的电话或电子邮件的图片、图像或图标)
  • 补充其他信息(例如解释图像中包含的内容)
  • 传达成功的信息(例如提供图片中描述的说明)
  • 传达印象、表达或情感(例如，伴随着幸福家庭的图片以及有关适合家庭的产品的内容或信息)
  • 传送文件格式(例如 PDF 或 ZIP 文件图标)

将 alt 标签与信息丰富的图像结合使用的建议方法是至少包含一个简短的描述，传达图像所呈现的基本信息，如下所示.

Telephone:
信息图像的黑白示例.

<p> <img src="mobile-phone.png" alt="Telephone:"> 0123 456 7890 </p>

装饰图片

装饰图片的示例包括:

  • 用作页面设计的一部分(例如边框、部分分隔符等)
  • 用作文本链接的一部分(例如，将用户的注意力吸引到可点击链接或放大可点击区域).
  • 有一个相邻的替代文本(即显示在图片旁边的文本足以解释图像存在的原因).
  • 仅用于营造氛围或改善页面外观(即"吸引眼球").

共识似乎是，当图像没有任何用途，或者它的唯一目的是为页面添加视觉装饰而不是传达有助于读者理解页面的重要信息时，最好提供一个 null文本替代(即 <img src="image.jpg" alt="">).

Cute cat cartoon depicting use of a decorative image.
绝对没有任何用途的装饰图像的完美示例！

带有空 alt 属性的图像将被屏幕阅读器等辅助技术跳过.

许多图像搜索引擎优化指南建议，如果图像没有任何用途，并且纯粹出于装饰目的(例如背景图像)包含在您的设计中，那么您应该使用 CSS 创建图像，而不是 HTML.如果你真的不能改变这些图像，那就给它们一个空的 alt 属性(alt="").

但是请注意，根据使用的上下文，图像可能会被解释为具有信息性、装饰性或其他内容.决定取决于作者的判断以及他们在页面上包含图片的原因.

例如，在我们下面的例子中以西格蒙德·弗洛伊德博士的形象为例……

Sample post with a picture of a puppy and a photograph of Dr.Sigmund Freud.
多亏了弗洛伊德，WordPress 存储的所有东西都有一个 ID.

博士内容中提到弗洛伊德是"没有低估早恋的力量"的人.虽然弗洛伊德博士对相机的阴沉凝视为这篇文章增添了可信度和权威性，但他的照片是提供信息还是纯粹的装饰?

我们如何有意识地(或下意识地)在考虑可访问性的情况下优化此图像?我们是否让读者猜测弗洛伊德出现在我们的帖子中的动机是什么?我们会让事情溜走吗?

如果我们确定图像是装饰性，则指南建议将 alt 标签留空.然后屏幕阅读器会跳过图像，视障读者可能不会意识到 Sigmund 的重要贡献.

  • 装饰: <img src="sigmund-freud.jpg" alt=""/>

如果我们决定图像是信息性，那么我们必须在 alt 标签中说明一些内容来解释图像.

  • 信息性: <img src="sigmund-freud.jpg" alt="Dr Sigmund Freud recognized the significance of early love."/>

或者，我们可能会认为图像是装饰性的，但我们将通过在图像属性中组合文本，使弗洛伊德博士对"初恋的持久性"的有效性的认可对所有用户(包括视障读者)都更加突出例如 img alt 标签和 img caption 字段.

Screenshot of Image Details screen with alternative text describing a photograph of Dr.Sigmund Freud.
向图像添加 alt 标签是一项艰巨的工作.但总有一天，回想起来，奋斗的岁月会让你成为最美的.

功能图像

功能图像不传达信息……它们用于启动操作.

功能图像的示例包括可点击的按钮、链接和其他交互元素，例如代表打印功能的打印机图标或提交表单的按钮.

然后，功能图像的替代文本应该传达您希望从读者那里引起的期望操作(即图像的目的)，而不仅仅是提供图像描述.

例如，对于下面显示的按钮图片，替代文本应该类似于"点击按钮寻找爱情"而不是"可点击按钮的图片".

Example of a functional image depicting a clickable button.
功能图像的图像，描绘了一个功能失调的人的可点击按钮与任何人一起点击！

因为功能性图像对于内容的功能性至关重要，缺少或空的 alt 值会给屏幕阅读器用户带来问题.屏幕阅读器等辅助技术通常会公布图像文件名、图像 URL 或链接目标 URL，因此如果缺少 alt 标签，用户将难以理解图像将启动的操作.

文字图片

图像通常可以显示可供阅读的文本.在这种情况下，alt 标签应包含图片中使用的字词.

For professional counseling to discuss relationship issues, call 0123 456 7890:
此图片包含可供阅读的白色文本.

<p> <img src="relationship-banner.png" alt="For professional counseling to discuss relationship issues, call 0123 456 7890:"> 0123 456 7890 </p>

无障碍指南建议避免在图像中包含可读文本，除非图像是徽标.相反，您可以使用 CSS3 设置文本样式并使用嵌入字体，而不是将文本描绘为图像.

如果由于难以用 HTML 呈现方程式和特殊数学符号而不得不使用图像来描述数字表达式，请确保 alt 标签为读者提供足够的信息以进行数学运算.

例如，下面的屏幕截图显示了使用重复十进制数的图像......

Example of post containing an image depicting a recurring number.
等等……最后一位数字是六还是九?

以下是您如何为此图像编写替代文本:

<img src="0dot6666recurring.png" alt="0.6666 recurring.(The recurrence is indicated by a line over the '6' in the fourth decimal place)">

复杂图像

图形、图表、地图、图表和插图等复杂图像通常包含的信息多于短句或句子所能传达的信息，并且可能需要长而详细的文字描述.

Sample post containing example of a complex image.
在将 SEO 和 Web 可访问性放在地图上之前，复杂的图像曾经很简单.

可访问性指南提供了多种方法来使复杂图像中的长描述信息可供 Web 浏览器和搜索引擎等程序使用(例如，使用 <figure> 和 <figcaption> 等 HTML5 元素以及 longdesc 和 aria-describedby 等辅助属性).

向内容添加复杂图像时可以使用的一种方法是在与图像相同的网页上包含详细描述，并在 alt 属性中引用其位置.

以下是我们可以使用这种方法用于示例图的替代文本:

<img src="love-hiatus.png" alt="Line chart showing rates of young couples taking relationship breaks since 1988.Described under the heading Does First Love Last?">

对复杂图像使用 alt 属性时，请确保在替代文本字段中提供清晰准确的位置信息，以帮助用户更轻松地找到内容.

图像组

当使用多张图片来表示一条信息时，只有其中一张图片需要一个 alt 标签来描述整个组.其他图像应具有 null(空)alt 属性，以便辅助技术忽略它们.

一个例子是使用一组星形图标来表示评级......

Sample post of star ratings to depict example of a group of images
我知道你们在想什么……这只可爱的小狗怎么会变成这样爪子星级?

以上示例中使用的星形图标的 alt 标签如下所示:

Rating:
<img src="star-full.png" alt="3.5 out of 5 stars">
<img src="star-full.png" alt="">
<img src="star-full.png" alt="">
<img src="star-half.png" alt="">
<img src="star-empty.png" alt="">`

当然，您可以使用插件在 WordPress 中添加星级评分图像，但您会得到图片！

如果一组图像用于表示一个集合或主题相关的图像，那么您应该添加一个替代文本来描述每个图像及其与该组的关系.

嗯……什么?

这里让我把它分解成简单的步骤.

这里我们有一组图像用于表示一组主题相关的图像......

Sample post of an image gallery.
这是狗图片的图片库，看在小狗的份上！

请注意，如果您使用 图片库 将图片插入 WordPress 帖子或页面，您将无法在内容编辑器屏幕...

Highlighted gallery link shortcode
弗洛伊德关于荣格的爱是正确的……甚至集体图像也有 ID！

但是，如果您查看已发布帖子或页面的源代码，(如果使用 Windows 和 Google Chrome 网络浏览器，请右键单击帖子并选择 Ctrl + U，或者使用 iOS 和 Safari 时选择 Option + Cmd + U)……

screenshot of view page source selected by right-clicking on screen
一切很快就会揭晓……

您将看到 WordPress 使用正确的标记结构在内容的 HTML 中包含所有属性......

Source code of WordPress post with samples of alternative text highlighted.
还有我们的替代文字描述每张图片及其与群组的关系！

图像映射

如果使用具有多个可点击区域(热点)的图片，您应该提供一组链接的整体上下文，并为图片的每个单独可点击区域提供描述链接目的或目的地的替代文本.

这是一个废话信息的替代图表……点击这张图片地图上的任何地方只会导致心痛和失望.

图像地图的典型用途包括链接到带有个人资料信息的页面的组织结构图，以及带有热点区域、突出显示部分、描述、链接等的交互式图像.

您可以使用各种插件在 WordPress 中创建图像映射.只需在管理区域的"添加插件"屏幕中搜索"交互式图像"(转到"插件">"添加新").或者，查看我们关于如何构建 CSS 图像映射的教程.

Alt 标签提示，以获得更好的 SEO &网络无障碍

图像可以改善您的搜索结果，帮助有认知和学习障碍的人更容易理解内容，并为视障用户提供提示，但如果它们没有针对可访问性进行优化，它们也会造成障碍.

除了让您的内容更容易被搜索引擎编入索引之外，可访问的图像还有利于使用屏幕阅读器和支持语音的网站(替代文本可以大声朗读或呈现为盲文)、使用语音输入软件的人和移动网络用户浏览关闭图片的网站(尤其是数据漫游).

这里有一些有用的提示，可以改善您的 SEO 并在向图像添加 alt 标签时使您的内容更易于访问:

  • 如果您不确定要添加到内容中的图片类型，请参阅此替代决策树.
  • 如果您的图片没有用途，请将 alt 标签留空.
  • 使替代文本尽可能简洁，并将最重要的信息放在开头.
  • 在替代文本中使用标点符号使信息更易于理解.
  • 当图像和相邻文本之间没有空格字符时，在替代文本中添加空格字符，以避免在屏幕阅读器(例如 alt="Board of directors and related staff: ")阅读时将单词串在一起.
  • 如果您使用空(空)文本替代 (alt="") 来隐藏装饰图像，请删除引号内的所有空格字符，因为如果在引号之间检测到空格字符，某些辅助技术会宣布图像的存在标记.
  • 您无需在替换文字中包含"图像"、"图标"或"图片"等字词，因为可以看到的人会知道这一点，屏幕阅读器会宣布图像的存在.除非区分绘画、照片、插图等很重要，否则最佳做法建议避免在替代文本中使用更通用的术语.
  • 浏览网页上的每张图片，以确定替代文字是否合适.执行此操作时，想象一下向有视力障碍且需要了解您的内容的人大声朗读网页.这将帮助您判断上下文中的替代文本信息，并确定图像服务于什么(如果有)功能或目的.
sample post image with fake text and picture of sleeping pup.
把这个页面上的一切都做好真是太累了！

检查您的替代文字

在您为帖子或页面添加内容后，有 检查 可以用来评估网页的可访问性.

您还可以使用一些工具来执行自动化测试，以检查页面上是否缺少任何替代文本.

例如，您可以使用 WAVE 网络可访问性评估工具来检查替代文本使用任何浏览器……

Home screen of Wave web accessibility evaluation tool.
波浪……你好！

只需在字段中输入网址，点击按钮，您的网页就会在浏览器中显示，带有图标和标签以及摘要报告部分……

Results screen after running website URL through Wave evaluation tool.
Wave 获取您的帖子，对其进行嗅探以获取可访问性，并在页面中显示结果看起来像狗的早餐.

如果检测到 alt tag，则会为该图像显示一个绿色图标.点击图标查看更多信息...

Wave results page showing green icon when image alt tag is detected.
绿色图标表示已检测到图像 alt 标签.谁是好孩子?

如果您页面上的图像缺少 alt tag(非空或空...丢失！)，您将看到一个红色图标...

Wave results page showing red icon when image alt tag is missing.
红色图标表示缺少图像 alt 标签.球去哪儿了?

浏览报告部分，点击页面上的图标查看alt属性信息...

继续前进，直到你清理完所有的烂摊子！

修复页面上的任何问题，然后重新发布并刷新工具以确保一切正常.冲洗并重复，直到解决页面上的所有问题.

Sample post with text and image of puppy.
恭喜！您的文章现在非常棒！

最后一件事......

针对 SEO 和 Web 可访问性优化图像需要坚定的决心.花时间为您添加到网站上的帖子或页面的每张图片制作适当的替代文字.网站用户、视力障碍用户和搜索引擎会感谢您！

Sample post image with text and picture of a puppy litter.
让您的网站具有包容性并可供所有人访问，与所有用户分享爱！

如果您想知道最好的 WordPress 图像优化器是什么，请看看我们自己的 Smush Pro.将它与 Hummingbird 和 SmartCrawl SEO 相结合，这三者都可以显着提高图像的性能.您可以在您的网站上免费试用所有这三种免费试用.

图片:pixabay.com

标签:

alt(2)WordPress(893)标签(8)
♥赞6

相关文章

发表回复