Categories
Web Standards WordPress

Title, Caption, Alt Text, and Description: Harnessing the Power of WordPress Image Metadata

The Title, Caption, Alt Text, and Description fields for images in WordPress are the most ignored and underutilized features that can improve your content and bring more people to your site. Learn how to use them to create better user experiences and more attractive and compelling content.

Images play an important role in web publishing, and WordPress makes it easy to add images to your content in several different ways. What you probably didn’t know is that taking a few extra minutes to fill in the “Attachment Details” for your images can improve their communicative value, create better user experiences for your visitors, and bring more people to your site.

In this article I’ll explain what the Title, Caption, Alt Text, and Description fields are all about and why they matter more than you think.

Every Image has its own Attachment Post

Screen grab of the Attachment Details fields in WordPress
The Attachment Details fields show up any time you add an image to a post or page

Let’s start at the beginning: When you add an image to WordPress, whether it be as a Featured Image (previously “post thumbnail”), an image in a post or page, or as a header image, you are actually creating a new Attachment Post. Once the image is added you can edit its Attachment Post by clicking the Media button in WordPress admin. This gives you a list of all the attachment posts associated with uploaded media items on the site.

Depending on your current theme you may also be able to access the Attachment Post page for the image from the front end of your site, and this attachment page may display some of or all of the meta data associated with the image.

Images and Attachment Posts can carry a lot of metadata

When you add a new image to a post you are prompted to add so-called “Attachment Details”. These attachment details are probably the most ignored and underutilized features of WordPress and if you learn what they are and how to use them you’ll never ignore them again:

Title

The title is the only attachment detail required by WordPress. Title defaults to the name of the file but should be changed to a descriptive title of the image. This is the title of the Attachment Post for the image and just like a regular post the title will define the pretty permalink for the attachment post. You can also use the Title to search for images in your media archive.

In previous incarnations of WordPress the Title field was mapped to the optional HTML title attribute. This resulted in the title of the image appearing as a tooltip any time a mouse hovered over it. In the current incarnation of WordPress the title attribute for the image itself and also the optional image link are added separately. To do so you have to add the image to the post, then reopen it by selecting it and clicking the pen icon in the top left hand corner, and toggle the Advanced Options section of the Image Details modal window. Here you find Image Title Attribute as well as Image CSS Class (of which I spoke in a previous article), Open link in a new tab, Link rel, and Link CSS Class.

Screenshot of the advanced image options fields in WordPress
The Advanced Options under Image Details allow you to add title attributes to your images.

Caption

The caption is the text traditionally displayed underneath the image though the exact placement will vary depending on your theme. The caption is not tied to the attachment post but to where you choose to place the image in a post. That means if you use the same image in several different posts or several different places within a post you can have individual captions for each.

In WordPress captions are added using the shortcode which wraps around the <img> and optional <a> tags. This is why you can’t move images with captions in the visual editor but have to do it from the code end. For the image above the entire embed code complete with caption shortcode looks like this:


[caption id="attachment_2896" align="aligncenter" width="700"]
  <a href="http://mor10.com/?attachment_id=2896" target="_blank" rel="attachment wp-att-2896">
    <img 
      class="wp-image-2896 size-large" 
      title="Learn more about the Advanced Options for WordPress images" 
      src="http://mor10.com/wp-content/uploads/2014/05/title_attribute-700x363.png" 
      alt="Screenshot of the advanced image options fields in WordPress" 
      width="700" 
      height="363" 
    />
  </a>
  The Advanced Options under Image Details allow you to add title attributes to your images.
[/caption]

It is worth noting that WordPress image captions can contain HTML including links.

Alt Text

The alt attribute or “Alt text” is mandatory for images on the web but is often ignored because it seems unnecessary. This is unfortunate because the alt attribute is both important and powerful.

The alt attribute is the text that displays when an image does not display. The general rule of thumb when applying alt text to an image is to describe in text what the image is communicating.

There are specific rules that govern how the alt attribute should be used:

  • If the image has communicative content (either says something or is illustrating something that has relevance to the content on the page) the alt text should describe the content either by repeating the text in the image or describing its content.
  • If the image is wrapped in a link the alt text should describe the target of the link.
  • If the image is purely for decoration and has no communicative value the alt tag can be left blank (alt=””)

