Implementing Microdata, Schema and JSON-LD with Google Tag Manager

Schema, Microdata and the newly endorsed JSON-LD. What are these exactly and how do they help my website?

Well, first of all I would suggest that we take a look at each of these types of markup and discuss why they are different. There are also a lot of resources out there that you can read for a deeper understanding.

All of the types of markup have their own websites and Google has information on these types of markup to better aid you in your efforts – I will link to these resources once we have discussed the different types of markup that are available to help enhance your websites overall SEO. Not only does it help to enhance your overall on site SEO, it can help to improve click through rates especially if you own an eCommerce store, for example.

It is also good to note here that you must follow the guidelines set out by search engines in order to get any benefit out of your markup. Any snippets that are not correct and contains irrelevant information, such as a fake review rating or any other manipulation of rich snippets may lead to your website having action taken against it. This could result in sudden loss of traffic and rankings. Please follow the guidelines and play nice.

I would also get used to visiting this page. It is going to be your new best friend when trying to implement any of these markups.

All of these markups serve to improve overall search results by displaying extra information about your website. An example can be found in the image below of popular rich snippets:

Tell Me – What is Schema Again?

Schema or Schema.org is a markup language that has support from major search engines and companies such as Google, Microsoft/Bing and Yahoo!, Pinterest, Yandex and many more.

Schema can be used within different encodings, such as RDFa, Microdata and JSON-LD. This helps to further enhance these different markup types. You can markup webpages and even emails with Schema and to date over 10 million web pages have been marked up using Schema code.

<div itemscope itemtype="http://schema.org/Event">
  <div itemprop="name">Spinal Tap</div>
  <span itemprop="description">One of the loudest bands ever
  reunites for an unforgettable two-day show.</span>
  Event date:
  <time itemprop="startDate" datetime="2011-05-08T19:30">May 8, 7:30pm</time>
</div>

Schema can be used to markup the following and more:

• Articles
• Local businesses
• Restaurants
• TV episodes and ratings
• Book Reviews
• Movies
• Software Applications
• Events
• Products

There are literally hundreds of different itemscope and itemtype tags that you can use to markup your data and this is only set to expand as these markup vocabularies become the norm. You can find more Schema markup types here.

You can read more about Schema at Schema.org FAQ Page.

Hello Microdata My Old Friend

Microdata and RDFa enable you to markup content that is already on the page utilizing HTML properties to help to define each item. There are a lot of items that can be marked up. For example, we can markup Name, Nationality and even what Band you are a part of – as seen in this example from W3:

<div itemscope>
 <p>My name is <span itemprop="name">Neil</span>.</p>
 <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
 <p>I am <span itemprop="nationality">British</span>.</p>
</div>

Microdata has a pretty good coverage on the Internet for resources, but I would highly recommend taking a look at W3 Microdata and the Google Webmaster Help page for more Microdata information.

Combining Microdata with Schema enhances the overall effect and depth that you can go into when marking up your content.

New Kid on the Block – JSON-LD

JSON-LD enables you to link markup data and it allows you to easily embed this data on your webpage through the use of <script> tags. Unlike Microdata and Schema, JSON-LD runs in the background and it isn’t visible. You actually don’t need to tweak any HTML, which makes it easier and faster to implement.

The use of JSON-LD makes the whole markup process a lot simpler and it loads a lot faster than regular Schema and Microdata formats.

You do have to be careful when using JSON-LD to markup any page, however. As this is an “invisible” way of marking up data on your webpage, when you are using JSON-LD to markup content on a page, the content must be visible on that page. Again, any misleading or attempt to manipulate rich snippets will be dealt with seriously by Google.

It isn’t uncommon for them to dish out an algorithmic or manual penalty for trying to game the system.

We can see an example of JSON-LD code below:

