Web & Software Developer

Add itemprop:image Microdata to WordPress Featured Image

This code adds structured data from Schema.org to your WordPress thumbnails (a.ka. featured images). It will add the attribute itemprop:image inside the <img> tag of the featured image. This simple method doesn’t require you to add anything to your functions.php file. You just pass the parameter along in the “the_post_thumbnail” template tag. This is done directly on any template file of your WordPress child theme. Very easy!

Find your thumbnail template tag. If it’s not specifying a size, then it looks like this:

<?php the_post_thumbnail(); ?>

If it is specifying a size, then it will have the size name inside the parenthesis, like so:

<?php the_post_thumbnail( 'size' ); ?>

where ‘size’ will usually be either ‘thumbnail’, ‘post-thumbnail’, ‘medium’, ‘large’, or ‘full’.

Before we begin

Setting an attribute for “the_post_thumbnail” is done as the second parameter, so if your thumbnail template tag looks like the first example above (with empty parenthesis), please add ‘post-thumbnail’ inside the parenthesis. This is because ‘post-thumbnail’ is the default value for the first parameter of the_post_thumbnail. So, make it look like this:

<?php the_post_thumbnail( 'post-thumbnail' ); ?>

Now the code

To add the structured data “image” property (itemprop:image), you add it as the second parameter inside the parenthesis. So, the line above becomes this:

<?php the_post_thumbnail( 'post-thumbnail', array( 'itemprop' => 'image' ) ); ?>

Note that ‘post-thumbnail’ in the line above can vary depending on the size of image your theme uses.

Here are some examples of how the ‘post-thumbnail’ part will vary depending on the size of image your theme uses. The following are 5 different examples.

<?php the_post_thumbnail( 'thumbnail', array( 'itemprop' => 'image' ) ); ?>

<?php the_post_thumbnail( 'medium', array( 'itemprop' => 'image' ) ); ?>

<?php the_post_thumbnail( 'large', array( 'itemprop' => 'image' ) ); ?>

<?php the_post_thumbnail( 'full', array( 'itemprop' => 'image' ) ); ?>

<?php the_post_thumbnail( 'custom_size', array( 'itemprop' => 'image' ) ); ?>

By

We've 6 Responses

  1. June 8th, 2013 at 4:58 pm

    Thanks. I’d put personal microdata into a membership association’s website. Got stuck figuring out how to get the Featured Image to produce photo microdata. Your advice helped me get the job done.

    avatar
  2. September 15th, 2014 at 12:37 am

    i have this code, but I don’t see how to adapt the changes you suggest. Could you support me?

    <?php if ( has_post_thumbnail() ) {	
    				the_post_thumbnail('thumb-large'); 
    				$caption = get_post(get_post_thumbnail_id())->post_excerpt;
    				if ( isset($caption) && $caption ) echo '<div class="image-caption">'.$caption.'</div>';
    			} ?>
    
    
    avatar
    • September 17th, 2014 at 2:19 am

      In your case, you would change only line 2 to this:

      the_post_thumbnail('thumb-large', array('itemprop' => 'image'));

      and leave the rest intact. I hope this helps.

      avatar

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]