People often think that the alt text is for visitors with accessibility problems. That is true, but it’s just part of the story: The alt text is there to describe image content and relate it to your overall content. While most visitors don’t see the alt text, search engines do and they index the images based on them. And as we move into a world of wearable devices that don’t always show images the alt text will become more important than ever before.

Bottom line: Always describe your images in the alt text field unless they are purely for decoration.

Description

The Description field is probably the best kept secret of images in WordPress. If you add text to the description field that text will be stored as post content for the attachment post. That means if someone lands on the attachment post page for the image they will see the long description (provided the current theme supports it). To see how this works try clicking on one of the images in this article. You’ll be taken to the attachment page for that image where you see the image title, the image itself, the caption, and the description as post content. The attachment page in the theme I’ve built for this site also provides meta data that shows what post the image is associated with, a link to the original image size, and even navigation links to other images within the same post.

Once you’ve added an image to a post and you want to change or add to the Description you have to open the editor for the image Attachment Post. You can do that by going to Media in admin and finding the image or by navigating to the image on the front-end of your site and clicking Edit Media in the WordPress Toolbar. Though the Description field does not have the Visual (WYSIWYG) editor you can treat it exactly as you would any other post or page. It takes HTML and allows you to format the content to make it look like a regular post.

The Power of Metadata

Combined these text fields are a powerful feature that can be used to create better and more communicative experiences to your visitors and also bring new visitors to  your site. To see how let me give you an example:

Let’s imagine for the moment you are a wedding photographer and you are publishing a photo essay about a recent wedding. In the main post you add some images with basic captions and you describe these images with alt text that also includes your company name, words like “wedding photographer”, and the city you work in. When the post is published Google will index this alt text and people searching for wedding photographers in your city are likely to find your images during an image search.

You also add a standard WordPress image gallery to your post, but instead of using a lightbox to make the images “pop” up in the browser you redirect each image thumbnail to the respective attachment page for that image. Then when you add the images in you write a story for each of the images in the Description field.

Now when the visitor clicks on one of the images in the gallery she is taken to the attachment page where she gets to see a larger version of the image along with the added description. And again this description is indexed by Google. That means you can add the names of subjects in the images, detailed descriptions of products, services, locations, or the subject matter, or provide stories to go with each individual image for a truly unique experience. More than a boring image gallery you can create a photo essay – an immersive experience.

Another example of a good way of using these features is to share slides from a presentation. By adding the slides as individual images, adding comprehensive descriptions of each slide in the Description field, and linking your gallery to the attachment page you can provide far more information about your slides to your audience and make that information searchable on the web.

Start Using Your Attachment Details Today!

Now you understand what the attachment details are and how WordPress uses images and their metadata. The next step is to start using these fields actively to provide your visitors with better user experiences and get your content indexed in more places. I wasn’t joking when I said these are the most ignored and underutilized of WordPress’ features, and that also means if you start using them actively and getting the most out of them you will be way ahead of the competition. So what are you waiting for? Go set up proper titles, captions, alt texts, and descriptions for your images and report back!

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

70 replies on “Title, Caption, Alt Text, and Description: Harnessing the Power of WordPress Image Metadata”

Excellent stuff, Mor10. I’ve read about all this stuff over the years, but your descriptions (and reasons why these things are important) are the best I’ve seen. Thank you.

hey Morten Rand-Hendriksen,

Great article !

i am currently searching for a wordpress plugin or even a cms that would allow
user to input meta data into a jpeg file …

for example in an image galery, under each picture, there would be some fields where the user can input the values, like :

model name
photographer
ect ..

and those infos would be written in the meta data section of the jpeg file …

i was wondering if its a feature that is used alot? maybe it has a name ? have you ever heard of a plugin that allows that in wordpress ?

thankyou very much

Vito

Great Stuff and clarifies a lot telling me that I need to check out the so needed pricture data ….Do you recommend that the picture is uploaded with a”name” already preformed, so that the link picks up a “good name” for it on the Word press platform?

Is it possible to add extra content, like an html editor for extra text and images on the attachment page?

@Mark: The Description field is a full post editor. If you go to the Media library and open the attachment post you’ll see the Description field with the typical text editor options. I’m not sure why it doesn’t show the WYSIWYG editor but you can add the exact same code here as you would in the WYSIWYG editor.