{
  "@context": "http://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

The great thing about JSON-LD is that it implements Microdata and Schema into it, so you can utilize this to run in the background, be invisible and be incredibly easy to implement. You can even run this on WordPress, without having to use <div> tags that often create ugly boxes or unsightly changes to your website.

As we’re going to be covering Local Business data in the next portion of this post, here is an example of the content you can markup for local businesses using JSON-LD:

• Business Name
• Address
• Phone Number
• Email Address
• Business Hours
• Geo-location Information (coordinates and map)
• Reviews
• Logo
• Business Description
• Social Profile Links via sameAs
• Site Name
• Products
• Media (images and videos)
• Events
• Corporate Contacts
• Sitelinks Search Box

You can also find more information about JSON-LD at json-ld.org.

Enter Google Tag Manager

Google Tag Manager is an awesome tool that hasn’t got as much recognition as it deserves. Quite simply, Google Tag Manager enables you to input tags through a container on your website, and through this container you can track all manner of things such as Analytics, Remarketing, Transactions and you guessed it – you can also use it to add Schema, Microdata and JSON-LD to your website.

These tags that you create in Google Tag Manager can also be forced to only fire on certain pages, so you can really drill down onto your site and only trigger certain tags on certain pages.

Having all of this information in one place, which you can preview and then publish through the container means that Google Tag Manager should be used by anyone who has a lot of accounts as it essentially brings many services down into one singular code tracking platform.

Using Google Tag Manager to deploy schema means that you can implement Schema onto your website without breaking any of the styling. It also has a really nice and simple user interface, so people who are not confident with handling code should not be too intimidated by it.

So for example, by using Google Tag Manager and JSON-LD, you can utilize the script tags to run in the background and completely markup your contact page. This also works well if you’re a local business and the uses of Google Tag Manager don’t stop there, you can also use it to markup your site for knowledge graph purposes too.

So let’s get into how to use Google Tag Manager to markup your website using JSON-LD.

Here is a snippet of code that I’m using on my own website to markup my local business:

<script type="application/ld+json">
       {
       "@context": "http://schema.org",
       "@type": "LocalBusiness",
       "address": {
    "@type": "PostalAddress",
    "streetAddress": "STREET ADDRESS HERE",
    "addressLocality": "LOCALITY HERE",
    "addressRegion": "REGION HERE",
    "postalCode":"POSTCODE/ZIP CODE HERE"
       },
       "description": "BUSINESS DESCRIPTION HERE",
       "name": "BUSINESS NAME HERE",
       "telephone": "MAIN TELEPHONE NUMBER HERE",
       "email":"MAIN WEBSITE CONTACT EMAIL HERE",
       "openingHours": "Mo,Tu,We,Th,Fr 09:00-17:00",
       "url": "WEBSITE URL HERE",
       "logo": "BUSINESS LOGO URL HERE",
       "geo": {
    "@type": "GeoCoordinates",
    "latitude": "LATITUDE HERE",
    "longitude": "LONGITUDE HERE"
              },
       "sameAs" : [ "FACEBOOK URL HERE",
    "TWITTER URL HERE",
    "GOOGLE+ URL HERE"]
       }
</script>

As you can see from the code above, there are a lot of variables that you can add to enhance your markup. I must admit, I did go a little overboard with the markup, but I wanted to give as much information as possible so the search engines fully understood every aspect of the business.

Let’s take a look at how to implement this onto your website using Google Tag Manager. The first step is to install the container to your website. You can start off by gaining access to Google Tag Manager by heading over to this website and signing in using your Google Account.

Once you sign in, it will ask you to add a new account. Go ahead and fill out the information requested to set up the container. Once you have done that and click create, you will receive a piece of code – this is your container. You will need to install this onto your website – where you have installed your analytics tracking code will suffice. It might also be wise to set up analytics tracking via Google Tag Manager too and remove that code from your website.

Once you have installed that code – it is time to jump in to Google Tag Manager.

The first thing you will need to do once you get into Google Tag Manager is to click on Add A New Tag

You will then be taken to the next screen, I would suggest naming your tag and then click the Custom HTML Tag option. There isn’t a preset option for this, so we’re going to have to create our own Tag. As you can see though, Google Tag Manager can help you to implement a lot of different services into one container, which is helpful for keeping track of them all and for keeping your site lighter on code.

Once you have clicked on the custom tag, you will be served with the next part of the process. The code that I laid out under the JSON-LD section is what we’re using here. Go ahead and fill out all of the information within that code and then copy and paste it into the Configure Tag section and then go ahead and click Continue.

The next section is going to determine where the Tag fires. This means that if you only want this Schema to markup your contact page (which is going to part of this “walkthrough”) you can determine this within this next section.

So for example, if we want our markup to only fire on our contact page, we click on “Some Pages” and then fill out the following in the pop up box that appears:

Obviously, you replace http://www.yoururl.co.uk/contactpage/ with the URL to your websites contact page.

Ensure that the box next to Name is checked and then click save. You have just created your first tag.

However, you’re not out of the woods just yet – we have some testing to do to ensure that this works and is firing properly. This next part is probably one of my favourite features of Google Tag Manager and it is pretty awesome.

So, to ensure that everything is working as intended, we need to preview the tag on the website. So whilst you’re logged into Google Tag Manager, open up a new tab and navigate to the webpage that you want to Schema to fire on. For our purposes here in this blog post this page is our contact page.

Head back over to the Overview tab that is on the left hand side. Once you back onto that page – you will notice a little red box on the right hand side of the screen. Here you can Publish, Preview or Create a Version of a tag. We’re going to go ahead and Preview for now.

When you’re in Preview mode and you are on your website, you will notice that a new toolbar will open up on your website at the bottom of the screen. This is the preview bar for all of your Tags on your website and you use this section to ensure that all Tags are firing properly.

This feature is great at seeing where exactly tags are firing and not firing and then being able to debug them easily. If everything has gone well and you’ve done everything correctly, then you’ll see something similar to the image below where your Tag has fired on this page.

If the tag hasn’t fired properly, then it will be under Tags Not Fired on This Page and you will have to go back and do some debugging to ensure that everything fires properly.

The next and final step, if everything has gone well, is to ensure that your markup can be validated by Google using the Structured Data Testing Tool. This is either going to be your new best friend or your worst enemy – I know for a while it was a little frustrating having errors within tags but experimenting around with different tags seemed to fix the issues I was having.

In an ideal world, you need your LocalBusiness schema to be listed as All Good. If this is the case, then congratulations, your LocalBusiness Schema has been successfully installed on your website and you can now publish your tags and make them live for Google to crawl and index. If it comes up with errors, the unfortunately there is more testing and tinkering to do until it says All Good.

 More To Come with Google Tag Manager

Hopefully, as you can see from what we can do above, Google Tag Manager is a really powerful tool. Also having this level of microdata on your website is really going to help improve your overall onsite, Commerce and Local SEO and will hopefully help to improve rankings and or click through rates in a positive way.

I will be covering more with Google Tag Manager in the future. I’ve been experimenting with it for only a short time, but the amount that you can implement is borderline endless.