图片标题与。 替代文字:哪个更好?
已发表: 2020-12-09即使有了新的搜索引擎优化趋势,一张图片价值一百万字的说法仍然成立。 一张高质量的图片可能会为网站的内容注入活力。 此外,编写良好的 HTML img 标题是改善用户体验的可靠方法。
但是,如果您认为图片都是关于匹配内容和图像的,那么您会大吃一惊。 您不仅可以使用图像来吸引网络访问者,还可以吸引搜索引擎。 但要释放图像所呈现的全部力量,您必须深入了解并了解在您的网站上显示图像的 HTML 代码。
一旦您查看了图像标签的组件,您就可以继续优化那些会影响您的搜索引擎排名的组件。 通常,要定位的项目是 img src 标题和 HTML img alt 标题。 你知道这两个在你的网站上扮演的角色吗? 答案将是本文的主题。
了解图像标题和图像替代文本
了解标题和替代文本之间区别的最简单方法是查看 HTML 图像标记。 假设您的网站是一家销售家具的在线商店,关于摇椅图像的示例标签可能如下所示:
img src=”rocking-chair.jpg” alt=”棕色摇椅特价” title=”棕色摇椅”
在网页设计中,带有等号的项目获得名称属性。 请注意,上面的示例只是一个说明。 在现实世界的应用程序中,属性要多得多,可能包括类、id、高度、宽度等。
从标签中,识别替代文本和标题是直截了当的。 您可能会注意到,与 HTML 标题图像标签相比,alt 属性信息量更大。 看一眼这两个属性的用途,就会发现为什么会这样。
图片标题是干什么用的?
当用户将鼠标悬停在您网站上的图像上时,就会出现标题。 因此,它仅在图像加载后出现。 当用户看到标题时,他们已经查看了图像。 因此,它不必非常具有描述性。 例如:

但是,在改善用户体验方面,标题非常重要。 信不信由你,访问者可能很难理解为什么您网站上的某些图片会出现在您网站的某些部分。 标题可以方便地提供答案。
某些浏览器在将鼠标悬停在图像上后不显示标题。 但是,由于您永远不知道访问者将使用什么来浏览您的网站,因此最好在图像标签中包含标题属性。
替代文字有什么用途?
替代文本有不止一个用途。 您可以将其分解如下:
- 每次图像加载失败时都会显示替代文本。 几乎所有浏览器都允许替代描述来表示空图像。 这可能是由于图像文件名不正确或 URL 损坏所致。 糟糕的互联网连接也可能会阻止图片的正确加载。 在这种情况下,img alt 标题会显示并向访问者解释有关图像的所有信息。
- 当用户关闭图像时,替代文本也会显示。 与图像美化网页一样,一些用户更喜欢纯文本版本。 因此,他们可以通过阅读替代文本来了解图片。
- 盲人用户也可以从编写良好的 img alt 标题中受益。 屏幕阅读器使用它们向看不到图像的访问者描述图像。 通常,替代文本有助于提高您网站的可访问性。 最大可访问性的重要性是如此之大,以至于 W3C 提倡替代文本。 他们的指导方针中的一行写道:“使用 img 元素时,请使用 alt 属性指定一个短文本替代项。”
- 最后,搜索引擎使用替代文本来更好地理解图像的含义。 因此,替代文本是可抓取的,就像您网站上的其他内容一样。 下图显示了替代文本的示例:

