专注国内外云服务器
分享建站技术教程

什么是Alt标签以及如何使用它

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

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

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

什么是Alt标签?

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

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

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

图片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编辑器中,单击加号图标并选择图像区块:

接下来,上传您的图片或从您的媒体库中选择一张。将图像插入区块后,图像设置面板将在右侧的侧栏中打开。您可以在Alt文本框中输入您的描述:

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

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

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

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

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

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

如果您是一个懒站长,你也可以使用Smart SEO Tool插件,进入图片优化设置,开启智能图片ALT标签填入。如下图所示:

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

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

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

小结

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

微海报分享

文章来源于互联网:什么是Alt标签以及如何使用它

相关推荐: WP-China-Yes插件被WordPress官方仓库下架后如何升级?

国内访问WordPress官网下载插件和主题都十分缓慢,甚至连正常升级WordPress、主题和插件都不一定成功,所以很早以前大家都纷纷安装了WP-China-Yes插件。不过今天老古想要升级该插件到3.4.0版本以便测试使用Cravatar头像才知道该插件早…

赞(0)
未经允许不得转载:吾上云 » 什么是Alt标签以及如何使用它
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们