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" itemprop="hasPart" itemscope="" itemtype="http://schema.org/Article"

So that’s the start of our loop

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


and then add this meta tag underneath the article tag:

<meta itemscope='itemscope' itemprop='mainEntityOfPage' itemType='https://schema.org/WebPage'/>


which makes the loop look like:

<article id="post-<?php the_ID(); ?>" role="article" itemprop="hasPart" itemscope="" itemtype="http://schema.org/Article">
<meta itemscope='itemscope' itemprop='mainEntityOfPage' 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

itemprop="url"

which will make our final code look like:

<!-- 1. Title Start -->
<h1 itemprop="headline">
<a href="<?php the_permalink(); ?>" itemprop="url">
<?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'); ?>" itemprop="datePublished" content="<?php echo the_time('c'); ?>"

which will result in:

<!-- 2.1 Published date Start -->
Published on <span datetime="<?php echo the_time('c'); ?>" itemprop="datePublished" 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" itemprop="author" itemscope itemtype="https://schema.org/Person">

and after this code, add this code which will get the name of the author:

<span itemprop="name">

so, then our code will look like:

<!-- 2.2 Author Start -->
by <span class="post-author vcard" itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name"><?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 itemprop="image" itemscope itemtype="https://schema.org/ImageObject">

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 itemprop="url" content="<?php echo $thumb_url ?>">
<meta itemprop='width' content='569'/>
<meta itemprop='height' content='309'/>

So, then our Image markup will look like this:

<!-- 3. Thumbnail Start -->
<?php if ( has_post_thumbnail() ) { ?>
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<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 itemprop="url" content="<?php echo $thumb_url ?>">
<meta itemprop='width' content='569'/>
<meta itemprop='height' 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 itemprop="description">

which makes the content code look like this:

<!-- 4. Content / Excerpt Start -->
<span itemprop="description">
<?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" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="***** WEBSITE LOGO URL *****" width="396" height="91"/>
<meta itemprop="url" content="***** WEBSITE LOGO URL *****">
<meta itemprop="width" content="232">
<meta itemprop="height" content="90">
</div>
<meta itemprop="name" content="*****WEBSITE TITLE HERE *****">
</div>
<meta itemprop="dateModified" 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.