(图片来源:MDN-Mozilla)
更重要的是:图像标题还是替代文本?
在查看标题和替代文本的使用列表后,将 alt 属性标记为更重要是安全的。 但是,认为标题无用是错误的。 事实上,根据您的目标,任何一项都可能很重要。
如果您主要关心的是改善用户体验,那么标题将是您关注的主要领域。 如前所述,您可以使用标题提供有关图片的其他详细信息。 一旦用户将鼠标悬停在它上面,描述就会弹出。
你会感兴趣
如何成功扩展您的业务
网站加载速度:优化工具
网站健康检查:工具和提示
用户体验是什么意思?
但是为什么搜索引擎不太关注图片标题呢?
嗯,答案与搜索引擎的发展有很大关系。 开发人员早在 1999 年就编写了 Google 的大部分代码库。第二年也有重要的补充。 然而,他们从未考虑过不受欢迎和未被发现的 HTML 元素。 由于网页设计师不经常使用标题,因此没有理由提供它们。 对核心代码的更新从未使 HTML 标题图像标记与其他属性一样重要。
如果您正在考虑 SEO,那么您的重点应该是替代文本。 请记住,Google 将 alt 属性中的信息视为常规网页内容。 因此,它索引它。 此外,搜索引擎在抓取图像时可能会遇到问题。 替代文本为他们提供了一种很好的方式来了解图像的全部内容。
此外,替代文本将网站可访问性提升到一个全新的水平。 尽管有延迟加载等技术,但几乎不可能确保您网站上的所有图像都能 100% 加载。 访问者可能会关闭图像或连接速度太慢以至于无法加载图片。 使用替代文本,您可以确保用户知道图片是否加载。
最后,替代文本的重要性远远超过了标题属性。 它们的用途相对较多,它们对网站排名的影响值得注意。 虽然优化标题和替代文本很重要,但最好对 alt 属性的信息给予更多的重视。
优化 SEO 的替代文本
搜索引擎优化仍然是有机地推动高质量流量的最可靠手段之一。 虽然有很多方法可以优化网站,但完善 alt 文本非常适合设置站点图像以获得更大的流量。 幸运的是,这个过程很简单。 一些需要考虑的做法是:
在 60 秒内测试您网站的 SEO 和性能!
良好的网站设计对访问者的参与度和转化率至关重要,但网站速度缓慢或性能错误甚至可能使设计最好的网站表现不佳。 Diib 是世界上最好的网站性能和 SEO 监控工具之一。 Diib 利用大数据的力量帮助您快速轻松地增加流量和排名。 正如在企业家中看到的!
- 易于使用的自动化 SEO 工具
- 关键字和反向链接监控+想法
- 确保速度、安全性和核心生命体征跟踪
- 智能地提出改进 SEO 的想法
- 超过 250,000,000 名全球会员
- 内置基准测试和竞争对手分析
被超过 250,000 家公司和组织使用:
与
为人类写作
在编写替代文本时,经验法则是:“像为盲人写作一样写作。” 考虑到 alt 文本显示的场合,始终遵守规则并没有什么坏处。 如前所述,当图像无法显示时,会显示 img alt 标题中包含的信息。 因此,您希望它告诉所有关于隐藏图片的信息。

因此,写一个人类可以阅读和理解的语句。 更重要的是,写一个描述性的句子。 一个盲人可能正在浏览您的网站,而您输入的内容将是唯一可以通过的内容。 下图显示了同一张图片的 alt 文本的好坏示例:

(图片来源:网络托管中心)
为搜索引擎写作
替代文本不仅向用户提供图像描述,还向搜索引擎提供图像描述。 因此,在其中包含一个关键字。 与其他内容一样,请务必注意它包含与图像所在网页的一般流程押韵的关键字。
同样,请避免不良的 SEO 做法,例如关键字填充。 搜索引擎会将您的内容标记为垃圾邮件,从而降低您的排名。 最好写一个糟糕的替代文本,而不是用关键字填充它。 作为检查,请确保您没有在超过 70% 的图像中使用关键字。
保持简短
alt 文本描述了一幅图像,在 alt 属性引号中放置很多单词可能很诱人。 但不要这样做。 搜索引擎不会因此而惩罚你,但他们的兴趣在于替代描述的前 16 个单词。 一个 125 个字符的替代文本应充分描述图像,而不会影响用户体验。
但是,如果您觉得图像需要很长的描述,那么使用“longdesc”属性是明智的。 HTML4 及其后续版本允许在图像标签中使用此属性。
替代文本示例
当您刚开始使用 SEO 时,可能会有点难以理解好的替代文本和写得不好的替代文本之间的区别。 因此,查看示例会派上用场。 出于说明目的,请想象您网站上一辆红色超速汽车的图像。
您的图像标签可能类似于:
img src=”speeding-car.jpg” alt=”red car” title=”car”
在这种情况下,替代文本并不理想。 它提供的有关图像的信息非常少。 更好的版本可能显示为:
img src=” speeding-car.jpg” alt=”红色汽车在高速公路上超速行驶” title=”car”
如果您碰巧知道高速公路的名称,那么在 alt 文本中提及它并没有什么坏处。 不惜一切代价避免损害您的关键字或关键字堆砌。 例如,如果您网页的关键词是“红色汽车”,请不要使用以下描述:
img src=”speeding-car.jpg” alt=”这是一辆红色汽车。 红色的车开得很快,就是这么漂亮的红色车”title=”car”
虽然上面的描述只关注图像,但关键字填充会污染它。 搜索引擎会对此类垃圾短语不屑一顾。 第二句未能向用户提供有关图像的有用信息。 因此,明智的做法是排除它。
如何添加替代文本
在图像标签中包含替代文本的过程取决于您用于创建网站的内容。 如果您编写了网站的硬代码,最好手动添加替代属性。 例如:

