WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Beginners Guide» Image Alt Text vs Image Title in WordPress – What’s the Difference?

Image Alt Text vs Image Title in WordPress – What’s the Difference?

Last updated on December 12th, 2020 by Editorial Staff
196 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
Image Alt Text vs Image Title in WordPress – What’s the Difference?

A lot of content on the web includes 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 an image title, often beginners do not understand the difference and how to use them.

In this article, we will share the difference between image alt text vs image title in WordPress, so you can improve your image SEO.

Using image alt text and title in WordPress

What is the Alt Text and Image Title?

Alt text is short for alternate text. It’s an attribute added to an image tag in HTML. This helps visitors who can’t see the image and search engine bots to understand what an image is about.

Alt text is also shown if the image on your page can’t be found or can’t be displayed for any reason.

The alt text "Bunch of flowers" displays next to a broken image icon

Alt text is different from the image’s title. The title is text that’s displayed in a small popup box when you bring your mouse cursor over the image.

An image with the title text "Flowers from my garden"

Alt tag and image titles are also used to improve the accessibility of your website for those with poor vision or screen reader devices.

The screen reader will read the text of your article and when it comes to an image, it will read the alt text. Depending on the user’s settings, it may also read the title text.

For both accessibility and search engine optimization (SEO), alt text is more important than title text. This is why we strongly recommend including alt text for all your images.

Pro Tip: We recommend using All in One SEO plugin for WordPress to add proper image sitemap and other SEO features to improve your SEO ranking.

How to Add Alt Text to an Image in WordPress

WordPress allows you to easily add alt text for your images. Simply create a new post or page, or edit an existing one, and add an Image block.

If you’re not sure how to add a block or you need some extra help with the block editor, just check out our tutorial on how to use the WordPress block editor.

First, upload your image or drag and drop it into the Image block. You can then set the alt text on the right hand side of the page.

Adding alt text to an image in the WordPress block editor

You can also add alt text to an image by going to Media » Library and clicking on the image to edit it.

Remember, this won’t change the alt text for any instances of that image that you’ve already inserted into posts or pages. However, if you add the image to a post or page after adding alt text here, then the alt text will be included with it.

Viewing or editing the alt text for your image in the WordPress media library

If you’re still using the classic WordPress editor, then you can add image alt text when adding the image.

First, click on ‘Add Media’ above the posting box.

Click 'Add Media' in the classic editor to add an image to your post

Either upload the image from your computer or click the ‘Media Library’ tab to view images you’ve already uploaded.

Next, click on the image you want in order to select it, and then type the alt text you want into the ‘Attachment Details’ of your image:

Adding alt text to an image in the classic editor

How to Add Image Title in WordPress

There are two types of title attributes that you can add to your images.

The default WordPress title attribute is not added to the HTML code for the image. It is used internally by WordPress to identify media files.

If you want to add titles to your images, then you need to do this using the Media Library. You can’t currently add a title to an image when editing it in the visual editor.

The title isn’t necessary for image SEO or for users with screen readers. It can be useful in some cases, though, as it lets you provide information when a user brings their mouse over the image.

One thing that’s often confusing for WordPress users, including some experienced users, is that WordPress lets you give images a title. This is completely separate from the image title attribute.

For instance, you’ll see a ‘Title’ field when you edit images in the media library:

Viewing or editing the image's Title in the media library

The ‘Title’ here is used by WordPress to identify the image. When you click the ‘View attachment page’ link at the bottom of the screen, you’ll see the title is used as the title on that page:

Viewing the image's attachment page, with the image title shown

While this may be helpful in some cases, it’s not the same thing as the image’s title attribute. So how do you create that?

In the old classic editor, you can add the title attribute by clicking on an image then clicking the pencil icon:

Editing an image in the WordPress classic editor

You’ll then see the ‘Image Details’ screen. To set the image title attribute, click the little downward arrow next to ‘Advanced Options’ at the bottom:

Click the downward arrow to view the Advanced details for your image

You can then set the image’s title attribute.

Setting the image title attribute in the classic editor

Unfortunately, in the block editor, it’s not quite so easy to edit the image’s title attribute. It’s still possible, though. You can add your image as normal then edit the block as HTML code.

To switch to the HTML view of the block, click ‘More Options’ (the 3 vertical dots) then click ‘Edit as HTML’.

Editing your image as HTML

It might look a bit confusing, but all you need to know is that the <img> tag is what creates your image. You’ll see your image’s filename there.

The HTML code for the image

To add the title attribute to your image, you simply need to add title="Your image title here" to the image tag like this:

<img src="http://www.yourwebsitename.com/wp-content/uploads/2020/03/daffodils-bunch-vase.jpg" title="Bunch of daffodils" alt="A lovely bunch of daffodils" class="wp-image-257"/>

It doesn’t matter where in the image tag you put the title attribute.

After entering the title, you’ll see a message warning that “This block contains unexpected or invalid content.”

