Schema Markup and Structured Data
If you are leveraging digital marketing to drive traffic to your website in 2022, you should be implementing schema. Structured data and Schema markup is gradually increasing across the web. The recent popularity explosion of Schema markup has a lot more website owners, business owners, SEO agencies, developers, and the digital marketers all wanting to know more about it or get started with it.
Realizing the added benefits of including the correct markup for your web pages is half the battle. Implementing schema properly takes time, patience and knowledge. We will be covering schema markup and structured data in great detail.
What Exactly Is Schema Markup?
So, what is schema? Glad you asked….. The technical definition is “a representation of a plan or theory in the form of an outline or model”. In our case we are talking about a representation of what is on your webpages when Google crawls your website. I like to think of it as a table of contents for search engines. Something that tells them what the page is about in a quick and clean way without Google crawling the entire page.
Schema will tell search engines what TYPE of website you have. For instance, if you have a real estate website, the schema would show that you are a real estate broker or agent, what geographic areas you work and other details. If you are working on digital marketing for a medical office, your schema would show you are a Doctors office, what conditions you treat, the Doctors names and show your business hours for example.
Almost like peeking at the table of contents or glossary of a book; but with more details that can be quickly understood by search engines. Schema was created by a group of entities including Google, Yahoo, Yandex, and Microsoft with the intention of creating a standard format that helped search engines better understand the web. All Schema vocabularies are developed by a community process with participants around the globe.
This is a short excerpt from Schema.org
“Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!”
When Schema first hit the web the most popular formats were microdata and RDFa. Today, the preferred method for implementing schema markup is using JSON-LD format. This is short for JavaScript Object Notation for Linked Data. That should get the old noodle working right there. This format is relatively easy to write by hand and requires very little if any modification to the website. As the name suggests the purpose is notation of an object(s) using JavaScript to link some kind of data.
The following are examples of each of different schema formats.
The vocabularies created by Schema.org can be used to markup a wide variety of content on your website. Over the years there have been many types of markup for all sorts of things added to the library of schemas. More types are added every year which can be utilized by all webmasters and website owners. Some schema types even have several subtypes that come with them.
The following are only some of the item types where Schema markup can be used.
- Website
- Organization
- Books
- Brand
- WebPage
- BlogPost
- Review
- Aggregate Rating
- Local Business
- Person
- Events
- Job Postings
Why Add Schema Markup to Your Website?
So, all this is great, but why should you implement Schema markup on your site? Well the answer is it can help you to rank better on Google which then can lead to more traffic.
More traffic turns into more leads and sales at the end of the day. In addition to helping out with your search results, marking up your content with schema can also help Google pick the right information to show with things like sitelinks and site search boxes.
I am sure you have noticed those SERP results with the star rating on them. That star rating is most likely to be coming from Schema markup placed on that website. Every bit of schema markup implemented on your website, when done correctly, can have a significant impact on how you show up in the search engine results pages (SERPS).
Snippets, Panels, And Ratings
There are other benefits to adding markup that can be gained from having the correct schema implemented on your website. When users search Google for a business or search term the information that comes back can be in several formats. Things like Knowledge Panels, Ratings, and Rich Snippets are all influenced by schema markup.
There are plenty of different ways to create your markup for your website. Some people prefer to use plugins when working with WordPress websites. After about 5 years of diving into Schema really deep, I avoid plugins like the plague when it comes to schema.
The preferred method is to write it out by hand but that takes knowledge and experience. As a first timer the best thing to do would be to use a tool like Schema Apps schema generator. This handy little tool can help get you started with creating markup for almost all of the vocabulary available.
This is an example markup for Website:
Testing Your Schema Markup
When creating markups for your website you will want to test that markup before applying it to your site and after. The idea is to check for errors or warnings in your code and to make sure the code you added to the website is showing up.
There is a tool from Google just for this purpose and that tool is the Structured Data Testing Tool. Granted it has been around for quite a while, this tool works great for testing your markup both as straight code and as web pages.
Like many Google tools for webmasters, this is a free one that can be used as much as you need or want.
Using the Structured Data Testing Tool for code snippets is a great way to work on your code before adding it to any website. Like many text editors the tool will point out any obvious errors in your code.
An added benefit of working with this tool is it will tell you if you are missing required or suggested fields in your markup. Any missing required fields will trigger an error. Missing suggested fields will trigger a warning.
This can be super handy for beginners as it helps you to understand what Google wants to see in your markup.
Once you have your schema markup ready to go with no warnings or errors it is ready to be put it on the page. There are many different ways you can add your code to your pages. We will discuss those methods in a moment. For now let’s assume you have your code in place regardless of the method. Going back to the Structured Data Testing Tool, we can use the page test to crawl the web page and scan for Schema markup.
The test will return the HTML of the page on the left and the types of markup found on the right. When looking at the markups on the right, if you click on any line it will move the panel on the left to that place in the code where you can see your markups in place.
No matter how you implement your schema markup always remember to update it when necessary. If you move your business, change phone numbers, add new services, etc your markup should be updated to reflect those changes. Also note that you can omit some of the suggested elements depending on many things such as your targeting or SEO strategy or whatever it may be.
However, do not skip required elements as it will make your markup invalid to Google. And do not markup anything that is not on your pages as Google can and will penalize you for this.
What Should I Markup with Schema?
The simple answer is everything. That is, everything you can correctly mark up. There is no limit to how much schema markup you can add to your website or pages. There are no rules that say you can only have one markup type on a page.
Depending on your type of business, schema may play a different role. If you are a bricks and mortar business, leveraging Local SEO to drive new business, there are certain best practices for you. If you are a nation-wide, web based organization selling a tool or service on the internet, that would require a different mark up.
Google is able to see every single markup you place on the page. The idea is to provide as much information about that page, business, organization, location, pricing, product, etc that you possibly can. But, be careful as not to confuse Google with your code. Be smart about the types of markup you add to your pages. In other words do not add “Taxi business” or “Attorney” to your Bakery.
Some schema markups belong on certain pages so pay a little bit of attention here as well. Most of us developers and webmasters only add Website markup to the homepage of a website. However, every page on the site can be marked up with Webpage.
The Contact and About pages also have specific markups that can be used. Although if you have a single page that works as your About and Contact page I would pick only one to add to that page. In that situation I would lean more towards the Contact markup as someone contacting you is more important that reading about you.
Depending on the type of business you may also want to add a few other markups such as Person, Service, NavigationElements, and more. You can take it a step further and markup your images and site navigation elements as well. All of this will help to identify your website, your business, and what you are about to give the searcher the best results possible according to their search query.
How To Add Schema Markup to Your Website
For those just getting into Schema markup, the how-to of adding this new mysterious code can be intimidating. Luckily there are a couple of different ways you can go about adding you new code to your pages. The obvious way is to add the code directly to the page via a backend editor. Not all backend editors are built the same as some may or may not have options to add code to the head, body, or footer. In this case you can actually add your markup scripts inline with your HTML.
There is nothing wrong with doing this and it will work quite well. Another option would be to add a plugin that gives you the ability to add little code snippets to the head section or the footer if you prefer to place your code there. The last option I am going to mention is using Google Tag Manager to inject schema. In this scenario you simply add the container snippet to the website and then build your tags in Google Tag Manager.
Adding Schema Directly To The Page
The process of adding your code directly to your pages is quite easy. Especially if you are somewhat familiar with HTML and a Visual/Text editor. Once you have your code ready and error free it is as easy as editing the page in the text view and slapping that code into the page. The placement does not matter as far as the code working, it can be anywhere on the page. For cleanliness try to keep your code organized meaning if you start adding it to the top of the page keep all your code there. If you prefer the bottom then keep it all at the bottom.
Some of you may have concerns over adding javascript to the page when it comes to rendering and page speed. Fear not as Schema scripts are merely read and do not have to render in the browser. Meaning they do not slow down the page or block other sources from loading.
Theme Options for Adding Schema
WordPress has some great themes available both free and paid that include a lot of features webmasters have wanted and needed over the years. Some of the themes include the ability to add tracking codes and other data either site wide or page specific. These themes are great for adding both schema markup or Google Tag Manager code.
If the theme only has the site wide tracking code option then Google Tag Manager (GTM) is the way to go. After creating an account and container in GTM all you need to do is copy the 2 part code snippet and add that to your tracking options in the theme. Then you are ready to start creating tags and publishing them.
Theme Options Will Vary
Some themes give the ability to add code on a per page basis. This allows you to add page specific markups to each page without the need for a plugin. Some of these options may be limited in placement and some may provide head, body, and footer access to add code. As mentioned before placement of the markup is not critical so work with what you have.
If you prefer or need to use a plug in there are options that will fit your needs. My preferred plugin to use for many things is the Head Foot Plugin by AddFunc. This is a great little lightweight plugin that gives both site wide and page specific features for head, body, and footer areas. After using it for a couple of years now I have to say it is one of my favorite plugins and it gets installed on almost every website.
Using Google Tag Manager to Add Schema
Having a way to generate and manage tags is an essential tool in a webmasters arsenal. Google Tag Manager has become very powerful over the years and remains a reliable and easy way to add all kinds of code such as tracking codes, meta tags, and even Schema.
Like any other web based utility the updates to the interface are pretty obvious and GTM has matured to an extremely robust platform with tag options prebuilt for many different platforms. Some changes are not so subtle and take time to notice.
Like any other Google tool all you need is a GMAIL account to be logged into when you go to the GTM page. Setting an account and container is quick and painless.
Keeping things organized here is super important as the vast amount of containers you control or have access to can grow rather quickly. Set up an account level container and then a domain level container for the website you are working on. The options presented at the set up stage are pretty self explanatory. If it is your first GTM container the option for Web type container is the one you want.
If you are responsible for SEO for multiple clients, having an account for the client and then all their domains under it is an easy way to navigate all your properties. You can add as many domain containers under a client account as you may need.
After the setup is complete you will land on the main page and presented with the GTM code snippet. Copy and paste each snippet into the proper place on the website you will be adding the schema to. Remember all those options we discussed earlier for adding code to a website. This is where all those options come in handy as this is the only code you have to add to the website for all of this to work.
Creating Your First Tag
Before you can create your first tag you need to have your code ready to place into that tag. This is where we will use some of the tools and resources discussed earlier. As a beginner the best tool to get you started with your markup is schemaapp.com’s Schema Markup Generator. This handy little web based tool has almost every schema available and lays out the fields in a very simple way. All you have to do is fill in the values needed and the final code is output on the right side.
Be sure to check all your URLs and use the correct protocols. You want all the data to be a direct representation of your page. You can copy the code or click the button to bring you straight to Google’s Structured Data Testing Tool to test your markup for any errors.
When creating your first markups it is best to use schema.org as a reference. There are plenty of examples and descriptions of just about all elements and types you can think of. It is an excellent resource to help you understand and learn schema markup. With a little practice and experience you will pick up on what elements are needed and those that are not.
Testing Your Schema Markup
Checking your work for any errors is pretty easy with the Structured Data Testing Tool. It simply scans your code or page and looks for any markup. It will then show you all the markups present on the page or in your code. This will help you get your code working correctly with no errors or warnings. You can alter the code directly in the window on the left when testing as a code snippet and not a page. Make any changes needed and click the button in the middle to retest the code.
Years ago the code would be ready to go into a GTM tag and that was it. Google made some changes back in 2018 that had a significant impact on how GTM tags worked with Schema. So hold onto that code for just a minute.
Changes To Google Tag Manager
When I first started adding Schema markup to websites I found GTM to be super fast and easy. You would create your markup, test it, set up the tag in GTM and then test via the page URL with the testing tool. Everything worked for years. Then Google made some changes and those schema tags that were set up in GTM no longer worked the way they did before.
The testing tool could not see them meaning they did not fire so there was no markup being injected into that page. An answer as to why this happened has yet to be found.
So for the last couple of years there have been plenty of people saying that Schema Markup via Google Tag Manager was not recommended. Essentially I understood this as “do not use our tool to do what it was designed to do because we broke it and do not know how or why”.
The weird thing is that all this stuff still worked for things like Google Analytics tracking or Facebook Pixels and the such. The only affected tags were the schema tags. Again no answer as to why this happened. I doubt Google will ever provide an answer. All we know is Google stopped validating Schema Markup served via Tag Manager.
But there is good news! Simo Ahava figured this out and devised a handy way to fix the script so that it works with GTM. There is a handy little tool that can be found on Saijo George’s website. If you are not comfortable with code then this tool will help you out tremendously when creating your tags. Simply copy your regular schema script tag and paste it into the left side of this tool.
Your newly formatted script has been magically turned into a function that works with GTM. For those who have some coding experience you can easily see what has happened to the script tag and how it was converted to a function. Copy that new script and move back over to GTM.
Finish Creating The Tag
Back in GTM we can select New Tag and begin the process of generating a tag and a trigger. For your Schema tags you will use the HTML Tag option.
Firing the Trigger
For our Website Schema tag we only want to fire this on the homepage. We will create a new Page View trigger and set it to fire only on the homepage by setting the Page URL > Equals > https://www.myawesomewebsiteexample.com/ then saving and publishing the container.
That is all there is to adding a simple Schema tag in Google Tag Manager. This process can be repeated for all your markup tags on all our pages. You can add any single page markup with this method without having to continually modify the website. Notice that we have not mentioned markups like WebPage, Article, or BlogPost. That is because there are many websites that have 10s, 100s, even 1000s of pages.
I know you do not want to spend the next 10 years doing markup just to have to go back and update it before you ever finish it. That sounds like a serious nightmare. What if I told you there was a better way…. An automagic way in fact. But it requires a bit of Javascript knowledge.
Dynamic Schema Tags
So far all the tags and triggers have been just that, static tags and triggers to go along with them. This is where you fill in the info and call the tag finished with the exception of the regularly updated information.
All this is great for a tag that is used on a single page and you only have 5 tags to create. But what about the markup that belongs on all pages or all pages of a certain kind? There are ways to set up tags to work on many pages and pull information dynamically using javascript and variables.
Using Variables
Creating dynamic variables to trigger schema can be easy or it can be very difficult for many reasons. There are many standard variables built into GTM such as Page URL and Click Text. You can also set up your own custom variables in a few different ways.
To use variables in your tags you simply replace the value of an element with a variable that will pull that info from the page. So rather than the schema containing “headline”: “Some headline description” it would look more like “headline”: “{{H1}}” where H1 is a variable we build to pull the text from the H1 tag in the HTML.
When created correctly it will pull the H1 from any page it is used on. You can also use {{Page URL}} for the “url” or “mainEntityOfPage” field. With a regular javascript variable you can use “document.title” to get the title of the page to use with a {{Title}} variable. Custom Javascript variables are a bit more complicated particularly for those without prior javascript knowledge or experience working with the DOM.
Just like everything else we have discussed, where would we be without tools to do our jobs. Lucky for you there is a really cool tool to help you build custom javascript variables. If you pay close attention it will teach you a lot about the DOM and javascript.
The tool I am referring to is the GTM Variable Builder by Alessandro Colarossi. This handy little Chrome Extension works with Chrome Developer Tools and can output the javascript for a custom GTM variable.
It is not perfect and you will have to customize some things now and then but overall it is a fantastic tool and highly recommended for anyone working in GTM. Simply highlight the object or text you want to create a variable for and then click on the GTM Variable Builder. It will pop out two versions of the code. One to test right there in the dev tools console and one to use as your complete GTM javascript variable.
When we test the first green line by copying it and pasting it into the dev tools console and hit enter you can see it returns the inner text of the H1 tag on the page.
Here is another example where you can use this method to pull the author name from the pages.
To set up our dynamic variable for the blog author we can create a new custom javascript variable and add our code from the GTM Variable Builder.
Getting Dynamic Schema Right
Working with dynamic variables in Schema can be both challenging and rewarding. Some web platforms can be more difficult to create variables for than others and what works on website A might not work on website B.
Take your time working with the DOM and Chrome Dev Tools console. Identify all the data you will need to create variables for and create them one by one testing them along the way. Once you have all your variables built out you can then start using them in your Schema markups dynamically.
Working with this method you can now markup 10s, 100s, or even 1000s of pages all at once with a single tag. You will find this very handy for Webpage, BlogPost, and Article tags as it is going to save you countless hours of work.
Obviously there is no need for dynamic tags and variables for the more static tags since they are only on a single page. Plan your approach with Schema before hand and be mindful of what data on what pages is to be marked up and go from there.
Other Handy Schema Tools
For those of us that work on many websites with some of those using the same WordPress Theme there are situations where what worked on website A very well might work just fine on website B. But do you really want to create everything from scratch for all those sites that are very similar..? No, you do not.
The most awesome tool to help with this is another extension for the Chrome Browser. The extension is properly named GTM Copy Paste and was created by Julien from Measure School. The extension requires permissions to access the containers so you will need to be managing all your containers under the same main account.
When working in a particular container you can right click on tags, triggers, and variables and add them to the clipboard of the extension. When done move over to the next container where you would like to have those tags, triggers, and/or variables click on the extension and paste the items into the current container you are in. It is that simple.
I have come to use this tool almost every time I am working on a new container or even an older container. At the most I may have to adjust some of the tags, variables, and triggers to meet the needs of the other site but the basics are there to work off of. A giant time saver when working with 50 or 100 containers.
Schema for SEO
As powerful as Schema is, it is not the do all, be all, end all for SEO. There are no ranking or position guarantees with Schema. However, when applied correctly it can lead to Google and other search engines find more merit in your information.
That can lead to search engines better understanding your content which can move you up in position which can turn into better CTR (click through rates) which can and will turn into better organic rankings if you keep doing things right.
It is a lengthy process with markups only playing a small but important role. Adding Structured Data can certainly help you snag some of those top spots for the rich snippets as you do not have to rank #1 to be in the #0 spot. Although you might find yourself in both spots at some point and that is a good thing as it means you are dominating that search term.
Conclusion
Every website developer focusing on SEO should be very familiar with Structured Data in 2019. Especially with all the attention being devoted to the mobile platform and the mobile/home assistants. Voice search is also at the forefront of everything mobile. Schema plays a large role in what information is returned by the Google Assistant and Amazon’s Alexa. Optimizing your content for voice search is a necessity as everyone is searching from mobile phones.
Having the correct markups applied to your site can help to reinforce your current position by making it clear what your site or business is all about.
Getting started with Structured Data and Google Tag Manager is pretty straight forward for the easy stuff. There are plenty of resources including Google that can help you get to know Tag Manager better.
Schema.org is the best place to gather information about a type of Schema and its data. Schemaapp.com has a great markup builder that you can use to create full markups or just templates that you can store and customize as needed.
Digging into the more advanced stuff with take time and experience just like anything else. But once you learn how to create and configure dynamic structured data markups the time saved will be well worth it. Some experience with Javascript, Chrome Developer Tools, and the DOM will be required to work with dynamic variables.
If you are choosing an SEO Agency, ask them how perficient they are with Schema. Ask what schema markups they would use and how they would implement them on your website. With Schema playing such a large part in digital marketing in 2019, any SEO agency worth their salt should be able to speak intelligently about the use of schema.
Written by Eric Thedy, Technical Manager for One Click SEO
