A meta image for WordPress

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

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!


About Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at 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.

25 comments:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>