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

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.

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!