如何轻松地为 WordPress 中的图像添加标题属性

您想在 WordPress 中为图像添加标题属性吗? title 属性使您的 WordPress 网站上的图像更易于访问且对 SEO 友好.

与替代文本类似,标题标签允许您提供有关图像的其他信息.这有助于屏幕阅读器和搜索引擎了解文章中图像的上下文.

在本文中,我们将向您展示如何在 WordPress 中轻松地为图像添加标题属性.

Adding the title attribute to images in WordPress

图片中的标题属性是什么?

图像中的标题属性允许您添加图像的文本描述.这使屏幕阅读器和搜索引擎机器人更容易理解图像及其上下文.

我们将向您展示一些代码示例来解释如何在 HTML 中使用 title 属性.但别担心,您不需要向您的网站添加任何 HTML 代码.

通常,您可以像这样显示带有 HTML 标记的图像:

<img src="/path/to/image/fruits.jpg" width="100" height="100"/>

但是,网络爬虫、机器人和屏幕阅读设备实际上无法看到您的图片.为了帮助这些设备,您可以在图像中使用替代文本和标题文本属性.

因此,为了帮助搜索引擎和机器人了解您的图片是什么,您可以向图片标签添加替代文本属性.

alternate tag 属性描述了你的图片是什么,它比 title 属性更重要.这是它的样子:

<img src="/path/to/image/fruits.jpg" width="100" height="100" alt="A fruit basket"/>

当图像链接断开、未找到或浏览器无法加载图像时,也会显示备用标签.您会看到旁边带有备用标签的小图像图标.

Broken image path

为了让有屏幕阅读器和无障碍需求的用户更容易使用,您还可以为图像添加标题属性,如下所示:

<img src="/path/to/image/fruits.jpg" width="100" height="100" alt="A fruit basket" title="Fruit Basket"/>

当您将鼠标悬停在图像上时,此标题属性会出现在弹出窗口中.那些使用屏幕阅读器软件的人可以配置他们的软件来阅读这个标题.

Image title attribute

同时使用替代文本和标题属性有助于您的图片搜索引擎优化,因此您可以从搜索引擎为您的网站带来更多流量.

在 WordPress 中为图片添加标题属性

WordPress 允许您在内容编辑器中轻松添加替代文本和标题属性.首先,转到帖子»添加新内容并创建帖子.

单击"+"图标,然后选择"图像"块以将图像插入您的帖子或页面.

Add image block

系统会提示您上传或从媒体库中选择图片.选择图片后,您可以选择为其命名并输入替代文字.

Add alt and title to image

重要提示:此标题不是 HTML 中使用的标题属性.WordPress 在内部使用这个来在媒体库中显示您的图像.

要添加实际的标题属性,您需要点击您的图片以查看右栏中的图片设置.

现在单击以展开"高级"选项卡并输入要用于标题属性的文本.我们写了"Fruit Basket",因为它告诉互联网图像是什么.

Add title attribute

现在,当您查看您的网站并将鼠标悬停在图片上时,您会看到显示"Fruit Basket"的弹出窗口.

Image title attribute

在 WordPress 经典编辑器中为图像添加标题属性

如果您仍然在 WordPress 中使用较旧的经典编辑器,那么您仍然可以按照类似的步骤添加标题属性.

在经典编辑器中,您将点击"添加媒体"按钮,然后选择您的图片.

Add image classic editor

现在,选择要添加到帖子或页面的图片,并填写"替换文字"字段和"标题"字段.

请记住,这个标题是 WordPress 内部使用的,不是图片标题属性.

Select image classic editor

点击屏幕底部的"插入帖子"按钮,然后您将在经典帖子编辑器中看到您的图片.

Edit image in post

从那里,单击以选择您的图像,然后单击小铅笔图标.这将打开"图像详细信息"弹出窗口.从这里,您需要点击高级选项下拉菜单以输入您的图片标题属性.

Image title attribute field

不要忘记点击底部的"更新"按钮,然后保存您的帖子并在浏览器中查看.当您将鼠标悬停在图像上时,您会看到显示图像标题属性的弹出窗口.

Image title attribute popup

我们希望本文能帮助您轻松地为 WordPress 中的图像添加标题属性.您可能还想了解如何解决 WordPress 中最常见的图片问题,以及如何保存针对网络速度优化的图片.

13

发表回复