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:

Alternate text displayed in a broken image

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.

Text from title attribute displayed in popup

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

Subscribe to WPBeginner

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.

Replacing the title with the title attribute for image

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.

Title text displayed on the image

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.

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.