Warning message saying that the block contains unexpected content

Simply click the ‘Convert to HTML’ button and your image block will be converted to HTML code. It will still display on your site exactly as before, but you won’t be able to edit the image using the block editor.

Why and How You Should Use Alt Text and Image Title

We strongly recommend using alt text for all images. Here on WPBeginner, we also add a title to all images. However, this is less important than the alt text.

Alt text is important because Google focuses on it as a ranking factor for images. It is also used by screen readers to help visitors with impaired vision to fully engage with your content.

It’s important not to stuff keywords into alt and title tags. Make them descriptive and helpful, so that they’re useful for visitors who need them. You can use your keywords where relevant, but don’t overdo it.

For example, if you’re writing an article about the best WordPress hosting, then your target keyword could be “best WordPress hosting”.

You might have a screenshot in your article showing users how to set up an account with a popular web host like Bluehost.

Here are some possible options for your alt text for that image:

  • “Account setup” – this is not very descriptive and also doesn’t include anything related to your keyword
  • “Best WordPress hosting, WordPress hosting, best web hosting for WordPress” – this doesn’t describe the image and is stuffed with keywords
  • “Setting up a WordPress hosting account” – this is much better as it’s descriptive and uses part of the keyword in a natural and appropriate way

We hope this article helped you understand the difference between image alt text and image title in WordPress. You may also want to take a look at our beginner-friendly guide on how to optimizing images for the web to speed up your site, and our comparison of the best WordPress SEO plugins & tools to improve your rankings.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

196 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

51 Comments

