SEO is still one of the most important strategies for businesses looking to grow online. As search engines continue to get smarter and more user-focused, businesses need to make sure they are giving the search crawlers all the information they need. Adding structured data to your site is imperative for any company looking to leverage search.
Search crawlers speak the language of data. Sure they can “read” text and other elements, but their native tongue is strings and elements. Adding structured data to your site gives the crawlers the information they need in the way they understand it the best. Check out the video below and learn how to markup your site.
Table of Contents
Resources:
Structured Data Validation Tool
Structured Data Markup Template: Download Here
Javascript wrap for Tag Manager: Download Here. This is the code you will need to use in order to get your structured data tags to fire in Tag Manager. Courtesy of Simo Ahava and Search Engine Round Table.
Video Transcript:
Welcome to Hack-My-Growth. In this episode, we’re going to be walking through four different stages of adding structured data to your website. We’re going to start with defining the type of data that we want to add some structure to. Then we’re going to create the JSON-LD that we need to add to our website. Then we’re going to walk through how do we add it to our website. We’re going to give two different options. One adding it directly, and another using Tag Manager. And finally, we’re going to wrap it all up by validating our code to make sure that it’s firing correctly and we can get those rich listings that we’re looking for. All right, let’s go.
This is your first time watching, maybe watching a while but haven’t yet subscribed, please do so now. We create content like this each and every week to help you get the most out of your marketing activities. Now, if you’ve watched our schema video before where we talked about the different types of schema, you may have been wondering, okay, how do I actually add this to my website? How do we define the type of schema I want? Well, that’s what we’re going to cover today. We’re going to walk through an example on our website. We’re going to show you a couple ways to add that schema to your website and some easy ways to generate it. A lot of times when we get into structured data, it can be overwhelming. But the reality is, once you start doing it, it’s not as difficult as it seems.
The first place you want to start is your website. And you want to understand how your site’s built, how its structured and you want to look at the different pages that you have. Now, you’re not going to be adding structured data to every page, although you absolutely could. But you really want to look at the types of pages you have and build a hierarchy. A tool that I recommend for crawling your site and looking at your site’s structure is a tool called Screaming Frog Spider and that’s what we’re going to look at next.
Screaming Frog is a UK based search marketing agency, but they also have one of the most powerful and famous website crawlers available to SEOs or Webmasters. It’s called the SEO Spider Tool and you can download it for free from their website right here. Download the tool, and you can use it. Now there’s also a paid version, which gives you a lot more features. But you can also get away with just using the free version.
Once you launch Screaming Frog, this is what it’s going to look like. I always like to copy and paste here. You have to add your website in. For this example, I’m not going to do this in-depth analysis. It’s going to take a really long time. But you put your site in here and you can begin to crawl your website. Either hit enter, or you can do some configuration to make it crawl a little bit faster, which is what I’m going to do right now and then fast forward to the actual file we’ll get.
Once you’re done crawling your website, you want to hit the export button. It’s going to export an Excel file for you and it’s going to give you a lot of detail on your website. This is the Excel file that Screaming Frog spit out. As you can see, there’s a lot of different pieces of information here. For this specific video, we’re not going to go through all the different information here, we’re going to look at our site pages that are spit out right here. So I’m just going to go ahead and copy the site pages and then move them into another template.
This is a template I created to help me organize my schema projects to make sure that I have everything that I need, and that I can check it throughout the whole process. I’ve linked the schema mapping templates above so you can use it as well. It’s pretty simple. Honestly, we just have the pages here, the types of schema we want to use, the mapping. What type of information are we going to need in generating the JSON-LD code and then just the test results in the areas that we’re seeing?
These are the main top-level pages on our website. There’s a lot of different things that we can do here based on the pages that are available to us. From a high level, you want your main site pages, you can use an organization schema. This is going to be information about your specific company or your business. There’s also a drop down list here that you can choose from, as you see organization. Now, analytics, it’s a product or service. This marketing for tech companies. This is a case study. So this would probably fit more under news article. Consulting is going to be a product or service. So you would go down through here and organize all of your pages under the different types of schema that we’re looking to create.
Now the one we’re going to use as an example is going to be our Contact Us button. And we are going to generate a local schema for this specific page. The reason why we’re doing that is well, we have a local presence here in our area. We do work with a lot of local businesses, and we want to make sure that when people search for our business locally, we have a really robust local presence and we look nice and put together and more put together then the other companies in the area. This is a great way to build off of your Google My Business places for local SEO. But it’s also helpful just to give the search engines more context about your specific business.
Once you’ve decided the types of schema … Let’s say you would go through here. The next step is to map out that schema. So what type of information am I going to need in order to create this JSON-LD code. One place you can go is here to schema.org. This is the homepage of everything schema. If you’re looking at schema you can either look down here and go in the drop downs and look through. You’ll see local business. There’s also a really helpful custom search button. But since we already found a local business here on the main page, we can go ahead and click local business.
As you can see, they’re giving us all the different types of properties associated with a local business. Currencies, opening hours, payments, price ranges, these are things that are associated strictly with local business. Pulling other properties, you can connect them to the organizational properties. It just goes down and down. You can look at all these different properties. Now, you’re not going to necessarily have to map every single one of these, you could if you want to, but you don’t have to. I actually like to go down here to the bottom and look at the examples. Because what they’re going to do here in the examples is allow you to see what a page would look like without markup, and then what it looks like in the three types of markup.
There are three main types that can be used. Microdata, RDS information or JSON-LD. I prefer using JSON-LD. It’s also what Google prefers you use as well. I would look at these different examples and see the one that applies like my business, or close to my business. So you’ve got an example of invoicing for purchase. So it’s not really worth doing. This one has a four-star review. This one just has the name, a little bit of information and some markup. And again, this is a variety of services associated with that markup. Now example three probably makes the most sense. Like if you went to our website page, our contact page, you would see that most of what we have is included here.
We’ve got a map here. We’ve got a little bit of information. It’s not super intense because we’re giving people a way to connect with us and see where we exist. So if I go back to the schema page, I would probably look at this one right now and click on JSON-LD. Now it’s going to start to pool or show me a couple of different things. Now these two things here at the top, at context and at type, we don’t want to mess with. These aren’t things that we’re going to be changing. These are telling the search engines where to go and find the specific markup and what type of markup it actually is. What we want to look at down here are things that are variable. We’ve got address locally. This would be your city. The region, which is going to be your state or your province, depending on where you are. Your street address, then you have your description, your name, and your telephone. Very simple piece of code here. Although it can look a little scary when it’s wrapped inside of a specific script.
What we want to do is tick these things. So we’ve got city, region, address. And we’re going to go over here and mark these out. So these are things that we need. We need our city, we need our region, our address and there are a couple of other pieces of information. We need description, the name and then the telephone number.
From an SEO standpoint, and a local SEO standpoint, you’ll notice that name, address, and phone number all in here, which means you should be marking up your name, address and phone number if you’re a local business and you’re not using schema. The next step is to take these different pieces of mapping that we’ve done and build out our JSON and LD code. So JSON-LD is just a type of script. It’s in the JavaScript family. But what it does is it’s really all about information. JSON is a way to share information in a structured format that a computer or a database can read and then put it into the right column or cell within a specific database. So that’s a little bit more of what’s going on. We’re using it to tell the search engines more about us so they can store more information about our specific company.
There are a couple things you can do. I’m a huge believer in not duplicating what’s already been done before. I’m a big believer in just taking something that’s working and using it. So you obviously can just take this script right here and copy it and paste it and change out the pieces of information that are needed. There’s also another really cool site and it’s called JSONLD.com. It’s also known as Steal Our JSON, and they spit out code for you. As you’ll notice here, if I go down to, where I’m at already is local business schema as you can see it up here. This code is already validated by Google. It’s already working. They know that it works. They’ve validated it, as you can see right here.
They’re giving you a little bit more information in this, which I would probably use this one, and we’ll get into that right now. When we’re talking about local in local search, we want to give Google as much information as we can so that it can enrich our Google My Business listings. Yes, citations are important. Review sites are important. All of that stuff is important. But Google is the most important. They care more about Google My Business and understanding the context of your site from their own platform more than anything else. Now, one of the ways that they can easily find out where you are, is using latitude and longitude. These geo coordinates are extremely important. A lot of times we don’t think of geo coordinates just because we’re navigating this way most of the time. So we’re thinking of our street address which is important, but so is our latitude and longitude coordinates. This helps us show the locality of our business within a city.
Giving Google this is going to give them better information of how far we are from other points inside the city, which also makes it much easier for users to engage with our business and help you find our business from a local standpoint. Steal my JSON has this great piece of code right here. We’ve got the address and stuff we saw before. We’ve got the description and the name. Then also adding in your opening hours, closing hours, your geo type. And then there’s also this other function that you can add in here called Same As. This is important, especially if you have a local presence on social channels.
How does Google know if your Facebook page is the same as your business page or if it’s the right one as your business page? By adding the same tag in your JSON code you can create that connection between your business and social profiles online. We’re going to take and steal this code and drop it in and then work on adding in our own information. Another great thing is they give you links here where you can obtain your latitude and longitude for your business. I wouldn’t just copy this code right into your Excel file, I would use either a text editor or some sort of code editor that’s going to help you manipulate the code. The one I recommend, the one I like to use is Sublime. And so we’re going to copy this into Sublime and start changing things out from there.
All right, so we have added our code here into Sublime and we are going to start doing some manipulations. We want to start again, we don’t want to mess with any of these as types. We only want to change the things that are relevant to us. For instance, our business is located in Melbourne, Florida. We’re going to add these in here and then we would add a description of our business and the name of our business. Doesn’t need to be super long, but should be descriptive and it should also use keywords. Those are very important. This is an area where we can talk to search engines, you want to tell them who you are and what you do.
This is important to remember here. This is military time, not your 12-hour clock. This a24-hour clock. That’s important to remember. Now the last thing we want to look at right here before we get into copy and pasting our social channels is our geo coordinates. Now here’s the cool thing is they again gave us this resource here so we can find our geo coordinates. That is our latitude and longitude right here. So you notice that we don’t have the full number here, we just have it to two decimal points. So we’re going to do the same thing. Just copy and paste.
All right now we’ve had latitude and longitude. We’re going to add the social channels for good measure. I’ll show you how to do that. Again, a lot of copy and pasting going on here. And we’re not going to do Google Plus because it’s being phased out. All right there we have it. Here is our JSON-LD code. Now we want to copy that and save it for good keeping right here in our Excel file which looks really nice, right? If you want to trim this down, you go to format, you can format that cell and I like to wrap my cells. There you go.
The next step is adding it to our website. We’re going to show you two ways to do that. The great part about JSON-LD is it’s not going to slow your site down. You can drop it right into the web page that you want, and it’s going to fire correctly. You’re going to go login to WordPress or your HTML file or whatever CMS that you’re using. For us, we’re using HubSpot, and you drop that code right into that page. Let’s drop it in and give it a test.
Once you’ve added that structured data to your website, we want to test it. We will make sure that it’s firing correctly. Go over and copy the page that we have added the code and go to the structured data testing tool, which is brought to us by our friends at Google, copy the URL, paste it into the box and run the test. This tool is going to crawl the page, it’s going to look for any markup and it’s going to tell us, yes, is it working, no is it not working. And as you see here, we have schema local markup.
Now what you also may notice is that we’re getting a couple of errors. Google is looking for an image here local business, apparently. And they’re also saying, “Hey, pricing field is also recommended. You should probably be adding your pricing to your business listing.” Now this will still fire, it will still work. Even though you are generating these errors. Again, I would always mark down these errors over here, test results, it is firing but we are getting these two errors. And you can go back and add those into the code to make sure that you have it filled out fully.
If we went back over here to schema, you remember that some of these over here did have a pricing range. So if you’re wondering how to add pricing range, you just go to this example of pricing range and we’ll go here where it says pricing range $2, $1, $4 signs, however fancy or how expensive you are. You can also scroll back up here at the top and we can look at the pricing range element here in schema. It’s going to tell you that this is a text value. This is what is used in the local business schema. And you can add in your pricing for your business. So we can go in and add that and clean it up, make sure that it fires correctly. As far as the image goes, this is an interesting one just because it’s also lining up here with line 344. Now we don’t have an image in our structured data here. But you can also put in a logo and that sort of thing. That’s maybe what it’s trying to look at here.
A lot of times have I run into an error like this, and I don’t know what to do, I Google it. And that will help me find the right answer. But all we did here is we copy and paste this into our website, and it fired our schema markup.
The next step is to look at how we would do that using a tool like Tag Manager. Tag Manager is a tag management tool. If you’re not using it on your site, I highly recommend it. It’s a very cool tool to help you keep organized and allow you to do a lot of very cool things in tracking and tagging your website. When you want to add a new tag, you just simply go to tags and new, then we’re going to call this local schema. And we are going to do a custom HTML tag. Like we paste it into our site before, we’re just going to take this and paste it into Tag Manager.
This used to work really awesome. Now the structured data markup tool sometimes has an issue reading the script straight like this from JSON-LD. We’re going to test it and you’re going to see what I mean. And then I’m going to show you how we change this tag a little bit in order to get the results that we’re looking for. The next thing I want to look for is triggering. This is saying, okay, here’s your tag when do we want this tag to be triggered? Now, this is local schema and we want to be triggered on the Contact Us page. As you can see, right here I have a couple of different triggers. But this is not the one that I want. I want to add a new one.
I’m going to call this Contact Us and then I’m going to click on the little element here and I will say page view, some pages and URL equals this page here. So this means this will only fire when somebody or a search crawler or a search engine hit the Contact Us page. Once you save this, you need to submit it. Always make sure that when you submit something that you remind yourself of what you did. We’ll call this Contact Us and publish. Once you publish it, it’s live on your site. You can also test it before you publish it. But in this case, I’m just going to show you how it’s done.
Now before you go to test this, make sure that you’ve removed the local JSON markup from your site. If you’ve already done it, drop it in there. Let’s say you want to go back now and add to Tag Manager, make sure you remove it before you run the test, otherwise, you’re going to show that it probably worked the right way, even though you’re going to have duplicated code. Don’t duplicate your code. Once you’ve added your tag, and you’ve set your tag live, it’s time to go run it again with the structured data testing tool. Again, you put your URL here and you click Run the test. Once again, it’s performing the same action as before and it’s looking for a markup.
As you notice, this time we added a tag but it didn’t show up even though we know this tag is in there, for some reason Tag Manager and the structured data testing tool isn’t reading the JSON-LD. So how do we solve this problem? Let’s get into that.
At this point we have our rap shell done. What we need to do is change it out into Tag Manager. You’re going to copy and paste some of this information again. You’re going to go into Tag Manager, to that schema you just built and we’re going to replace the information that is wrapping it in JSON-LD. Instead, now we’re going to switch it to JavaScript. Again, if you don’t know Java, that’s totally fine. I don’t really know Java that well either, but I do know how to copy and paste very well. What we do is copy and paste it to make these new brackets here and with that, we should be good to go.
Everything looks like it should. Again there’s a little tweak I need to make here. Make sure that the code looks correct and then we’ll hit save. Save and submit. Updated JSON-LD schema JavaScript because Java is something totally different. And publish.
Once we have published this, now we need to go back to our structured data tool and perform a new test. We’ve wrapped our JSON-LD and JavaScript and we’ve told the JavaScript to turn the information into our JSON-LD code. And as you see, we’re getting the exact same information that we got when we posted the code using our dropping in the JSON code directly into the page. Now we’ve validated our code again, we are seeing those image errors and the price range. These are well recommended. This image one I’m going to look into and try to dig a little bit. If you have questions or if you’re seeing that or even if you’ve got an answer to this and you want to shoot it in the comments below that would be awesome.
But in this video we’ve done a couple of things. We’ve looked at using Screaming Frog to scan our site. To see how many pages that we have and then we’ve started to map out our schema by the type of schema and the type of mapping we’re going to need in our schema. Then we’ve added that to our site in two different ways. We drop the code right into the site. We’ve also used Google Tag Manager. And we talked about some of the errors that structured data testing tool has with Tag Manager and why you need to wrap it in a different script.
Finally, we tested those and we found one image error and we also found another warning with Google saying, “Hey, this other information here would be helpful as well.” I’ve put links above to this schema mapping template as well as links to the wrapper for the JavaScript code if you’re looking to use Google Tag Manager. Again, if you have any questions please comment below. I’d love to continue the conversation. And until next time, Happy Marketing.
