Image Meta Data 101 – Title, Caption, Alt Text, and Description

WordPress comes with built-in capability to add meta information to your images. This meta data makes it easier to find images for admins, and it is equally useful for users and search engines. Meta Data also helps visually impaired users understand images, and what you are trying to convey. In this article, we will show you how to use image meta data like title, caption, alt text, and description to make your images more useful and optimized.

Why Image Meta Data is Important?

Many beginners often just upload images into their posts. Even though it serves the purpose, these images are not optimized for search engines, for users, and for website administration.

Meta data is additional text that you can add to your images. This text helps search engines learn what your image is about, so they could show the image when someone searches for those words.

Same goes for your users, image meta data like alt text, description, and captions can help them learn more about the image. You can use these fields to provide background stories for your photos and make them more interesting for your users.

Image metadata also helps visually impaired users who can use their screen readers and learn what your image is showing.

In short, image meta data makes your images more interesting, informative, searchable, and useful.

How to Add Image Meta Data

When uploading an image using media uploader, WordPress will ask you to enter attachment details. These attachment details make up the most important part of image meta data.

Attachment Title – The title field in the attachment details allow you to provide a title to your image. This title is used internally by WordPress to sort images in the media library.

Image Alt text – Alt text or alternate text is a required field by the HTML standards specifications. It is displayed when a user’s browser is unable to locate an image. Search engines like Google use alt tag as a ranking factor in their image search results. See our guide on what’s the difference between image alt text vs image title in WordPress.

Description – This text can be displayed on the attachment page for your image. You can enter as much information as you want in the description field. Like the story behind a photograph, how you took the picture, or anything else that you want to share can go here. You can even add links in the description field.

Caption – This is the text that you want to display with your image. Depending on your theme, it will be displayed inside image border or outside the image. See our guide on how to add caption to images in WordPress.

Other Image Meta Data

Apart from attachment details that you can enter, WordPress automatically stores some other useful information about your image. This includes image resolution, image file size, thumbnails generated for the image, exif data obtained from the image, etc.

Depending on your WordPress theme, some of this information will appear on your attachment page. For example, the default Twenty Thirteen and Twenty Fourteen themes’ original image resolution information is displayed on the attachment page.

Users comfortable editing WordPress themes can modify the attachment template via a child theme and show additional meta data information on the page.

How Image Meta Data is Stored in WordPress?

Before we show you how to display image meta data in your WordPress theme, let us explain how image meta data is stored in WordPress.

Images and other uploads are stored as attachments in WordPress. Attachment is one of the default WordPress post type. It is handled the same way as any other post type.

Image title is stored as post_title, description is stored as post_content, and caption is stored as post_excerpt in the posts table of your WordPress database.

Rest of the meta data goes into postsmeta table of your WordPress database. This includes file sizes, location, sizes, and any exif data embedded with the image.

Displaying Image Attachment Meta Data in WordPress

You can display additional image meta data in WordPress by editing your theme files in a child theme.

WordPress first looks for the attachment mime type templates like image.php, video.php, application.php. Default WordPress themes like Twenty Thirteen and Twenty Fourteen use image.php to handle the display of image attachments.

WordPress then looks for attachment.php, or single-attachment.php templates. If it does not find any of these templates, then it uses single.php template to display the image attachment page. See our guide on how to create a custom single attachment template in WordPress.

Copy the template you want to edit to your child theme directory. In this example, we are using Twenty Thirteen theme and editing image.php template. Add this code to your template where you want to display the image meta data.

<?php if ( has_excerpt() ) : ?>
<div class="entry-caption">
<?php the_excerpt(); ?>
</div>
<?php endif; ?>

<?php $description = $post->post_content; ?>
<div class="attachment-description">
<?php echo $description; ?>
</div>
<div class="attachment-exif-data">
<?php
 $meta = wp_get_attachment_metadata($id);
	   echo "Resolution: ".$meta[width]." x ".$meta[height]."<br />";
           echo "Credit:  ".$meta[image_meta][credit]."<br /> ";
           echo "Camera:  ".$meta[image_meta][camera]."<br />";
           echo "Focal length:  ".$meta[image_meta][focal_length]."<br />";
           echo "Aperture:  ".$meta[image_meta][aperture]."<br />";
           echo "ISO:  ".$meta[image_meta][iso]."<br />";
           echo "Shutter speed:  ".$meta[image_meta][shutter_speed]."<br />";
	   $timestamped = $meta[image_meta][created_timestamp];
	   $created_timestamp = date("F j, Y, g:i a", $timestamped);	
           echo "Time Stamp:  ".$created_timestamp."<br />";
           echo "Copyright:  ".$meta[image_meta][copyright];

?>
</div>

Note, that image_meta values are exif data embedded with photos taken by digital cameras, smartphones and tablets. If you are uploading images taken by your own camera then you will probably have this information embedded in your photos. Check our guide about how to add exif photo tags in WordPress.

If you do not want people to leave comments on the attachment pages, then you can disable comments on attachment pages.

Note: that it is not necessary for you to have image attachment pages. You can add image meta data in the attachment details and simply insert the image into your posts. You can also completely disable image attachment pages in WordPress.

Adding Custom Fields to Image Meta Data in WordPress

Since images are stored as attachments which is a post type, this means that they can also have custom fields. Using custom fields you can add any additional meta data that you want to add to your images.

Let’s suppose you want to add photographer name and photographer URL information to your images. Copy and paste this code to your theme’s functions.php file or a site-specific plugin.

/**
 * Add Photographer Name and URL fields to media uploader
 */
 
function be_attachment_field_credit( $form_fields, $post ) {
	$form_fields['be-photographer-name'] = array(
		'label' => 'Photographer Name',
		'input' => 'text',
		'value' => get_post_meta( $post->ID, 'be_photographer_name', true ),
		'helps' => 'If provided, photo credit will be displayed',
	);

	$form_fields['be-photographer-url'] = array(
		'label' => 'Photographer URL',
		'input' => 'text',
		'value' => get_post_meta( $post->ID, 'be_photographer_url', true ),
		'helps' => 'Add Photographer URL',
	);

	return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );

/**
 * Save values of Photographer Name and URL in media uploader
 *
 */

function be_attachment_field_credit_save( $post, $attachment ) {
	if( isset( $attachment['be-photographer-name'] ) )
		update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );

	if( isset( $attachment['be-photographer-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );

	return $post;
}

add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );

Now try uploading a new image using WordPress media uploader and you will find two new fields to enter photographer name and URL.

To display these fields in your theme files use this code:

echo get_post_meta($post->ID, 'be_photographer_url', true);
echo get_post_meta($post->ID, 'be_photographer_name', true);

For more detailed instructions check out this tutorial on how to add additional fields to WordPress media uploader.

We hope this article helped you learn about image meta data, title, caption, alt text and description. You may also want to check out our guide on how to create responsive image galleries in WordPress with Envira.

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