WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» Image Meta Data 101 – Title, Caption, Alt Text, and Description

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

Last updated on November 5th, 2014 by Editorial Staff
104 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
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.

An Image displayed with metadata on attachment page in WordPress

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.

Entering attachment meta data in WordPress media uploader

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.

Displaying additional metadata on attachment page 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.

Adding custom meta data fields in WordPress media uploader

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

104 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

19 Comments

Leave a Reply
  1. Laura says:
    Jul 20, 2018 at 9:17 pm

    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.

    Reply
  2. Norm says:
    May 30, 2018 at 1:45 pm

    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.

    Reply
  3. Julie says:
    Feb 6, 2018 at 12:29 am

    Can I go back and add alt text and/or description to my images, and will they automatically update to my posts?

    Reply
  4. Mathukutty P. V. says:
    Oct 26, 2017 at 2:54 am

    I am using free nisarg theme. Tried descriptions, but no attachment page.

    Reply
  5. Herve Le Ster says:
    Aug 6, 2017 at 1:59 pm

    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

    Reply
    • WPBeginner Support says:
      Aug 7, 2017 at 9:38 pm

      Hello,

      You don’t need to use dashes or underscores in the title or alt text fields.

      Reply
  6. Paul Johnson says:
    Jun 4, 2017 at 6:09 pm

    Great article. How do you make these new fields compulsory? Thanks

    Reply
  7. Chaz DeSimone says:
    Mar 23, 2017 at 2:51 am

    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.

    Reply
  8. Manon Michel says:
    May 18, 2016 at 5:49 pm

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

    Reply
  9. Russ Ramsey says:
    Dec 19, 2015 at 1:28 pm

    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.

    Reply
    • WPBeginner Support says:
      Dec 20, 2015 at 9:03 am

      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.

      Reply
  10. Angela says:
    Nov 28, 2015 at 11:42 am

    I have to say that it looks more like a glass of beer rather than a glass of tea ;)

    Reply
  11. eonkart says:
    Oct 6, 2015 at 2:43 am

    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.

    Reply
  12. Jay says:
    Aug 15, 2015 at 2:08 am

    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.

    Reply
  13. Rebecca Bellan says:
    Jul 15, 2015 at 10:29 am

    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?

    Reply
    • Katherine says:
      Aug 28, 2015 at 12:19 pm

      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?

      Reply
  14. Larry Bradshaw says:
    Mar 20, 2015 at 10:14 am

    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);

    Reply
  15. Carole @ Rustic Artistry says:
    Nov 9, 2014 at 10:02 pm

    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?

    Reply
  16. lizplummer says:
    Nov 8, 2014 at 6:57 am

    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!

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.