海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

图片有助于使您的网站具有吸引力和视觉吸引力。 但是,如果您不使用替代文本(也称为“替代文本”或“替代标签”)优化图像,您将错失改善用户体验和网站可访问性的重要机会。

要正确使用它们,首先了解什么是 alt 标签很重要。 在这篇文章中,我们将讨论什么是 alt 标签以及为什么使用它们。 我们还将解释如何在 WordPress 中为图像添加 alt 标签,并介绍一些最佳实践。

让我们开始吧!

https://www.youtube.com/watch?v=G4J9mX21044

订阅我们的 YouTube 频道

什么是 Alt 标签?

Alt 标签被添加到 HTML 中的图像,以描述它们在网页上的内容和上下文。 当媒体文件无法正确加载或显示时,alt 标签也会出现在图像容器中:

在博客文章中代替图像显示的 alt 标签。

Alt 标签可帮助使用屏幕阅读器的人(例如有视觉障碍的人)了解您网站上的内容。 更重要的是,搜索引擎机器人在对您的网站进行爬行、索引和排名时使用它们来解释您的图像。

海外社媒SNS代运营Tiktok代运营公司

在图像标签中添加的质量 alt 标签是一个简短的描述,不仅解释了图像呈现的内容,还解释了它在页面上的用途。 在 HTML 代码中使用时,完整的图像标记如下所示:

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

图片 alt 标签有时会与图片标题或说明混淆。 但是,图像标题是一种不同类型的属性。 当一个人将鼠标悬停在图像上时,它们显示为弹出文本。 另一方面,标题与图像一起出现,通常在其下方,并提供有关它的附加信息或详细信息。 在正常情况下,访问者永远不会看到您图片的 alt 标签。

为什么在图像上使用 Alt 标签?

Alt 标签有多种用途。 虽然您不需要使用它们,但这样做有一些主要好处。 由于搜索引擎爬虫和屏幕阅读工具都使用它们,因此它们是网络可访问性和搜索引擎优化 (SEO) 的重要组成部分。

它们提高了 Web 可访问性

Alt 标签有助于确保访问者可以访问和享受您网站的内容,即使使用辅助技术或纯文本浏览器也是如此。 当有视力障碍的人访问您的网站时,他们的屏幕阅读器会阅读页面上的文字。 当它到达一个图像时,它将使用 alt 标签来描述该图像是什么。

如果缺少 alt 标签,屏幕阅读器可能会改为读取图像文件名。 这不仅在正确解释图像方面通常无效,而且还可能令人困惑和具有破坏性,特别是如果文件名未经过 SEO 优化。

在某些情况下,例如当您在 WordPress 中将图像的 alt 标签字段留空时,屏幕阅读器将完全跳过该图像。 假设您在网页上包含的图像有用途,这种缺失意味着访问者在消费您的内容时无法获得您想要的全部价值或体验。

他们可以提高您的搜索引擎排名

图片 alt 标签可以让您更轻松地对您尝试定位的关键字进行排名。 搜索引擎机器人很智能,但它们无法像人类一样解释和理解图像的视觉方面。

Alt 属性提供了一种基于文本的替代方法来翻译图像,更具体地说是用于合并相关关键字。 包含目标关键字的文字描述可以增加您在图片搜索中获得高排名的机会。

为了强调图像(以及替代标签)在 SEO 中的重要作用,请考虑“特大号床上用品”的搜索引擎结果页面 (SERP):

基于图像的搜索结果

第一页不仅仅产生基于文本的结果; 还有很多图像结果。 如果优化并正确使用,alt 标签可以帮助提升您的 SEO 并生成超链接、可点击的图像,以显示在此类搜索中。 这对电子商务网站和登陆页面特别有益。

如何在 WordPress 中添加图像 Alt 标签

一旦您了解在您的网站上使用图像 alt 属性的好处,就该学习如何实际做到这一点了。 幸运的是,WordPress 使这项任务变得非常简单明了。

要在 WordPress 中添加图像 alt 标签,请登录到您的管理仪表板并导航到您想要添加图像的页面或帖子。 在 WordPress 编辑器中,单击加号图标并选择 图片 堵塞:

WordPress 编辑器中的图像块。

接下来,上传您的图片或从您的媒体库中选择一张。 将图像插入块后, 图像设置 面板将在右侧的侧栏中打开。 您可以在 替代文字 盒子:

WordPress 编辑器中的图像替代文本框。

完成后,保存更改。 您也可以对现有图像执行此操作。 例如,如果您想更新已发布在您网站上的帖子上的图片,只需单击该图片并在侧栏中输入新的 alt 标签即可。

如何在 HTML 中添加图像 Alt 标签

当您使用 WordPress 或其他包含用于添加和编辑 alt 标签的模块的 CMS 时,它会自动为您添加 HTML 代码。 但是,如果您想自己添加代码,则可以轻松完成。

要在 WordPress 中添加 alt 标签 HTML,请单击相关 图片 堵塞。 在块工具栏中,选择带有三个垂直点的按钮,然后选择 编辑为 HTML

可以选择

HTML 代码将显示图像标记。 您会注意到 alt 属性为空。 将您的文本放在引号内:

WordPress 中图片标签的 HTML 代码。

完成后,单击 预览 按钮返回可视化编辑器,然后保存更改。 您可以使用相同的语法和格式来编辑任何文件的 HTML 图像标签。

编写图像替代标签的技巧和最佳实践

在创建 alt 标签时,需要牢记几个关键点。 遵守这些最佳实践将有助于使您的 alt 标签更有效:

  • 是具体的和描述性的。 alt 标签的目的是描述图像,因此您希望尽可能具体。 如果您不确定您的描述是否充分,请考虑如果您只看到该行文本,您会想象出什么样的图像。
  • 保持简短。 虽然您想要详细说明,但您也不需要让 alt 标签很长(甚至是一个完整的句子)。 最大目标是 100 到 125 个字符。
  • 不要多余。 为了充分利用您的 alt 标签,您不想包含任何不必要的词。 这包括在描述之前添加“图片”或“图片”。 这些元素是不必要的,因为它们已经被暗示了。
  • 自然地结合相关关键词. 考虑您的目标关键字,并在可能的情况下将它们有机地合并到页面上下文中。 当您使用与文本对应的高度相关图像时,这会更容易。
  • 避免关键字堆砌。 虽然在您的 alt 标签中使用关键字可以改善 SEO,但请注意不要过度使用。 关键字填充实际上会损害您的 SEO 并产生糟糕的用户体验。
  • 不要使用图像代替文本。 alt 标签的主要目的是为无法处理和解释页面上的视觉元素的机器提供文本上下文。 因此,在图像中使用文本是没有意义的,尤其是标题和页面标题。

在为您的图像创建 alt 标签时,请始终记住目标是向那些可能无法看到它的人描述图像。 虽然将 SEO 和关键字考虑在内绝对是一个聪明的主意,但在考虑真实用户的情况下编写替代标签可以帮助产生更积极的结果。

结论

图像有助于改善网页的外观,并使它们更有趣、内容更丰富、更吸引人。 然而,为了最大化它们的价值,最好用 alt 标签补充它们。 这些简短而描述性的解释为用户和搜索引擎提供了上下文。 图片 alt 标签有助于增强用户体验,提高可访问性,并使相关关键字的排名更容易。

您对什么是 alt 标签或如何在 WordPress 中添加 alt 标签有任何其他问题吗? 在下面的评论部分让我们知道!

Honza Hruby/shutterstock.com 的特色图片

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts