How to Easily Add Title Attribute to Images in WordPress
Recently we showed you the difference between alt text vs image title and how to use them for images on your WordPress blog. One of our users asked us for an easier way to add title attribute to images in WordPress. The default media uploader does not have an option to add title attribute. In this article, we will show you how to easily add title attribute to images in WordPress.
What is the Title Attribute in Images?
In HTML, images are displayed by using img tag. Like this:
<img src="/path/to/image/fruits.jpg" width="100" height="100" />
However, web crawlers and bots can not see your images. To help search engines and bots you can add an alternate text attribute to your image tag. This alternate tag attribute describes what your image is showing. Like this:
<img src="/path/to/image/fruits.jpg" width="100" height="100" alt="A fruit basket" />
The alternate tag is also displayed when a image is not found or when a browser is unable to load images. Like this:
To make things easier for users with screen readers and special needs, you can also add a title attribute to the image. Like this:
<img src="/path/to/image/fruits.jpg" width="100" height="100" alt="A fruit basket" title="Fruit Basket" />
This title attribute appears in a popup when a user takes the mouse over to an image. Users with screen reader software can configure their software to read this title.
Using both the alt text and title attribute improves the performance of your images in search engines. It also helps many users with special needs to be able to understand your web pages.
The Problem
You can add a title to your images in WordPress when uploading them using the default media uploader. However, this title is used by WordPress internally, and it is not the same as the title attribute used inside the image tag in HTML.
To add the title attribute, you will have to switch to text editor or edit an image after inserting it. That sounds like a lot of extra work if you upload lots of images to your WordPress site. Here is how you can fix it.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
Adding Title Attribute to Images in WordPress
First thing you need to do is install and activate the Restore Image Title plugin. Upon activation, simply go to post editor and try uploading an image. After an image is uploaded, use the Title field to add whatever text you would like to appear in the title attribute.
Next, simply insert the image into your post. Now when you take your mouse over to the image in the visual editor, you will see the title text appear in a popup.
What this plugin does is that it takes the value you entered in the image title and adds it to the image code as title attribute.
Please note that this plugin will not automatically add title attribute to old images. It will only work for images you upload after activating the plugin.
We hope this article helped you easily add title attribute to images in WordPress. You may also want to take a look at how to fix most common image issues in WordPress.