Hi Morton

I was talking with Joe Dolson about the use of alt tags with images and how if we duplicate the caption in the alt tag then we are actually creating redundant content for the screen readers. He suggests we use the aria-describedby tag instead of duplicating the content as you have suggested above?

For example if I had a picture of Bear eating fish in stream alt tag would be Photo of bear eating fish in stream Which is actually the duplicated of the caption.

I though of it this way. If you have someone reading you a book would you want them to repeat every sentence?

So in your post it says

If the image has communicative content (either says something or is illustrating something that has relevance to the content on the page) the alt text should describe the content either by repeating the text in the image or describing its content.

Aren’t you saying duplicate the content? Also if they content is already in the caption why aren’t you suggesting people use the aria-describedby attribute?

The breakdown I provided in the article is the official alt decision tree as mandated by web standards. The scenario you are outlining is an addendum that has to be considered separately. The alt tag is not just about accessibility but also situations in which the image fails to load or is indexed in other ways. While duplicating the content may be annoying for a non-sighted user, excluding the alt tag may go against standards. There may be a way of making this conditional so images with alt tags hide the captions for text-to-speech browsers or similar. I am not sure.

Bottom line this is more complicated than simply a matter of duplicating content. There are two conflicting standards at play. And captions are not mandatory. In most cases they are not used.

So as you say it’s not wrong their are just two different standards at play.

As Monzilla suggests that:
Note: Opinons may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Which was my entire point on WP Bacon. This post differs then what other accessibility developers have suggested and talked about.

Also as a side note about accessibility I noticed that my link in the comments didn’t have a underline or a hover state when you click on it.

Both of these opinions are valid in different ways; image alternatives are, to be blunt, much more complicated than they may seem at first glance. It’s important to consider whether the image has a caption; whether that caption conveys the same image as the alt attribute would (since sometimes a caption only conveys information about the image, as opposed to representing the image).

Every alt attribute context needs to be considered uniquely. As a software developer, where I’m not specifically providing the content, I generally lean on the side of providing more content, although avoiding duplicative content is still desirable.

The bottom line tip to always provide alt attribute text unless “purely decorative” is fair; but has to be considered as a very simplified version of what would be an ideal decision process – but any decision making process needs to be based on an actual scenario with actual content. If I was making a general recommendation of best practices, this bottom line tip is exactly what I’d go for. Special cases are always going to be present, however.

Yes to all of this. Images are as individual as the text they support. Each item needs to have its own descriptor. I generally use captions to add snarky comments about images in my posts so the alt tag is necessary. When I build sites for clients where the caption is a descriptor, I leave the alt tag blank.

Interestingly I ran across your post when trying to solve the problem of displaying descriptions with an image, either in a post or attachment. You seem to indicate that the description is supposed to automatically display with the attachment post, but it does not in twenty thirteen. I’m still seeking a resolution to this, but it would be fantastic if it did display. From my recent experience with twenty thirteen it appears to only automatically display along with images in the carousel. That being said, I really appreciate the clarification on the alt id field as I’ve pretty much discounted it. I will be reevaluating how I use that field now. Thank you!

The attachment page template is not standardized so different themes display different information. You have to check the theme you want to use if it does support this feature. Some do, some don’t. There is no consistency to it at all.

Hi Morten and thanks for an informative post. I have the same problem as Esther (posted a year ago) and I’m afraid in your answer you are missing the point. I am currently using the “FooBox Free Image Lightbox” and “Foogallery” plugins which work nicely together.
The problem is that the images descriptions are correctly displayed under the images when I click on the thumbnail in a gallery, but NOT on images inserted individually if I use the Add Media button in posts or pages.
This is not a Themes issue. The problem is that on the Insert Media modal window you can see (and edit) all of an images’ properties (Title, Alt text, Caption and Description) but… after you’ve clicked the Insert into page button and are back on the Post (or Page) edit page, the only attributes of an image media that get inserted are src and alt, and the Caption attribute is inserted in the [caption] tag.
Upon examining the text source of a Foogallery gallery, I can see that it inserts this bit of code in the attachment’s tag:
target=”foobox” data-caption-title=”…” data-caption-desc=”…” data-attachment-id=”nn”.
If I insert this code manually in my individual image attachments inside a post or page, with the matching description, I get the desired result.
Now my question is: is there a way to hack the Insert Media modal window in order to modify its output to a post or page when clicking the “Insert into page” button?
Thanks in advance!

