Add Article markup to your WordPress posts

Detailed guide to implement Article markup in WordPress posts without installing any plugin.

Websites are quickly adopting the 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 markup.

What is 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 markup to provide better display and categorization or search results. Examples

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

No WordPress plugins can implement 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="" 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 Article markup!

How to validate the Article markup?

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