然而,今天的 Web 开发几乎不涉及任何硬编码。 您可能使用了内容管理系统 (CMS) 或网站构建器。 添加所有文本时,请务必找出您的网页设计工具使用的过程。 通常,该方法具有两个或三个步骤。
在世界上最流行的 CMS WordPress 中,添加 HTML img alt 标题是在公园里散步。 登录到您的帐户后,找到相关图像并单击“编辑”按钮。 一个输入字段显示已准备好接收替代属性的数据。
您可以在 WordPress 的媒体库中包含替代文本。 选择图像后,找到图像附件详细信息下方显示的替代描述输入字段。 例如:

(图片来源:WPBeginner)
何时将 Alt 属性留空
鉴于 alt 属性在 SEO 中发挥的重要作用,您可能很难相信有时将它们留空是个好主意。 图片仅用于定位目的放置在网站上的图像。 图像既不与内容押韵,也不增加价值。 网页设计师可能会使用此类图像来装饰页面。
此类仅设计图像可能具有空替代属性。 描述它们是不谨慎的,因为它们不会为可用内容增加价值。 屏幕阅读器将跳过图像,这是按顺序排列的,因为它们不能帮助用户更好地理解页面。
排除包含单词的图像的替代文本也是一个好习惯。 所有信息都在图像上。 因此,对这些词的描述是无关紧要的。
优化标题
由于标题不影响搜索排名,所以没什么可做的。 在大多数情况下,它比替代文本更短且描述性更少。 标题不是提供有关图片的更多信息,而是为其命名。
然而,W3C 公开提倡将标题包含在图像标签中。 如果您未能为图片命名,您的 HTML 代码可能是 W3C 无效的。
写标题时,写一个不仅简短而且朗朗上口的文字。 也就是说,单字标题是禁忌。 一个描述图像并且由不超过十个单词组成的短语就足够了。 例如:

与有时您可能会忽略的 alt 标签不同,没有任何特殊情况可以保证排除图像标题。 无标题图像只会损害用户体验。 因此,不呈现空 HTML 标题图像标签符合任何 SEO 专家的最大利益。
我们希望您发现这篇文章很有用。
如果您想更有趣地了解您的网站健康状况,获得个人推荐和提醒,请通过 Diib 扫描您的网站。 只需 60 秒。
其他图像注意事项
毫无疑问,图像不仅仅是替代文本和标题。 优化前者并完善后者只是等式的一部分。 要充分利用图像对 SEO 的影响,请考虑以下 Web 图像最佳实践:
保持重要的文本数据关闭图像
写字比画在图像上要好。 请记住,搜索引擎不会深入抓取图像,也无法访问图像中的单词。 除非 HTML 无法按照您想要的方式输出文本数据,例如,在编写复杂的化学方程式时,请避免使用文字填充的图像。
但是,使用图片显示图表并没有什么坏处。 HTML 可以提供该功能,但图像是一种更好的解决方案。
注意上下文
您显示的图像应与部分提供的信息混合。 在讨论户外服装的页面上包含汽车图像是个坏主意。 同时,让您的图像尽可能原始。 搜索引擎重视原始图片,因为它们重视真实内容。
写一个好的图像文件名
文件名出现在图像标签的 img src 标题属性中。 搜索引擎使用它来更多地了解您网站上的图像。
默认情况下,图像具有字母数字文件名,例如:
A00002.jpg
请务必更改名称,以便它们反映图片的内容。 在此过程中,请记住将超过一个单词的文件名连字符连接起来。 如果缺少连字符,搜索引擎将难以阅读像red-car-on-highyway.jpg这样的名称。 但是,不要更改图像格式,即句号后的字母。 如果格式与文件名给出的格式不同,浏览器可能会感到困惑。
让您的图像创造 SEO 差异
谈到搜索引擎优化,没有人认为内容为王。 但是图像和文字一样是您网站内容的一部分。 通过学习完善 HTML img 标题和优化 HTML img alt 标题的艺术,您可以开始使用图片来提高您网站的排名。
Diib:立即优化您的图片标题!
如果您在使用图片进行 SEO 时遇到困难,请记得查看数百种专门用于优化图片的工具。 当您专注于您的业务时,您还可以聘请 SEO 专家来帮助您的网站。 但在你想得那么远之前,先开始使用图像来增加你自己的流量。 然后,与 Diib Digital 合作,充分利用您的图像标题。 我们的用户仪表板将为您提供警报和目标,旨在优化您的图像标题等。
以下是使我们与众不同的一些功能:
- 旨在提高网站性能的定制目标
- 告诉您有关您的域授权的其他技术 SEO 问题的警报
- 有反向链接的损坏页面(404 检查器)
- 关键字、反向链接和索引监控和跟踪工具
- 用户体验和移动速度优化
- 图片标题优化
- 平台特定的后期表现
单击此处进行免费扫描,或直接致电 800-303-3510 与我们的一位增长专家交谈。
