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' ) ); ?>
Jason King
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.
Nerti
August 23rd, 2013 at 7:57 pm
But what about the Attachments?
Im trying to make it work on a Food Recipe Website!
Thanks!
Antonio Manco
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>'; } ?>Isabel
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.
betty
November 26th, 2016 at 5:56 am
This is excellent and simple. Thanks!
Angel
March 9th, 2017 at 8:30 pm
This is great stuff. Thanks for posting!