Google structured data is a must for every website and blog but a lot of people still don’t have this schema markup integrated into their website. It is absolutely critical for the SEO of your website and it is very simple once you understand it.
In this tutorial, I am going to be using a sample WordPress loop and then integrate the Google Structured data into it. I have used a sample loop for this so that you can understand and integrate within the loop of your WordPress theme.
If you don’t know how to find your loop or what the loop is, I recommend you get a developer who can help you integrate it or you can hire me for this as well 😉
Here is the WordPress loop that I am going to be using for this tutorial. It must be in your index.php or content.php file:
Overview of Structured data code in the WordPress Loop:
You can find the full code at the end of this article
Let’s go through the code one by one:
We will start by adding the main code which helps google understand the schema structure. Locate to the main <article> tag
<article id="post-<?php the_ID(); ?>">
and add this code in the article tag:
role="article"
So that’s the start of our loop
<article id="post-<?php the_ID(); ?>" role="article" >
and then add this meta tag underneath the article tag:
<meta itemType='https://schema.org/WebPage'/>
which makes the loop look like:
<article id="post-<?php the_ID(); ?>" role="article" >
<meta itemType='https://schema.org/WebPage'/>
Next Step is to add Title
<!-- 1. Title Start -->
<h1>
<a href="<?php the_permalink(); ?>">
<?php the_title() ;?>
</a>
</h1>
<!-- 1. Title End -->
In the anchor tag (<a> tag), we have to add this code
which will make our final code look like:
<!-- 1. Title Start -->
<h1 >
<a href="<?php the_permalink(); ?>" >
<?php the_title() ;?>
</a>
</h1>
<!-- 1. Title End -->
Let’s get to the Meta section now:
<!-- 2.1 Published date Start -->
Published on <?php the_time('M j, Y'); ?>
<!-- 2.1 Published date End -->
In this one, we have to mention the published and time with this code and wrap it with the <span> element:
datetime="<?php echo the_time('c'); ?>" content="<?php echo the_time('c'); ?>"
which will result in:
<!-- 2.1 Published date Start -->
Published on <span datetime="<?php echo the_time('c'); ?>" content="<?php echo the_time('c'); ?>">
<?php the_time('M j, Y'); ?>
</span>
<!-- 2.1 Published date End -->
Now, let’s get to Author area:
<!-- 2.2 Author Start -->
by <?php the_author(); ?>
<!-- 2.2 Author End -->
Before the author name, add this code with span tag:
<span class="post-author vcard" >
and after this code, add this code which will get the name of the author:
<span >
so, then our code will look like:
<!-- 2.2 Author Start -->
by <span class="post-author vcard" >
<span ><?php the_author(); ?></span>
</span>
<!-- 2.2 Author End -->
That’s the end of Meta section. Now let’s proceed to the thumbnail code, which is a little bit tricky.
<!-- 3. Thumbnail Start -->
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail('medium'); ?>
</a>
<!-- 3. Thumbnail End -->
First, we need to mention that the image is starting in the markup, so we can do that using this code. Wrap it with the <span> element:
<span >
and before closing the </span> element, add the below code which will get the image url and make it ready for the schema markup, So Google can easily recognize and use it.
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'medium', true);
$thumb_url = $thumb_url_array[0];
?>
<meta content="<?php echo $thumb_url ?>">
<meta content='569'/>
<meta content='309'/>
So, then our Image markup will look like this:
<!-- 3. Thumbnail Start -->
<?php if ( has_post_thumbnail() ) { ?>
<span >
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail('medium'); ?>
</a>
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'medium', true);
$thumb_url = $thumb_url_array[0];
?>
<meta content="<?php echo $thumb_url ?>">
<meta content='569'/>
<meta content='309'/>
</span>
<?php } ?>
<!-- 3. Thumbnail End -->
Now, let’s get to the content part:
<!-- 4. Content / Excerpt Start -->
<?php the_excerpt(); ?>
<!-- 4. Content / Excerpt End -->
wrap the content part with this span element:
<span >
which makes the content code look like this:
<!-- 4. Content / Excerpt Start -->
<span >
<?php the_excerpt(); ?>
</span>
<!-- 4. Content / Excerpt End -->
Just one more step and Structured data will be fully integrated. Just before closing the <article> tag, we need to add the Publisher information. Publisher information is nothing but the website logo, website title , etc.
Before closing </article> tag, add the below code:
<div class="publisher-img" >
<div >
<img src="***** WEBSITE LOGO URL *****" width="396" height="91"/>
<meta content="***** WEBSITE LOGO URL *****">
<meta content="232">
<meta content="90">
</div>
<meta content="*****WEBSITE TITLE HERE *****">
</div>
<meta content="<?php echo the_time('c'); ?>"/>
Here is the WordPress loop with Google Structured data integrated into it.
Let’s run the output / source code of this loop through the Google Structured Data Testing Tool:
and let’s see the output of it.
As you can see in the image, the Google Structured data tool can now detect articles and websites, which means that our WordPress loop is now fully integrated with Google Structured data.
I hope this helps you. if you are facing issues, please let me know in the below comments. I will try my best to help you.
Good Article Ahmed. Will be giving a try to this on my website.
Glad to hear that John! Good luck
How about you put all of this into a plugin?
You can’t/don’t put this in a plugin because it’s more theme teritory
@Florian Yes, I totally agree with you but, there is a possibility of doing that with json format.
@RT I’m thinking about it. Maybe I will. I should first check if there are any existing plugins available, if not then I will do that.
All you need to do is replace the existing loop with the code he provided. Use a child theme.
This is brilliant BTW, do you mind if I put this on GitHub or do you have it up there already?
Hey Kyle,
Thanks!!
I already have it on the Gist at https://gist.github.com/ahmedkaludi/5586d788fca9ee1a0ce2322b30151934
But please feel free to put this on Github.
Fantastic article
Well written and well explained too.
Hats off to you.
Thank you Perambur!
Thanks Ahmed, I have searched for a long time for a plugin that integrates Schema similar to the standard set in genesis themes. Like you I use DIVI and prefer the design freedom over the genesis framework – but would love to integrate schema – maybe through the child theme or a plugin? what would be the best way? thanks
Hey James,
I don’t think it is possible with the child theme because Divi uses modules.
I am thinking of creating a plugin which can add this to any theme including Divi. What do you say?
Do you really need this if you’re using SEO By Yoast Plugin?
Hey Shehu,
I have not checked it personally but according to their Knowledge base ( http://kb.yoast.com/article/183-microformats-and-schema-org ), it does support it.
Great guide. I`ll test it on a few sites – curious how that will affect the rankings. Thanks for the tips!
Great, I can’t wait to hear your results! Please share it with us.
Structured data is a great SEO-hack. I’m using it on all our blogs and sites
Structured content means better on page SEO effort which directly means better ranking which = more traffic = more conversion.
Do you have or offer any starter theme which has integrated support for Structured markup. It would be a great help.
Hi John,
Thanks, Actually I am planning to do an open source theme with all the structured markup integrated into it.
Very clear article on this topics. Appreciate your time and effort Ahmed. 🙂
Thank you so much Ahmed 🙂 !!
I was finally able to write correct strucutred data thanks to you :).
Your article is really clear, well written and so well explained.
Beautiful work and great share ressource.
A big thank you again 🙂 !
Amicably,
Pierre.
Thank you, Pierre! I’m so glad to know that it was helpful!
Thank you very much. It work well.
Thanks for your article,
One question. why did you choose
– http://schema.org/Article
and not
– https://schema.org/Blog
– https://schema.org/BlogPosting
Normally Article shouldn’t be reserved to newspaper article?
Makes sense, you can use that.