您的当前位置:小程序开发 > 软件开发哪家好 >

什么是Alt标签,你应该如何使用它?

作者:dOizwZ8mLBWee9Mt    时间:2020-10-20

图片有助于使您的网站吸引和视觉吸引力。但是,如果你不使用替代文本优化图像(也称为“ALT文本”或“ALT标记”),您将错过一个改善用户体验和站点可访问性的关键机会。

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

什么是Alt标签?

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

ALT标签帮助那些使用屏幕阅读器的人,比如那些有视觉障碍的人,理解你网站上的内容。更重要的是,搜索引擎机器人在你的网站爬行、索引和排名时,使用它们来解释你的图片。

在图像标签中添加一个高质量的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标签有多种用途。虽然不需要使用它们,但是这样做有一些主要的好处。由于搜索引擎爬行器和屏幕读取工具都使用它们,所以它们是Web可访问性和搜索引擎优化(SEO)。

它们改善了Web可访问性

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

如果ALT标记丢失,屏幕阅读器可以读取图像文件名。这不仅通常是无效的正确解释的图像,但它也可能是混乱和破坏性,特别是如果文件名不是SEO优化。

在某些情况下,例如当在WordPress中将图像的ALT标记字段保留为空时,屏幕阅读器将跳过该图像。假设你在网页上包含的图片是有目的的,这意味着访问者在使用你的内容时并没有得到你想要的全部价值或体验。

它们可以提高你的搜索引擎排名。

图像ALT标签可以使你更容易排序的关键字,你想要的目标。搜索引擎机器人是智能的,但它们不能像人类一样解释和理解图像的视觉方面。

ALT属性提供一个基于文本的图像翻译方案,更具体地用于包含相关关键字。包含目标关键字的文本描述可以增加您在图像搜索中排名的机会。

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

第一页不仅产生基于文本的结果,还有大量的图像结果。当优化和正确使用时,ALT标签可以帮助您提高SEO,并生成超链接的、可点击的图像,以便在这样的搜索中出现。这对电子商务网站和登陆页。

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

一旦你了解了在你的网站上使用图片ALT属性的好处,现在是时候学习如何真正做到这一点了。幸运的是,WordPress使这个任务变得非常简单和简单。

若要在WordPress中添加图像ALT标记,请登录到管理仪表板并导航到要向其添加图像的页面或帖子。在WordPress编辑器,单击加号图标并选择影象区块:

接下来,上传图片或从媒体库中选择一个。将图像插入到块中后,图像设置面板将在右边的侧边栏中打开。您可以在ALT文本方框:

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

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

当您使用WordPress或其他包含添加和编辑ALT标记的模块的CMS时,它将自动为您添加HTML代码。但是,如果您想自己添加代码,您可以很容易地做到这一点。

添加WordPress中的ALT标记HTML,点击相关的影象封锁。在块工具栏中,选择带有三个垂直点的按钮,然后选择编辑为HTML:

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

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

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

在创建ALT标记时,需要记住以下几个要点。坚持这些最佳实践将有助于使ALT标记更加有效:

  • 具体和描述。

    ALT标记的目的是描述图像,因此您希望尽可能具体。如果你不确定你的描述是否足够,考虑一下如果你只看到那一行文字,你会看到什么样的图像。
  • 保持简短。

    当你想要详细的时候,你也不需要让你的ALT标签的段落很长(甚至是一个完整的句子)。目标最大为100到125个字符。
  • 别多余。

    为了充分利用ALT标记,您不希望包含任何不必要的单词。这包括在描述之前添加“图片”或“图像”。这些元素是不必要的,因为它们已经被暗示了。
  • 自然合并相关关键词

    。考虑一下你的

    目标关键词

    ,并在可能的情况下,将它们有机地结合在页面的上下文中。当您使用与文本相对应的高度相关的图像时,这就更容易了。
  • 避免关键字填充。

    虽然在你的ALT标签中使用关键字可以改善SEO,但要小心不要做过头。

    关键词填充

    实际上会伤害你的SEO和产生一个糟糕的用户体验。
  • 不要用图片代替文字。

    ALT标记的主要目的是为无法处理和解释页面上的可视元素的机器提供文本上下文。因此,在图像中使用文本是没有意义的,特别是在标题和页面标题中。

当为您的图像创建ALT标记时,请始终记住,目标是向那些可能看不到图像的人描述该图像。虽然考虑SEO和关键字绝对是一个聪明的想法,写你的ALT标签与真实的用户在心里可以帮助产生更积极的结果。

结语

图片可以帮助改善你的网页的外观,并使他们更有趣,信息更丰富,更吸引人。然而,为了最大化它们的价值,最好用ALT标记来补充它们。这些简短而又描述性的解释为用户和搜索引擎提供了背景。图像ALT标签有助于提高用户体验,提高可访问性,并使相关关键字的排序更容易。


随机推荐
Adobe的Ai是做什么用的 代理与VPN:哪个适合你? 使用马斯洛的需求层次来激励你自己和你的团队 GoogleWeb故事WordPress插件概述和评论 浅析微信小程序为什么会有这么多追捧者的原因
专业小程序开发 专业小程序开发公司 专业小程序开发公司