Websites are quickly adopting the Schema.org rich markup, as web search providers utilize it a lot to display results in searches. For example, the star ratings in search results for a review based website can be achieved using Schema.org markup.

What is Schema.org? It’s a collection of schemas or HTML tags, that can be utilized by webmasters to markup their webpages in different ways recognized by major search engines. Bing, Google, Yahoo! and Yandex are some popular search providers that use Schema.org markup to provide better display and categorization or search results.

Schema.org Examples

The recently announced Google In-depth articles also require the implementation of Schema.org Article markup in your article posts. In this post, we’ll know how to integrate Schema.org Article markup in a WordPress powered blog – provided that you are little familiar with normal WordPress theme customization.

Schema.org Article markup in WordPress posts

No WordPress plugins can implement Schema.org Article markup in your posts perfectly. You have to dig into the code as it needs manual customization. Through this tutorial, I’m trying to make this whole editing process easier and simpler for you.

Note: Before proceeding to the tutorial, make sure you have created a back-up of your WordPress theme to avoid any code loss.

Starting off, we need to edit the file that is responsible to display our single post. Basically, single.php is meant for that purpose, so we are beginning up by editing our single.php.

If your single.php is making use of a separate file (eg. loop.php, content.php to display the post, you should edit that separate file to implement this tutorial. If you’re still unsure about what file you have to edit, contact your theme developer to know that.

Find this line or similar in the file:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Note that it’s not necessary that the code carries the <article id=.. tag, it may also start with a simple <div id=.. tag. Next, add the itemscope and itemtype microdata in that line like below:

<article itemscope itemtype="http://schema.org/Article" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Below the modified line, copy-paste the following block of code that is meant for adding name, image, url, author, description, datePublished, and dateModified properties to your WordPress posts:

<meta itemprop="name" content="<?php the_title(); ?>" /> 
<?php if(function_exists('the_post_thumbnail')) : ?>
<meta itemprop="image" content="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" />
<?php endif; ?>
<meta itemprop="url" content="<?php the_permalink(); ?>" /> 
<meta itemprop="author" content="<?php get_the_author(); ?>"/> 
<meta itemprop="description" content="<?php echo get_the_excerpt(); ?>" /> 
<meta itemprop="datePublished" content="<?php the_time('F j, Y'); ?>" /> 
<meta itemprop="dateModified" content="<?php the_modified_date('F j, Y','',''); ?>" />

Final step, save the changes. All done! Now, your WordPress posts are powered by Schema.org Article markup!

How to validate the Article markup?

You should use the Google Webmaster Rich Snippet Tool to validate the above implementation.

Resources