Leave a Reply
  1. Devin says:
    Feb 18, 2021 at 1:24 pm

    When adding a Title to the media files, it makes it searchable on the WP website. Can that be eliminated so images and files are not being pulled as a search result? Is there another way other than leaving the Title field blank?

    Reply
    • WPBeginner Support says:
      Feb 19, 2021 at 9:28 am

      Most SEO plugins should have the option to disable indexing or you can use your robots.txt to disallow indexing.

      Reply
  2. Sam says:
    Nov 19, 2020 at 9:34 am

    Should the alt text end with .jpeg extension while editing wordpress. Please help

    Reply
    • WPBeginner Support says:
      Nov 19, 2020 at 9:57 am

      No, you don’t need to add a file extension in your alt text.

      Reply
  3. Christina says:
    Jun 20, 2019 at 1:30 pm

    Hi: I was wondering if I should have dashes in between the words in my image title. i.e. (yellow-gold-round-earring). I was sure I saw that somewhere, but it doesn’t seem you use that method. Any help would be much appreciated.
    Thank you!

    Reply
    • WPBeginner Support says:
      Jun 21, 2019 at 9:54 am

      For image names, it’s important not to have a space in the file name, whether you remove the spaces or replace them with dashes is personal preference.

      Reply
  4. Kiran More says:
    Apr 18, 2019 at 6:14 am

    Alt tag not showing up on frontend even after updating.

    Reply
    • WPBeginner Support says:
      Apr 18, 2019 at 11:53 am

      If you have any caching on your site then you may want to clear your cache to see if that allows toe alt text to be added properly.

      Reply
  5. Tor says:
    Mar 23, 2019 at 1:03 pm

    Is there a way to display the image title like the caption?
    been googling all day, not kidding.

    Reply
    • WPBeginner Support says:
      Mar 25, 2019 at 2:59 pm

      That would depend on your theme for the styling of your images and if they display the image title the same way they do the image caption.

      Reply
      • Tor says:
        Mar 28, 2019 at 5:53 am

        Want to give some hints on what I should search for to implement it? google doesn’t know …

        Reply
        • WPBeginner Support says:
          Mar 28, 2019 at 10:08 am

          You would want to reach out to your specific theme’s support and they should be able to assist :)

  6. Mary says:
    Mar 10, 2019 at 10:12 am

    The video was helpful. Thank you.

    Reply
    • WPBeginner Support says:
      Mar 11, 2019 at 11:58 am

      You’re welcome :)

      Reply
  7. Lance says:
    Jan 2, 2019 at 3:25 am

    Does using site-builders (I use Elementor) or plugins like W3 Total Cache prevent the adding of Image Title and Alt Text attributes?
    Can you add the attributes to Background Images?

    I’m asking because my Home page uses a Background Image as its hero just below the site header. But I cannot find a spot in WP classic editor or dashboard to add both attributes.

    In fact, if I search the source-code for the page, I do not see my image upload path & filename listed anywhere in the 915 lines of code.

    Can you advise?
    Thanks.

    Reply
    • WPBeginner Support says:
      Jan 2, 2019 at 3:25 pm

      Those should not prevent image titles and alt text, you should be able to go to your media library and edit the attributes from there as long as it is not a default image from the theme if you can’t edit it where you’ve set it. If it is from the default theme you would want to reach out to the theme’s support and they should be able to let you know where to find the image.

      Reply
  8. Renee says:
    Dec 8, 2018 at 7:21 am

    FYI – With Gutenberg it is impossible to add the Image Title Attribute (title=”example”). You cannot access the field like in Classic and you cannot add it with html (it will give a message to resolve an error).

    Reply
  9. Rohan says:
    Oct 17, 2018 at 1:26 pm

    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 >.<

    Reply
  10. Amit says:
    Sep 11, 2018 at 8:50 am

    Hi, once the image is uploaded in media file, changing the titles of the image later will it lead to broken images?

    Reply
    • WPBeginner Support says:
      Sep 11, 2018 at 12:38 pm

      Hi Amit,

      No. You can change title of an image without breaking it by doing that from WordPress media library.

      Reply
  11. Henry Ramirez says:
    May 19, 2018 at 9:04 pm

    Is any plugin that do this automatic.??

    Reply
  12. Avinash says:
    Apr 23, 2018 at 3:55 am

    I analysis many websites they didn’t use title attribute is it necessary?

    Reply
  13. Chip says:
    Mar 29, 2018 at 4:02 pm

    Well, how could we add alt text to featured images?

    Reply
  14. jessie says:
    Oct 19, 2017 at 8:38 am

    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?

    Reply
  15. Brenda Roy says:
    Sep 14, 2017 at 5:17 pm

    Would you ever suggest using the same words in the title and alt text?

    Reply
    • WPBeginner Support says:
      Sep 14, 2017 at 10:31 pm

      Hi Brenda,

      Yes, you can use the same text in both title and alt fields.

      Reply
  16. Carl Davies says:
    Sep 7, 2017 at 3:43 pm

    This really helped me understand the two, and why I should include keywords in the alt text. Thank you!

    Reply
  17. Kim Sertich says:
    Jul 14, 2017 at 8:13 pm

    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.

    Reply
    • William Kemsley says:
      Feb 4, 2018 at 11:23 pm

      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.

      Reply
      • WPBeginner Support says:
        Feb 12, 2018 at 4:21 pm

        Hello William Kemsley,

        Thank you for your feedback. We will work on it to improve our future videos.

        Reply
  18. Paulina says:
    May 10, 2017 at 9:49 am

    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?

    Reply
  19. Bato says:
    May 4, 2017 at 1:12 am

    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.

    Reply
    • WPBeginner Support says:
      May 4, 2017 at 10:56 pm

      Please see our guide on how to add title and nofollow to insert link popup in WordPress.

      Reply
  20. Amit Kulat says:
    Apr 1, 2017 at 2:41 pm

    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.

    Reply
  21. Sarah BAIN says:
    Apr 27, 2016 at 3:37 pm

    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……

    Reply
  22. Sarah BAIN says:
    Apr 27, 2016 at 3:32 pm

    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.

    Reply
    • WPBeginner Support says:
      Apr 27, 2016 at 4:46 pm

      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.

      Reply
  23. Bobby says:
    Jan 30, 2016 at 9:22 am

    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.

    Reply
  24. Bobby says:
    Jan 30, 2016 at 8:24 am

    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.

    Reply
  25. jaswinder says:
    Nov 23, 2015 at 10:01 pm

    I watched your video and learned little bit. Now I read this article and learned more. I am also beginner at wordpress.

    Thanks.

    Reply
  26. david walker says:
    Feb 12, 2015 at 5:21 am

    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?

    Reply
  27. Chrissy Morin says:
    Nov 9, 2014 at 12:30 pm

    I knew about the alt tag but wasn’t sure about the title description. Thanks for explaining :)

    Reply
  28. Christopher Anderton says:
    Oct 23, 2014 at 1:24 pm

    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

    Reply
    • Yaroslav Nikitenko says:
      Mar 30, 2015 at 6:17 am

      “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.

      Reply
      • Bobby says:
        Jan 30, 2016 at 10:08 am

        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.

        Reply
  29. Jonah N. says:
    Oct 22, 2014 at 4:44 pm

    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?

    Reply
    • Reup says:
      Oct 25, 2014 at 11:20 am

      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.

      Reply
  30. Praveen Kumar says:
    Oct 21, 2014 at 3:09 pm

    Thanks for this. Came to know the importance of alt image.

    Reply
  31. Muddasir Abbas says:
    Oct 21, 2014 at 11:30 am

    how to show image title and alternative text dynamically in a loop?

    Reply
  32. Roger Lill says:
    Oct 21, 2014 at 11:20 am

    Basic stuff, but I don’t always do it. I will now, thanks.

    Reply
  33. Viktoria Michaelis says:
    Oct 21, 2014 at 10:17 am

    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?

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
Smash Balloon
Smash Balloon
Add Custom Social Media Feeds in WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
InMotion Hosting
InMotion Hosting Coupon
Get an exclusive 50% off InMotion hosting plus a free domain.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.