Skip to content

How To Implement Schema Markup On Your Blog To Drive Traffic

2 mins read

We've covered how content is an important aspect of the inbound methodology, we've introduced Schema Markup as a concept. Now it's time to show you how to implement Schema Markup on your blog to drive more traffic to your website.

D22_Blog_-_Back_End_Design_Coding.png

For this exercise, let's pretend we are adding Schema Markup to our latest home decor blog on - I don't know - a review of paint that you have just used.

Have a read of this new vocabulary and then follow the six simple steps to implement Schema Markup: 

New vocabulary for schema

1. Access Your Site's HTML

This is where you will be adding information from the Schema website so that search engines have some additional context about the content on your page.

At this stage, you are lowering the chance of an engine not understanding exactly what your site is about and therefore harming your SERP ranking.

2. Choose Precisely What your 'Thing' Is

Schema website screen grab

The categories taken from Schema.org

Schema works by categorising what all 'Things' are and going from there. What we are marking up in this exercise is a blog post, a review of some paint, on our home decor site.

So, following the Schema vocabulary this is categorised as a piece of 'Creative Work'. Narrowing that further, it is a 'Blog'.

Thing > Creative Work > Blog  

3. How To Start Inserting Schema Into Your HTML

The thing to note is that Schema vocabulary is inserted into already existing HTML code.

Think of it this way; the HTML telling the browser how to display the information and the Schema within it is telling the search engines more precisely what is there.

Your existing HTML could look something like this;

<div>
<h1>Paint Used On The Project</h1>
<h2>by John Doe</h2>
<span>Brand: Dulux</span>
<span>Tropic Night (70BG 23/278)</span>
</div>

'Paint Used On The Project' is your title and will be in Header 1 format with 'by John Doe' in Header 2, 'Brand: Dulux' is regular wording and the first line under the header and 'Tropic Night...' is the colour and reference of the paint.

Now we want to insert some Schema to tell the search engines that our page is a blog.

First, tell them that this section of HTML is about an item or 'Thing';

<div itemscope>
<h1>Paint Used On The Project</h1>
<h2>by John Doe</h2>
<span>Brand: Dulux</span>
<span>Tropic Night (70BG 23/278)</span>
</div>

You can see it inserted at the top. The search engine knows this bit of code is about something in particular. Now let's add more specifics:

<div itemscope itemtype="http://Schema.org/Blog">
<h1>Paint Used On The Project</h1>
<h2>by John Doe</h2>
<span>Brand: Dulux</span>
<span>Tropic Night (70BG 23/278)</span>
</div>

Now the engine knows that it's a blog. The page http://Schema.org/Blog is where the agreed vocabulary is located, by the way.

4. Adding Further Details

Now you need to let the search engines know what the blog is about.

Using the http://Schema.org/Blog list as a guide, we can add itemprops to tell the engine what the blog is about, that it's a review and who it is by (creator);

<div itemscope itemtype="http://Schema.org/Blog">
<h1 itemprop="about" itemprop="review">Paint Used On The Project</h1>
<h2 itemprop="creator">by John Doe</h2>
<span >Brand: Dulux</span>
<span>Tropic Night (70BG 23/278)</span>
</div>

5. Adding Another Itemtype

It makes logical sense to also tell the search engine that the blog post is about a particular type of paint. This will help people find your page when searching for reviews of Dulux's Tropic Night paint.

You need to insert a new itemtype and follow the itemprop steps, like above. 

You will now be heading to;

Thing > Product

Here you can see that 'Manufacturer' is the most apt for adding to the Dulux span line.

Just don't forget to set up the new itemscope and itemtype of the page where you find the Schema (in this case http://Schema.org/Product) before adding the itemprops.

<div itemscope itemtype="http://Schema.org/Blog">
<h1 itemprop="about" itemprop="review" >Paint Used On The Project</h1>
<h2 itemprop="creator">by John Doe</h2>
<span itemscope itemtype="http://Schema.org/Product" itemprop="manufacturer">Brand: Dulux</span>
<span itemprop="productID">Tropic Night (70BG 23/278)</span>
</div>

And we have also told the search engine that Tropic Night is the product name via the itemprop "ProductID". Note the use of uppercase as Schema is case specific.

6. Test It And You're Done

Don't forget to test your now expanded coding. Google provides a very handy Markup tester here where you can enter the URL. Or you can find plenty of free HTML testers online.

This alone isn't going to revolutionise your whole world, but it will go a long way to boosting your web traffic via SERPs. This is because it is still an untapped resource as so few sites utilise it.

Even if your domain authority and other factors mean you aren't quite number one on the SERP, building up your Schema Markup will create rich snippets which instantly draw the eye and clicks of more visitors. 

An example of a rich snippet

Continue Driving Traffic

Once you have implemented your Schema Markups, or if you want to find out some other techniques to improve traffic to your site, try downloading our FREE SEO myths guide.