了解图像标题属性

已发表: 2020-10-23

优化您网站的图像并非易事。 您不仅需要确保它们的文件大小是可管理的，以防止页面加载时间过长，而且它们还提供了许多容易被忽视的改进搜索引擎优化 (SEO) 的机会。 例如，您可能不知道图片标题属性及其在您网站的视觉元素中所扮演的角色。

在这篇文章中，我们将阐明图片标题属性，讨论它与 alt 属性的区别，并讨论它对您的 SEO 策略意味着什么。 我们还将向您展示如何对您网站的访问者隐藏它。

让我们潜入吧！

订阅我们的 YouTube 频道

图片标题属性介绍

第一件事，就是先：图像title属性是不一样的图像的文件名。 相反，它是可以包含在照片或图形的 HTML 标签中的信息。 这是一个示例，最后是 title 属性： 

<img src="filename.jpg" alt="description of your image" title="image title">

title 属性最显着的影响是，当用户将鼠标悬停在图像上时，他们可以将其视为网站前端的“工具提示”：

图像标题属性工具提示的示例。

并非所有浏览器都支持此功能。 但是，Firefox 是少数几个这样做的浏览器之一，它是网络上第三大流行的浏览器。 您可以通过媒体库在 WordPress 中添加图片标题属性。 只需单击有问题的图像并填写标题字段：

在 WordPress 媒体库中添加图像标题属性。

您也可以直接在块编辑器中添加它。 展开图像块的高级设置并填写标题属性字段：

在块编辑器中添加图像标题属性。

使图像标题在悬停时可见的目的是为访问者提供一些额外的上下文。 例如，一些内容创建者会包含图像中描绘的人物的姓名，或者用户可能会从了解中受益的关键细节。

但是，您不想完全依赖 title 属性，特别是因为它不是所有浏览器中的用户都可见。 在某些情况下，标题可能更有效。 此外，您应该始终确保为图像添加替代文本，即使它们具有标题属性。

创建标题属性时，最好将它们保持在几个字以内。 具有选择性和描述性，以便悬停文本不会太长并为您的访问者提供价值。

Title 属性与 Alt 属性的区别

我们之前提到过，即使您已经包含了标题属性，向图像添加替代文本也很重要。 对于内容创建者来说，混淆 alt 属性的图像标题属性，或者认为两者都使用是矫枉过正的，这是一个常见的错误。

alt 属性在其 HTML 标记中指定图像的 alt 文本。 它是我们之前示例中列出的第二个属性： 

<img src="filename.jpg" alt="description of your image" title="image title">

替代文字的目的是向无法看到它们的用户描述视觉元素，因为图像加载失败或因为他们正在使用屏幕阅读器。 在无法呈现图像的情况下，此文本将代替图像显示：

代替无法加载的图像显示的替代文本。

在 WordPress 中，您可以通过媒体库或块编辑器中任何图像块的设置向图像添加替代文本。 这是确保您的网站符合可访问性标准的关键，因此我们强烈建议您这样做。

不要尝试使用图像标题属性来替换 alt 属性，这一点非常重要。 并非所有屏幕阅读器都支持 title 属性，依赖键盘导航的用户无法将鼠标悬停在图像上进行查看，因此这可能会导致您网站上出现严重的可访问性问题。

图片标题属性如何影响 SEO

当谈到图像标题属性对 SEO 的重要性时，有很多混合的信息。 一些人声称这是合并其他关键字的绝佳方式，而另一些人则表示搜索引擎机器人甚至不会抓取它。

切入正题，图像标题属性不是直接的排名因素。 通过向所有图像添加标题来优化图像可能不会显着改变页面在搜索引擎结果中的可见性。

但是，从 SEO 的角度来看，包含标题属性也不会损害您的网站。 事实上，谷歌推荐它。 如果搜索引擎机器人确实抓取了它们并且您合并了关键字，那么您至少可以在 Google 图片搜索结果中提升您的图片。

此外，图片标题可以通过与访问者分享关键细节来改善您网站的用户体验 (UX)。 这可以通过影响排名因素（例如页面浏览量、会话持续时间和其他此类指标）间接促进 SEO。

即便如此，正如我们多次提到的，并非所有浏览器和设备都支持悬停文本。 如果您的大多数用户永远不会看到它，那么浏览您的媒体库并向每个文件添加标题可能会浪费大量时间。

如何在 WordPress 中隐藏图像标题工具提示

您可能更喜欢隐藏图像标题工具提示。 也许您担心访问者会觉得它很烦人，或者想将其主要用于 SEO 目的，但认为它没有必要帮助读者理解您的内容。

您可以从块编辑器和媒体库中的图像中删除标题属性。 但是，您将失去可能从中看到的任何潜在 SEO 优势。

大多数想要隐藏工具提示的人最终都会在他们的网站中添加 JavaScript，这样他们就可以将属性保留在图像标签中，但不会在前端显示。 我们建议使用插入页眉和页脚等插件来简化此过程。

在<head>部分添加以下代码，用脚本标签包装： 

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

如果您使用的是 Divi，则可以跳过安装额外插件并通过导航到Divi > Theme Options > Integration来添加此代码：

此屏幕上的第一个代码编辑器会将 JavaScript 添加到您网站的<head>部分，就像插入页眉和页脚一样。

结论

可以创建多年的在线内容而从不考虑图像的标题属性。 但是，完全忽略它们可能会错失为用户提供额外上下文的机会。 更重要的是，滥用此属性可能会对您网站的可访问性和 SEO 产生负面影响。

在这篇文章中，我们讨论了图像标题属性和 alt 属性之间的差异，以便您可以最大限度地提高 SEO。 我们还向您介绍了如何在前端隐藏图像标题工具提示，以便访问者将鼠标悬停在照片或图形上时看不到它。

您对图片标题属性或图片优化有任何疑问吗？ 在下面的评论部分将它们留给我们！

图片来自 Jane Kelly / Shutterstock.com