Hi mor10

Thanks about your nice description, I have seen all word press tutorial video they are really good. I have one question, which fields are important for Google and search engine see it and which is not search engine see it?

Very well explained Morten. Thank you.
Do you know if there is a way for WordPress to import the metadata / IPTC information associated with an image, which has been added prior to upload. I would like to be able to do this work offline, then upload the images and have WordPress retain that information.

Thanks

When you upload images to WordPress the original image file is retained as the original. If that file has IPTC info then it will remain in place even inside WordPress. The auto-generated sizes will not retain that info though.

Hi Morten,
I’ve been racking my brain on this one…maybe you could help?
I think this goes along with duplicate phrases/keywords that are being asked in these comments.

If I have images used for tutorial type stuff, e.g. bang the hammer on the nail.
Now, I’d like to put in the image description in wordpress the text “bang the hammer on the nail”.
But, I also use that text below the image in my wordpress post. (bang the hammer on the nail”)

Would there be a problem with duplicate phrases in the image desciption field and the same post text ruining my seo?

Using caption instead of post text would be the easiest answer but, I can’t use the caption, I need the text to be in my post for schema.org reasons.

and

This is not refering to alt text….that would probably be something like “A hammer hitting a nail into a piece of pine wood.”

Anyways, I’d love to hear what you think or if you need any info just let me know. Thanks for your post. Image metadata is so under used across all applications and your doing a good service here.
anton

Hi,
I’m in the middle of testing just that. I’ve found the “Headline” field from IPTC is auto imported to the “Title” image field in wordpress. The IPTC “Desciption” Field is imported to the same “Description” field in WordPress.

Just to note there is also a “title” field in IPTC. This does not import to the “title” field in wordpress. Unfortunately, there is not an exact standard across wordpress and IPTC.

You have written an excelllent post, I agree that image metadata counts a lot, I just wanna know if there is a way or plugin for adding automatic description in the wordpress gallery/gallery attachment pages? And if there is a plugin that can help us to edit all the images in a massive number, opening images one by one from the media library for adding or removing the title and alt tag is a kind of big hassle for me.

thanks in advance

Hello,

How do I change image description css in wordpress? my image description it’s look like post content, not inside the border of image wp-caption, and I want image description with font-weight: bold

Thanks

Hello, thank you for your article, i just one question :

– Is it possible to get metadata of one media and publish it on site template?

like : get media id and after get his metadata …

Thank you

Thanks for giving elaborately description. I think if we mention Caption and Alt text, it will be helpful for SEO. But most of the people don’t know about this, even Me 🙂 . I did not know the fact. From now I’ll add caption and alt text. Keep writing, go ahead.

Great feature
I have just learnt so much about images , i just used to throw them on to page and hope of the best , but your detailed information is great
Keep up the good work

They use every trick of the trade including article writing to get that traffic to their niche product.
s true, waxing has a higher price tag of a razor
or a bottle of Nair, but the results are smoother skin and long lasting results.
An analysis may show the result in terms of both dollar
and percentage changes.

Hi Morten,

I read your explanations of the attachment details. I am using a WordPress gallery and would like to see a description on hover. Are you familiar with the [gallery link="file" gutterwidth="1" size="large" hidecontrols="true" captiontype="h4" targetsize="full" captions="show" ids="838,837,832,830,789,794,828,781,786"]

Do you know what I need to do here to see also a description on hover. Filled in a description on one of my images in this gallery.

I just read this article , I just found out that it could have an effect on a google search . Turns the image could also be a support in google SERP . I think from now on should pay more attention to post images and give detailed information .

Hello, thank you for such informative article :). The guy who helped me to “build” the blog or doesn’t know anything or was too lazy to explain me – like he told, I don’t need to fill any lines near image :(. So all my posts build in wrong way. I just wrote new post, with all recommendation from Your article. Could you please look at it and tell if I understood everything correctly – maybe made some mistakes? After it, I will try to update all written posts, to make my blog google friendly:)
http://lifeinbigtent.com/indonesian-discoveries-1/

Thank You:)

