Where To Put Schema Markup On Your Website

Published On:

We’ve talked a lot about schema markup and structured data on this blog.  In this first episode of Wednesday Workshop, we are going to walk through how and where to put schema on your website.

Video Transcript:

Welcome to this Wednesday Workshop. In this episode we’re going to be looking at where we put our schema markup. After we build it, after we’ve tested it, where does it actually go on our website? This is a question that I get asked quite often and it’s not as intuitive as it may seem. Now there’s some markup that can go on all your pages and there’s other markup that is very specific to the page that it’s marking up.

Markup Across All Pages

For instance, you’ll have things like organization or website markup, which can actually go across all of your pages. I created this one right here, which I tested, it works, everything looks the way it should. Essentially I can drop this into my template header and it will be on every single page. Now, this is a WordPress site. This is not a site that we market or anything. This is a site we do testing on, like workshops and videos like this one.

Schema Markup with WordPress

One of the things with WordPress you want to know, especially if you’re using a theme to test that theme out, and run that theme through the structured data testing tool. A lot of themes will have markup in them from the get-go. Now, some of it may be good, some of it may need to be adjusted and tweaked, and if you look at this theme for instance, we’re using Beaver Builder because it’s a quick builder that we can use to put a site together and do some things with it quick.

You’ll see that it has a webpage markup, it has organizational markup and it has creative work. Now, what I would be doing if this was a site I was going to actually market, spend some time with, remove all of this default stuff and add in my own. For instance, organization was missing some stuff and really what we’d want to do is make sure that we had that organization on another page on our site, specifically the contact page with our contact points.

Add Contact Information

Let’s talk about how we would add those in. There may be some doubled up here just based on this theme, but in reality you probably want to scrub this out and add in your own. That way you’re not allowing the theme builder to dictate what your structured data says, and you have control over that. Like I said, we have the homepage here, we’ve got a FAQ page and a Contact Us page. Speaking of the Contact Us page, right, we talked about the organizational schema and more specifically something known as a contact point. This is where you can connect your phone number, your email address, those important pieces of information that you might want to show up in the knowledge card and also connect to your Google My Business login or your Google My Business Card on search and make that semantic connection there, you can add those in here using contact point type.

And what we would do is we’d take this code that we created, we would go to our page and then specifically this page is built with a front end builder so we can just drop code right into it. We’d open the page up. As you can see here, it’s just a text editor. I don’t want to drop the adjacent end here because it would show up as text. I actually want to drop it somewhere like this where it’s adding in the markup into this area and I can save it. You won’t see it because it’s just code. I hit done. Again, you don’t see anything but what it will do now is it’s living now behind here and Google can see it.

Add Code Into Page

If I went over here and I tested this page, I’ll see now that I’ve got an additional organizational schema. Now there’s two of them because the one that was being pulled in by the theme, which is this one. But the one that we created which is much more robust is this one right here with a contact point telephone number, contact type, where we serve, and the language.

All I did was I took this code and I dropped it right into the HTML of this page. One thing you want to know like this phone number here, if this phone number is on this page, we’d probably also want to have it marked up in the code. If this email is our email, we want to have that marked up as well using contact points. There are a lot of things that you can add to it, but adding it to the page is just finding that specific page and copying the JSON directly into the code.

You could put it in the header, you could put it in the footer, you could put it directly into the HTML and the body. Really just, it needs to go into that page and it shouldn’t obviously mess anything up. If you want to be really clean. I recommend putting it as high on the page as possible. In this case, I’m just showing you that it’s pretty easy to do with any WordPress site.

Working Without a Page Builder

Let’s say this page wasn’t using a page builder. What we could do is go to the standard editor here on WordPress and now you’re seeing right now this is the new Gutenberg, which can be confusing to some people. I know a lot of people will move back to the original one because they don’t like Gutenberg. But you can add custom HTML blocks if you wanted. As you can see, there’s a map right here. I could go here again and add in my schema. Oh that’s not my schema. Our structured data right here, drop it in, hit update. Now it’ll still be on the page the same way. But all this is going to do is make my page look like junk because of the page builder tool. But dropping it in there and it’s going to do the exact same thing as we did before. It’s all about finding that specific page that you want to markup and making sure that the markup is clean, that it works, that you don’t have anything broken, and then launching that page.

Now again, I’m going to go back to Beaver Builder to make this page work the right way. Contact form, run that test and it should give us the same thing here, I removed it. Now we’ve also got the FAQs here on the page and that’s going to work the exact same way. The key with FAQ is whatever you have in your FAQ, this exact text also needs to be on this page, so even if it’s behind here, you need to have the exact same text and again it’s the same process. Finding that, copying it, going to the page you’re going to be working on whether you have a front end builder or not. In this case, I even have options for the Beaver Builder to do HTML here. Save, publish. Again we can go over to the structure data testing tool, add in here, run the test, and now I also have the FAQ schema which is set up on this page.

Go to Google Search Console

Now what I would do from here is I would go to Google Search Console. I would submit these URLs to be recalled and indexed so that Google would know that I’ve added structured data to them. As you can see right here, this right here in the page header, this lists item scope, item type. That is microdata that this template already has in it in order to leverage some schema markup. It can be helpful if you don’t want to go through the process of doing these. Some themes are helpful like that, but also can be a pain if you want to have more control over it, so scrubbing those out and making sure that you only have the markup that you want in there is kind of important.

Leverage Plugin in WordPress

There’s another way that you can do this on WordPress as well and it would be leveraging a plugin. Now Yoast has that ability, but the plugin that we like to use here is SEOPress and in order to do a manual schema, you’re going to have to have the pro version. The pro version is what allows you to create your schemas and then you can add them to specific pages. I can go over here and select any of these different schema types just like we did like the FAQ, and I can go here through questions and answer questions and answer. I can either set a rule for it to show up on posts or templates or what I would do is I would have it set manually on a specific page because you don’t want FAQ going on every single page of your site when the FAQ only lives on one URL.

A good rule of thumb to think about when you’re adding in and marking up these different elements, especially these specific elements like FAQs or how-tos or questions and answers or product, something like that, you want to have one specific schema that relates to that page on that page. You don’t want to have all your schemas always firing on every page, because that structured data is not really helping you at that point because now you’re adding irrelevant structured data to a page that has no information about it. But adding it in is as easy as copying and pasting it to that page, whether it be in the header or directly in the body or in the footer of the page. And it being JSON-LD, it’s not going to impact site speed. It’s not going to have any negative impact on your website whatsoever.

I hope this was helpful. Hope you learned something new. If you have any questions, if this wasn’t clear, please comment below and we can continue that conversation. Thanks. And until next time, Happy Marketing.

New Call-to-action

About the Author: