Introduction To Schema
Most of us have heard the term schema before, however, the idea of schema can be slightly hard to grasp. The true function of schema is to help search engines better understand the content on a web page without having to crawl (read) the entire page and interpret what it ‘thinks’ the subject is.
To explain it simply, search engines keep a massive database of almost every web page on the internet. It categorizes those web pages based on their content.
Imagine how much work it takes for a search engine spider “the bot that reads through the code of a web page to understand it’s content” to go through every web page on every website in existence.
To help this process, all the major search engines came together in unity to create a new type of code called schema. This code can be applied to elements of a web page to make it easier for search engines to understand. The schema should express the category of a page as well as the attributes the content on that page has to offer within that category.
So, how can we utilize this tool without having to learn code?
Using only a few free tools, this guide will walk you through the steps of add schema to your website.
Before we get started it’s important to understand that there are many different ways of utilizing and implementing schema. Below is our interpretation of how to quickly apply schema to your site and give your content that extra bit of a competitive edge when it comes to ranking higher than your competition.
How to add schema To your website:
Tools you will need:
1. Google Tag Manager
This demonstration does require a bit of Google Tag Manager knowledge. You can take a look at the google tag manager learning resources offered by Google to get a quick overview.
2. SEO Markup Generator
This beautiful tool, created by Technical SEO, allows you to select the type of content you will be adding schema to and provides a form that, once filled out, expresses the exact structure of the schema we will be adding to your page.
3. Yoast’s JSON Converter
This tool provided by Yoast allows you to convert the code given to us by the SEO markup generator into a code readable by google tag manager. This provides us the ability to utilize Google Tag Manager as our schema implementation tool rather than having to input the data ourselves.
4. Structured Data Testing Tool
Google’s Structured Data Testing Tool allows us to test our schema once we have applied it to make sure there are no errors or warnings.
Step 1: Installing Google Tag Manager to Your Website
There are many resources that explain how to get google tag manager up and running on your site so we won’t be covering too much of that. If you have a WordPress website, you can check out our video on how to install and test google tag manager.
If you are not using a WordPress website, here is a good article on the steps to installing google tag manager.
Step 2: Using SEO Markup Generator to create your schema
SEO markup generator allows us to select the category our content falls under and provides empty fields to fill out. Once all the fields are filled out, it automatically creates our schema for us to copy and paste into whatever platform we are using.
Here is an example of article schema for the article you are currently reading:
Before we move on you can test the current schema using Google’s structured data validation tool. Simply click the blue “validate” tab on the top right of the structured data technical SEO gives you. If it comes up with no warnings or errors, you’re all set for the next step.
Step 3: Converting JSON-LD into Google Tag Manager Script
While the SEO markup generator provides for us this beautiful JSON-LD script, Google Tag Manager does not understand how to translate this code. For this code to be functional we must convert it into a script that tag manager understands.
Luckily, Yoast has provided a solution.
In a new tab, open Yoast’s JSON-LD converter. Once you have that open, copy the JSON-LD script given to you by the markup generator and past it into the empty box on Yoast’s converter. Click submit and walaa, Yoast has successfully converted your JSON-LD into a functional script perfect for Google Tag Manager.
Step 4: Using Google Tag Manager to apply schema to a web page
This is by far the most complicated step in the process as it does require a bit of Google Tag Manager knowledge but we will try to make it easy for you.
Take a look at the tag manager menu on the left side of the home screen.
The two sections we will be focusing on is the triggers and the tags. A tag is what holds the definition of an action occurring on a particular piece of content and a trigger is the action that “triggers” that definition.
For example, I have a button below that I want to apply a tag to in order to track how many people click this button. To do this, I apply a trigger that says every time a visitor clicks this button do this…. The “this” is the tag.
In terms of applying schema, we want to apply a trigger that says “every time a visitor or spider lands on this page, read this script” the script being our schema. If it’s confusing keep reading and hopefully the process of adding the schema to tag manager will clear things up.
How to add a trigger to Google Tag Manager:
Create New Trigger
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Name Trigger
Give the trigger a name that associates with the page you will be adding the schema for organizational purposes. (The more you use Google Tag Manager the better you will get at organizing the tags and triggers.)
Choosing Trigger Type
Click “choose a trigger type” and select DOM Ready
Site Wide or Solo Page?
If it is generic site wide schema then keep it on “All DOM Ready Event’s.” If the schema is for one particular page as it is for this article select “Some DOM Ready Events” then in the left container select “Page URL”. In the middle field select “equals” and in the text field on the left, past the URL of the page the schema will be applied to. Make sure to hit “Save” at the top right before closing.
How to add a tag to Google Tag Manager:
Create New Tag
Go to the tag dashboard of google tag manager and select new.
Naming Tag
Give the tag a name that associates with the page you will be adding the schema for organizational purposes.
Choosing Tag Type
Click “Choose Tag Type” and select “Custom HTML” under the Custom Header.
Paste Converted JSON-LD
In the empty content box past the script given to you by Yoast’s JSON-LD converter. Make sure to select the “Support document.write” box. If it is generic site wide schema then keep it on “All DOM Ready Event’s.” If the schema is for one particular page as it is for this article select “Some DOM Ready Events” then in the left container select “Page URL”. In the middle field select “equals” and in the text field on the left, past the URL of the page the schema will be applied to. Make sure to hit “Save” at the top right before closing.
Combine With Trigger
Add the trigger we created earlier to the tag and click save.
Before testing the schema with the google validation tool we will first want to make sure the tag is being triggered. To do this, select “Preview” at the top of the Google Tag Manager dashboard. This allows us to see the tags in action on the live site.
Go to the page you added the tag to and a tag manager box should appear on the bottom of the screen. If the schema tag was implemented correctly, you will see the confirmation in the tag preview box showing the tags that were triggered.
If all looks good, head back to Google Tag Manager and select “Submit” on the top right of the dashboard.
Step 5: Testing the final product
To test your newly applied schema simply go to Google’s Structured Data Testing Tool and past the URL of the page you just added the schema to. This will validate the schema and tell you if there were any errors or warning with the code.
If all went well there should be no warnings or errors and you will have successfully implemented schema on your website.
Get To Schema-ing
There are many different types of schema options provided by the SEO markup generator. Check out all of the categories and if any of them apply to your website, follow the same steps described in this article and before you know it, your whole site will be marked up with beautifull easy to read schema.