Hi there. Great article, super informative. I’m wondering if you can clear a few things up for me. Once I realized the importance of filling in the fields for Caption, Alt Text, Description, etc, I went back into my media library in wordpress and meticulously filled them in. However, when I went back to my posts to see my new captions, none of them were transferred.

Also, do you have any tips for how to make the sections different? For example, if I have a photo of a plate of shoestring fries, my caption might be “Shoestring fries from The Spotted Pig, NYC.” Is it ok to use the same thing for alt text? I’ve read that it isn’t, but I’m not sure how much more creative one can get. Would I include the name of my blog in the alt text for google searches?

Thank you for your time.

Rebecca

Hi Rebecca, you are correct in your observations: When you edit the caption and alt text settings for an image in the Media Grid, those changes only take effect on future insertions of that image. That’s because captions and alt texts are added into posts and pages as HTML and not dynamic content.

And as Rebecca asked so my next question would be:
Can i edit the image captions and alt text add it to a post and those will show up and then if i change those in my media grid and then add it to a new post the new ones will show up? Will the old one’s stay in the HTML for the old insertion or wil they change when I change them for the new post?

In other words I believe you are saying the html for the old caption and alt text is not dynamically updated in the HTML?

Hi there, How can I add images on my footer area of my site, I’m using “estore theme” from elegant theme. I put already the code on my footer.php my code was like this but when I view my site, the image will not appear. anybody help ? thanks and God Bless.

Hi Morten:
Just came across your very informative piece on Title, Caption, Alt Text and Description, for which I thank you. I am a photographer who worked for many years for a humanitarian organization with a large photography archive and CMS and extensive caption details, many of which I’ve truncated and used within my photography portfolio in the caption field. I’m still however, confused about alt text and description, none of which I have yet done. For example, in one of my photographs, the caption reads (in part): “An indigenous Añu woman sits inside her home with her 1-year-old daughter Georgita, in Laguna de Sinamaica, a lagoon in Paez Municipality in the north-western state of Zulia, Venezuela, in 2006.” How would I rewrite this as example in the alt text and how would it differ in the description field? To further confuse, am I putting together a list of keywords for the picture, with text separated by commas, which would then include my name, the name of my website and other text? I am loathe to change something that may now change how the captions appear on the site, which is in hover. Sorry for the long post. Someone suggested I use the Yaost plug-in; is this in lieu of doing alt-text or in addition to? Help, so confused….

i prefer to disable image attachment page for my blog, i use ‘none’ for all my uploaded picture
i just fiil in the title, caption and alt text form.

btw thanks for your tips 🙂

excellent sir. but i have a question. i am sorry if it already asked before. is there any impact to index, if we repeatedly using several images in one post with the same title, alt text, and description? tks in advance for your reply, sir.

This is an excellent description of why to use metadata with your image:

It increases the probability that someone will stumble upon your website!

I couldn’t agree with you more. These are the essential elements for a better ranking. When I started optimizing my website images, I was really amazed, my site get higher ranking in search engine result page. These are very helpful tips on how to properly optimize images for better rankings.Thumbs up!

Came across this post when trying to find an answer. You say “If the image is purely for decoration and has no communicative value the alt tag can be left blank (alt=””)” But what do you put in the WordPress alt field to make it generate that?

i prefer to disable image attachment page for my blog, i use ‘none’ for all my uploaded picture
i just fiil in the title, caption and alt text form.

btw thanks for your tips

By the way, as a visual artist, I have also been able to add a PayPal button in the description of photos, so that my artwork can be purchased. This is a temporary fix until I change the theme of my website to accommodate e-commerce, but it’s a great temporary fix!
Wanted your readers to know that the description field can handle that–including buy now, donate, register, and other PayPal buttons.

I am one of those bloggers that ignore or plainly refuse to complete the metadata for the images uploaded. But SEO suggestions always, always ask for alt text. I started researching about “alt text” and came across your site. Thanks for all the info you put together. You did an excellent job.

You mentioned above: “When you edit the caption and alt text settings for an image in the Media Grid, those changes only take effect on future insertions of that image. That’s because captions and alt texts are added into posts and pages as HTML and not dynamic content.” Does this mean it is useless to go back and fill out all the metadata for all those images ALREADY POSTED? If the answer is yes, can I delete the images then reinsert them again so that all the metadata info will be attached to that image?

Thanks again for this very informative article.

Comments are closed.