A large amount of web content consists of images however not many website owners optimize their images for speed or better search rankings. Even though WordPress comes with the option to add alt text and image title, often beginners do not understand the difference and how to use them. In this article, we will show you the difference between image alt text vs image title in WordPress.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
What is Alt Text and Image Title
Alt text or alternate text is an attribute added to an image tag in HTML. This text appears inside the image container when the image can not be displayed. It helps search engines understand what an image is about. Alternate text is also very helpful in case images on a page cannot be found.
Image title is another attribute that can be added to the image tag in HTML. It is used to provide a title for your image. The text you enter inside the title tag will not be shown to user when a image cannot be displayed. Instead, it is displayed in a popup when a user takes their mouse over to an image.
Alt tag and image titles are also used to improve accessibility of your website for those with poor vision or screen reader devices. A screen reader will read the entire text article and when it comes to an image, then it will say Image: Title XYZ. This allows the user to know why you added the image there even if they cannot see it.
How to Add Alt Text to an Image in WordPress
WordPress allows you to add Alt text for your images when you upload them using the built-in media uploader.
You can also add alt text to an image by visiting Media » Library and clicking on the Edit link below the image.
How to Add Image Title in WordPress
When you are uploading an image using the built in WordPress media uploader, you will see a title field. This title field is used by WordPress to handle your media files and should not be confused with the title attribute used inside an image.
The title you add while uploading an image is only used by WordPress media library to display the list of your media files.
While this title will help you locate media files in WordPress media library, it is not the title attribute that we are talking about. Here is how you would add the title attribute to your images in WordPress.
If you are using the visual post editor, then you need to click on the image and then click the edit button on the image.
This will bring up the image edit popup screen where you need to click on the Advanced Options. This will display the option to add image title attribute.
For those users who are not afraid of editing a little bit of HTML. Simply switch to the Text editor, and add title attribute to your image tag like this:
<img class="alignleft size-medium wp-image-2204" src="http://www.example.com/wp-content/uploads/2014/10/bike.jpg" alt="alternate text for image" width="300" height="199" title="A proper title attribute" />
Alternatively, you can use a plugin called Restore Image Title which uses the title field in the uploader as the title attribute of the images.
Why and How You Should Use Alt Text and Image Title
We recommend our users to use both alt text and image title with their images. One obvious advantage is that it helps search engines discover your images and display them in image search results. The other advantage is that these tags improve the accessibility of your site and explain your images to people with special needs.
Search engines, particularly Google claims that they only focus on alt tag as a ranking factor for images. However, this does not mean that they completely ignore the title attribute. Try adding different texts in both attributes using keywords that describe your images.
Also remember do not stuff too many keywords into alt and title tags. Instead, write descriptive and helpful texts that actually describe the image.
We hope this article helped you understand image alt text and image title in WordPress. You may also want to take a look at our guide on fixing the common image issues in WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.
Can you help me find either a plugin, or the necessary code to allow me to have a gallery that shows one picture at a time, with fwd/bkwd buttons, the image title, image description and the alt-text when you hover?
I’m going mad unable to fathom why every gallery plugin I try seems to be determined to undo WordPress’s good work of having those as separate fields and forcing you to have a single title/alt field! Infuriating when you’re trying to make a more accessible website by using alt-text properly, but still want to be able to use a separate title >.<
Hi, once the image is uploaded in media file, changing the titles of the image later will it lead to broken images?
Hi Amit,
No. You can change title of an image without breaking it by doing that from WordPress media library.
Is any plugin that do this automatic.??
I analysis many websites they didn’t use title attribute is it necessary?
Well, how could we add alt text to featured images?
In my ecommerce site, there is one product which has many images (more than 8) in different angles, do i need to add the same alt for all of images? if not need add alt for every image or add the same alt for them, what i can do?
Would you ever suggest using the same words in the title and alt text?
Hi Brenda,
Yes, you can use the same text in both title and alt fields.
This really helped me understand the two, and why I should include keywords in the alt text. Thank you!
Does it matter for SEO or for searching the images what the alt text is. For example: a photo of a hammer and nails, should it be Acme Co. Hammer and Nails if my company is Acme, or just simply Hammer and Nails. My photos are specific to my service company not stock art.
I am a long time fan of WPBeginner. You have all the answers I usually need. I’d just like to add one suggestion. The videos move too fast for me to get, and skip some of the most elementary steps in the process. For example, in this one the narrator skipped the two step process you need to go through to get to the image in the library. Step One – Go to Media. Step Two – Open Library. Simple, but for old guys like me, not so easy to follow because I wouldn’t be listening if I already knew the basics like you do. Thanks for listening.
Hello William Kemsley,
Thank you for your feedback. We will work on it to improve our future videos.
Hello, thank you for this very useful and informative article.
I didn’t know that Image Title is not the same as Title in the Media Library. You are showing here how to change that for blog posts, which is very useful.
But I have a question: What about products in WooCommerce? For product image and product gallery, I cannot find the “Image Details” menu, where the Image Title can be added. Would you be able to help with this?
Hi,
I loved those information thank you very much. Learned a lot but still need some answers such as how to make back links I link to my website do- follow and no-follow on the wordpress.
Please see our guide on how to add title and nofollow to insert link popup in WordPress.
Interesting Article about Image Attributes in WordPress. I was not knowing that putting title in Insert Media will not set image title attribute. Thanks for the Info.
I thought I should be more specific: the actual text in the Yoast SEO is: “The images on this page are missing alt tags.”
I’m not sure what the difference is between alt text and an alt tag……
Hello,
I’m no website guru and am bumbling my way through the building of my internet site.
I’m using Themify and prefer the gallery images option for aesthetic reasons. However, I have put titles, caption, descriptions and alt texts onto all of my images, but my Yoast SEO always tells me I have no alt text attached to my images….Is that because I’m using the gallery option? Is there a way to fix this?
Thanks in advance for your help.
preview your page containing the gallery. Right click on an image and then select Inspect from browser menu. In the developer tools you will see HTML tag used to display the image. See if it has alt attribute in the image tag. If it does, then you can ignore Yoast SEO’s warning. You may also ask your theme author for support.
Another question. Now if I add an image title it causes a the title to show if you hover over the image. That’s not the end of the world but I didn’t necessarily want the title popping up by hovering over the image. But, since you said its a good idea for Google purposes I am inclined to put titles. My images are nothing more than decor for my site.
I am relatively new to the world of WP and I believe you addressed the question above. So how do I edit an image I am going to use as a background? If the image is not on a page I don’t have the edit feature available. So I need to go to the editor and find the location of the image? If so where do I find it because I didn’t see anything titled images?
Please advise, thanks.
I watched your video and learned little bit. Now I read this article and learned more. I am also beginner at wordpress.
Thanks.
I have spent some time updating the title and alt fields for the images used on my website, but when I view the source code only the title attribute has been updated. The alt attribute is still empty. Why is this and how can I fix it?
I knew about the alt tag but wasn’t sure about the title description. Thanks for explaining
Actually the title attribute should be avoided. Also, i know (lost the url) there is/was a discussion on the WordPress Trac about getting rid of the title attribute field by default in WordPress. More info: https://www.webaccessibility.com/best_practices.php?best_practice_id=2053
“Actually the title attribute should be avoided” – no, this is wrong. In the link you’ve supplied it’s written that one should not rely exclusively on titles, because they may not be displayed by some devices. But using titles makes no harm.
I did a check of a few other sites and almost none use image titles? is it really needed? Does it really help Google and other search engines? And the title popping up when you hover over the image sort of annoys me.
Would be nice to have an explanation of the “Description” field also. My understanding is this has nothing to do with SEO. Is this only for identification purposes for the user? Or some other reason?
There’s no SEO downside as long as the text you’re using is related to the image.
This should help.
Description: A longer image description. Often displayed when you use a thumbnail to link to a larger image.
Thanks for this. Came to know the importance of alt image.
how to show image title and alternative text dynamically in a loop?
Basic stuff, but I don’t always do it. I will now, thanks.
Interesting also to note that when you add an image as a line of code with the appropriate link in text mode – rather than using the media library – then go to visual, then back to text, the alt text line is added to your entered code automatically.
Perhaps in a future version of WordPress the title text will be added automatically and ready to be filled in too?