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+.
I’m wondering how I can add the alt tags to a custom search parameter. I’ve been able to get the attachment post_type, but have not figured out how to get that meta data included. I need something that resembles this line, I believe:
$query->set( ‘post_type’, array( ‘post’, ‘attachment’ ) );
Any ideas?
Thanks in advance.
I need to change the font color for my descriptions in my image gallery (in Visual Composer). Right now they display white and I need black. I have had no luck finding any info on where exactly the title, caption or description font color is set. Any help would be greatly appreciated.
Can I go back and add alt text and/or description to my images, and will they automatically update to my posts?
I am using free nisarg theme. Tried descriptions, but no attachment page.
Hi,
In the Title field, you have to write like this:
Name-image-Blog
Or can I write like this?
Name of the image of the Blog
thank you
Hello,
You don’t need to use dashes or underscores in the title or alt text fields.
Great article. How do you make these new fields compulsory? Thanks
How can I show the caption underneath the image and border, not within the border? I have been looking for an answer for hours, but WPBeginner usually gets me the right information. Thanks.
What about the image file url? I have a huge problem right now.
I changed the file upload to be in one folder, rather than year/month folders. I changed this on the server as well, consolidating all my images into one folder.
But WordPress still has the year and month in the image file urls.
I’d like to know how to change the image file urls to just “wp-content/uploads/filename.jpg” from “wp-content/uploads/year/month/filename.jpg.”
Is there a function that can do this for me? (I’ve already changed it in phpAdmin as well.)
My new web programmer that rebuilt my website into a new WP theme from an old one lost all of my image meta caption, description and alt text.
He assures me that this is no longer needed for SEO purposes and will not put them back. Doesn’t seem right to me especially after it took me weeks to add them last year.
Can you please let me know if the alt text, description and caption are still important and needed?
Thank for your help.
ALT text is more important than description or caption. But description or caption also help improve your search rankings. You should ask the developer to restore your old site from the backup.
I have to say that it looks more like a glass of beer rather than a glass of tea
Meta description is very important factor for website, it easily describe the services that you provides in website. Thanks for sharing some useful information on Meta description.
Hello. I add captions to the original images stored on my computer. When I upload an image to WordPress, does the image metadata, including the caption, automatically upload as well? Thank you.
Great article, very informative. Really cleared things up. However, I’m wondering if you might be able to help shed some light on some of my wordpress glitches. I went into my media library and painstakingly added titles, captions, alt text and descriptions to all of my photos, and it saved in the library, but not in the posts. Would you happen to know why, or how this can be fixed?
Rebecca, I think you actually have to go through and replace each picture in your old blog posts – as in, go to the html view and highlight the first image, then click Media, select the same picture, add meta info and click Insert to update. Unless someone knows of a faster way?
How do I turn this into a shortcode that I could then use anywhere on a layout page.
echo get_post_meta($post->ID, ‘be_photographer_url’, true);
echo get_post_meta($post->ID, ‘be_photographer_name’, true);
Maybe you can help me figure something out with my alt descriptions. I have an ecommerce site with Flatsome theme. My alt descriptions work fine for the product photos when they appear on the category pages, but once you go onto a specific product page, the alt is getting replaced by the image title, which shows up as both the title AND the alt. I need the alts for Google image search optimization as well as it is set as the default description for the pinterest pinit button on my plugin. Any thoughts on how to fix?
You must have read my mind, I was just wondering what was the point of all those entries in the media library form… up to now I’ve just winged it!