LOADING
How To Add Stuctured Data Markup Using Google Tag Manager Article Header Image

All You Need To Know About Structured Data Markup

I know that most of the blog readers aren't very technical or have knowledge about technical SEO setup. I'm not that good at technical setup myself, since I'm not a coder or developer.

The only coding experience I have came from working with clients and my own websites.

Sometimes you still have to get your hands dirty and do some technical work yourself. Adding structured data markup is one of those jobs you just have to do, because it affects your rankings a lot.

It's not difficult to add, but does take some time to get used to.

Adding this markup will be one of the more important tasks for on-site optimization.

Since this is a long post with many different sections that you might not need, I decided to add a table of contents that you can navigate by selecting specific content areas you want to view.

What is structured data markup?

It takes a lot of effort for Google crawlers to understand the content of your website. Structured data markup is essentially a short explanation as to what the content is about, who it's written by, etc.

Having structured data markup provides Google crawlers with additional data about your website it wouldn't have otherwise or it wouldn't fully understand.

HTML, CSS and several other coding languages determine how the page shows up for human eyes and code you're going to add with structured data markup will determine how the crawlers see your website data.

In other words structured data connects all the dots and data points of your website instead of just seeing raw text without any connection between the content.

Let me give you an example, so hopefully you have a better understanding of what I mean.

If you have a restaurant website and customers are able to use reviews to give a rating for your business, you would use a structured data markup code that looks something like this:

<script type="application/ld+json">
{
   "@context": "http://schema.org/",
   "@type": "Review",
   "itemReviewed": {
        "@type": "Restaurant",
        "image": "http://www.example.com/img.jpg",
        "name": "Legal Seafood"
   },
   "reviewRating": {
        "@type": "Rating",
        "ratingValue": "4"
   },
   "name": "A good seafood place.",
   "author": {
       "@type": "Person",
       "name": "Bob Smith"
   },
   "reviewBody": "The seafood is great.",
   "publisher": {
       "@type": "Organization",
       "name": "Washington Times"
   }
}
</script>

This might already be too confusing and you might not understand the value of this, so let me explain what exactly you need to do and how structured data markup helps your SEO.

Why is structured data markup important?

As I've mentioned previously, structured data markup helps search crawlers understand your data and find the most important details about it much easier.

On top of that it enables you to get Rich Snippets or Rich Cards on search results. This essentially creates a better look for your pages on Google search.

There are several examples I can give you.

First of all let's look at search term like "chicken soup recipe". It will bring up several different types of rich results:

First type:

Structured Data Markup Example #1

This result shows up above everything else, essentially being in position #0 (ranking above #1). As you can see it shows exactly what you want as a user - you wanted a recipe for chicken suip and it gives you clear directions on how to make that.

You don't have to go any further in most cases and the first result like this provides you with a solution to your problem. This type of rich content usually shows up on question-based searches, recipes, searches for top products or top services, definitions of certain words or information about events.

Wouldn't you want to rank above #1 result? This can only happen if you're using structured data markup, otherwise Google crawler won't have enough information about your website to provide you with rich cards.

Another example of this would be for the same search term, right below #0 position:

Structured Data Markup Example #2

This rich content provides you with relevant answers to popular search queries.

Once again, these results are primarily taken from content with structured data markup.

The last example from same search term is even further below:

Structured Data Markup Example #3

As you can see, this result also doesn't show up like normal ones would. In addition to title, url and short description, here you have a rating, number of reviews, calorie count as well as an image for this soup.

All those additional details are created by structured data markup.

So to conclude this topic - structured data markup helps search engines understand your content better, in return you get better results on search engines and they prefer to show content with structured data higher than one without.

On top of that, people are more likely to press on your results if it stands out more, which is what structured data creates. Because of this, people are more likely to press on your link, therefore increasing clickthrough rate.

When Google notices a higher clickthrough rate for specific searches - they determine that the page is more relevant, therefore they prefer to show it higher than normal results. So essentially structured data markup helps you increase rankings directly and indirectly at the same time.

How to create structured data markup code?​​​​

Creating the actual structured data code is the most difficult process for someone that isn't experienced in coding. Gradly there are tools that help you with it.

Primary tool we're going to be using is JSON-LD schema generator. JSON-LD is the most popular schema language or code type and we will be focusing primarily on JSON-LD as it's the easiest to write.

In order to create the structured data markup code, first head into the schema generator page.

Around the middle of your screen, you will see a drop-down menu for Schema type selection.

Schema Generator Type Selection

If you press on the drop-down button, it opens up a huge list of Schema types. You can also find the whole list at schema.org website.

I don't want you to get lost in this, as there are hundreds of different schema types, so we will focus on the most common ones going forward.

The most common structured data types are: LocalBusiness, Organization, Article, BlogPosting, Review, Product and Service.

For this example let's select LocalBusiness markup.

Schema Generator Local Business Data Selection

On the left side you will see many different sections and data types to add. What localbusiness needs in terms of markup is the following information: name of the business, address, geo location, telephone, open hours and business logo. You could also add social media if you have those pages.

To select a specific type of data, you have to press on "+" sign next to it and to delete it - press "x".

As soon as specific type of data is selected, an HTML code will show up on the right side of these types.

Schema Generator Local Business Code Example

It can have many different sections for this. Whenever you add new section, it will continue adding more code to this HTML script.

Now we will provide you with code examples, show you how to alter the code to delete sections you don't want to add new ones and will even show you how to add this code to your website. Once a code is generated and it's put on your website - it needs to be tested, which we will discuss as well.

Structured data code examples and ways of altering it

We will go into code examples for every code type mentioned previously - LocalBusiness, Organization, Article, BlogPosting, Review, Product and Service.

Local business structured data markup

Let's start off with local business code example:

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"LocalBusiness",
"image": [
   "http://example.com/photo-1.jpg",
   "http://example.com/photo-2.jpg",
   "http://example.com/photo-3.jpg"
],
"name":"Dave's House of Yoga",
"address":{
   "@type":"PostalAddress",
   "streetAddress":"3986 Rivermark Pkwy",
   "addressLocality":"Santa Clara",
   "addressRegion":"CA",
   "postalCode":"95054",
   "addressCountry":"US"
},
"geo":{
   "@type":"GeoCoordinates",
   "latitude":37.3952149,
   "longitude":-121.9474023
},
"telephone":"+14085551135",
"priceRange":"$$$",

"openingHoursSpecification": [
   {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": [
         "Monday",
         "Tuesday",
         "Wednesday",
         "Thursday",
         "Friday"
      ],
      "opens": "09:00",
      "closes": "21:00"
   },
   {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": [
         "Saturday",
         "Sunday"
      ],
      "opens": "10:00",
      "closes": "23:00"
   }
]
}
</script>

This is probably the longest example out of the ones I have. To make it easier for you, I've highlighted areas you might want to change with red text.

First of all, I will explain exactly what some of the more complex data means before telling you how to alter any stuctured data to make sure you understand it correctly and know what needs to be changed.

In "image" section you can select as many business photos as you want. You could use same photos you have on your website, same ones created on Google Local Business listing or unique ones. The only thing you have to keep in mind - the photos have to be related to local business, not your website. It could be photos of your business from outside, inside, etc.

"Geo" data shows estimate longitude and latitude of your business physical location. Most of your won't know such metrics for your own business, but there's an easy way to check this.

First you have to head into Google Maps and find your business location. Once you find that, right-click with your mouse on exact location and select "What's here?" option.

How to Find Latitude and Longitude for Local Business

When you do that, a small window will open up at the bottom of your screen. It will show an address of that building. At the bottom in small letters it will also give you longitude and latitude of selected area. The first metric is latitude, second one is longitude (in this example 37.3255 is latitude and -121.8738 is longitude).

How to Find Longitude and Latitude for Local Business #2

Let's look at "priceRange" now. In this section you need to select how expensive average products or services are in your local businesses in comparison to the whole industry you're operating in. The price range should have symbols "$", "$$" or "$$$". "$" means that your price range is lower than most local businesses offering similar services / products, "$$" would mean it's roughly around the average rate and "$$$" would mean it's more expensive than an average price for the same thing.

Without price range, there's only 1 more thing left to talk about - open hours, which is marked up using an "openHoursSpecification" tag. Understandably you are able to select different business hours for differnt days of the week, which is what is done within given example. In that specific example work hours are selected at 9am to 9pm on work days and 10am to 11pm for weekends.

Adding or deleting structured data

Just replacing data highlighted in red with your own business details will be enough. The question you might have is how do I remove some details that don't fit my business or add new ones? Now I will get into this and this might get a little complicated, but there's a way to test your code and make sure everything was done correctly.

If you just want to replace details highlighted in red, then do that and your code won't be affected, but what if you want to remove let's say open hours, because your business is open 24/7. In that case, you could just delete "openHoursSpecification" tag all together and all content that follows it after square brackets and curly brackets.

In this specific case, the code would look something like this:

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"LocalBusiness",
"image": [
   "http://example.com/photo-1.jpg",
   "http://example.com/photo-2.jpg",
   "http://example.com/photo-3.jpg"
],
"name":"Dave's House of Yoga",
"address":{
   "@type":"PostalAddress",
   "streetAddress":"3986 Rivermark Pkwy",
   "addressLocality":"Santa Clara",
   "addressRegion":"CA",
   "postalCode":"95054",
   "addressCountry":"US"
},
"geo":{
   "@type":"GeoCoordinates",
   "latitude":37.3952149,
   "longitude":-121.9474023
},
"telephone":"+14085551135",
"priceRange":"$$$"

}
</script>

The same way any other lines could be deleted. If it's part of a different element and doesn't have it's own curly brackets following an element, then all you have to do is just delete that one line. If it has brackets following it, then you need to delete all data within those brackets as well.

Now one more thing to keep in mind - there shouldn't be a comma after last element within each bracket group. You might have noticed, that code I had earlier had a comma after "priceRange" element, but I had to delete it, since it became the last element of primary brackets when "openHoursSpecification" was deleted.

Same way you would need to delete a comma after second image marked up if all you have is those 2 images.

Keeping this in mind, adding new code to your section becomes easy. Just find the code that you need (using code generator, as I explained in previous section) and add the line of code within your script. For example if I wanted to add contact email address to my markup, the following line would need to be added:

"email":"info@example",

You wouldn't have the comma if it's the last element.

Now in case you didn't fully understand how adding new code could be achieved, I will give you a full code with email element.

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"LocalBusiness",
"image": [
   "http://example.com/photo-1.jpg",
   "http://example.com/photo-2.jpg",
   "http://example.com/photo-3.jpg"
],
"name":"Dave's House of Yoga",
"address":{
   "@type":"PostalAddress",
   "streetAddress":"3986 Rivermark Pkwy",
   "addressLocality":"Santa Clara",
   "addressRegion":"CA",
   "postalCode":"95054",
   "addressCountry":"US"
},
"geo":{
   "@type":"GeoCoordinates",
   "latitude":37.3952149,
   "longitude":-121.9474023
},
"telephone":"+14085551135",

"email":"info@example.com",

"priceRange":"$$$"

}
</script>

I've added it to the end, right before "priceRange" element.

Now the only thing left for you to do is add this code to your website. I will tell you exactly how to do that in the next section of this guide, but first I will discuss other popular types of markup.

Organization structured data markup

An example for "Organization" type of structured data would look something like this:

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Organization",
"logo":"http://www.example.com/logo.jpg",
"name":"Dave's House of Yoga",
"url":"http://www.example.com",

"address": {
   "@type":"PostalAddress",
   "streetAddress":"3986 Rivermark Pkwy",
   "addressLocality":"Santa Clara",
   "addressRegion":"CA",
   "postalCode":"95054",
   "addressCountry":"US"
},
"contactPoint": [
{
   "@type": "ContactPoint",

   "telephone": "+1-401-555-1212",
   "contactType": "Customer service",
   "areaServed": "United States, Canada",
   "availableLanguage": "English, Spanish"

}
]

}
</script>

You might notice that the code is a lot similar to Local Business markup. Essentially it is supposed to be similar, except "Organization" type of markup is mostly used for businesses without a physical sales or service location.

Any business operating online or providing services in more than a single location would use "Organization" type of markup.

If your business has reviews shown on the website, then you could use several different types of markup to use that information. The 2 types of markup can be separated into "AggregateRating" and "Review".

"AggregateRating" is the type of markup that primarily will be used to mark high number of reviews and give average values while "Review" type of markup is used for individual review or testimonial with written content about your business / website.

As I've mentioned previously, structured data markup creates rich snippets for your website on search results.

Aggregate rating markup done correctly looks like this:

Aggregate Rating Structured Data Markup Example

Eventhough, this isn't done on an organization level, it still used "AggregateRating" type of markup. As you can see, on search results this markup highlights average rating and number of reviews.

Review markup looks like this:

Review Structured Data Markup Example

While you still have a rating value, instead of numeric reviewer value, it shows a person that has reviewed a product, service or business.

The recommended person to use for this type of markup would be someone better known in an industry you're operating in.

Here's an example or structured data markup with "Review" element.

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Organization",
"logo":"http://www.example.com/logo.jpg",
"name":"Dave's House of Yoga",
"url":"http://www.example.com",

"address": {
   "@type":"PostalAddress",
   "streetAddress":"3986 Rivermark Pkwy",
   "addressLocality":"Santa Clara",
   "addressRegion":"CA",
   "postalCode":"95054",
   "addressCountry":"US"
},
"contactPoint": [
{
   "@type": "ContactPoint",

   "telephone": "+1-401-555-1212",
   "contactType": "Customer service",
   "areaServed": "United States, Canada",
   "availableLanguage": "English, Spanish"

}
],
"review": {
   "@type": "Review",
   "reviewRating": {
      "@type": "Rating",

      "ratingValue": "4.5",
      "bestRating": "5",
      "worstRating": "0"

   },

   "author": "James Jameson",
   "description": "This business is awesome."
}

}
</script>

If you look at "Review" section, specifically at "reviewRating", you will see several numbers in there. "ratingValue" should be the actual rating you've been given by reviewer, "bestRating" is highest possible rating that can be given and "worstRating" is the worst one that could be given.

You can use range you want for this - 0 to 5; 1 to 5; 0 to 10; 1 to 10; 0 to 100 and so on. It doesn't matter which one you use as long as the review shows up within same range on your website.

Unfortunately you're not allowed to add review markup on website if the review is on your facebook page, yelp, Google listing or anywhere else. If you're going to mark up a review - it has to show up on the website and more specifically - the page you're using markup on.

Now if you have more than a single review you'd like to showcase - you will be using "AggregateRating" value. In that case your full markup would look something like this:

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Organization",
"logo":"http://www.example.com/logo.jpg",
"name":"Dave's House of Yoga",
"url":"http://www.example.com",

"address": {
   "@type":"PostalAddress",
   "streetAddress":"3986 Rivermark Pkwy",
   "addressLocality":"Santa Clara",
   "addressRegion":"CA",
   "postalCode":"95054",
   "addressCountry":"US"
},
"contactPoint": [
{
   "@type": "ContactPoint",

   "telephone": "+1-401-555-1212",
   "contactType": "Customer service",
   "areaServed": "United States, Canada",
   "availableLanguage": "English, Spanish"

}
],
"aggregateRating": {
   "@type": "AggregateRating",
   "ratingValue": "4.5",
   "bestRating": "5",
   "worstRating": "0",
   "reviewCount": "100"

}

}
</script>

This is very similar to review markup, except it has "reviewCount" value that the previous one didn't have. The number should represent how many reviews you have of your business, product or service. Once again, these reviews should be accessible from your website or at the very least a number of reviews should be seen.

The numbers here might not match ones you have on your own website, especially if your reviews are public and anyone can add them. In this case you wouldn't be able to update it every time a new review is added and that's not a problem. As long as you don't have more reviews marked up than you actually have - you're going to be fine.

Keep in mind:

Adding marked up data that doesn't exist on the specific page that has this markup might get your website penalized for the use of "hidden structured data", so this is something I would try to avoid. It won't negatively affect all your pages, just no markup will be shown on any of the pages, which might lower your rankings in the long-run if you don't fix it in time.

Product structured data markup

Product type of structured data markup is mostly seen on ecommerce stores or websites with product pages and that's understandable, since the code has to be used on an individual page that has a product.

Each product should have it's own unique markup, so the code will need to be added to <body> section of a code, instead of a <head> section, like LocalBusiness or Organization markup could be used in.

A code for product markup looks something like this:

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Apple iPad",
"image": [
   "http://example.com/photo-1.jpg",
   "http://example.com/photo-2.jpg",
   "http://example.com/photo-3.jpg"
],
"description": "iPad is a great product",
"brand": {
   "@type": "Thing",
   "name": "Apple"
},
"aggregateRating": {
   "@type": "AggregateRating",
   "ratingValue": "4.6",
   "reviewCount": "109"
},
"offers": {
   "@type": "Offer",
   "priceCurrency": "USD",
   "price": "159.99",
   "priceValidUntil": "2018-09-01",
   "availability": "http://schema.org/InStock",
   "seller": {
      "@type": "Organization",
      "name": "John's Shop"
   }
}
}
</script>

Once again, the only text you would replace is already highlighted with red.

Some of the elements are similar to those we already discussed in previous sections, but we have some new ones as well. First let's discuss "brand" element.

"Brand" is used to mark up data about who's product brand you're selling. This doesn't need to be marked up if you are selling your own products. You can still select your own brand name and type it in here, but that won't change anything.

The next element is "offers". Within this one, we have quite a few things to talk about.

"priceCurrently" markup should use exact price of your product in currency provided above. If you're selling items in several different currencies, it's recommended to either create separate offers for each currency or to use only a primary currency in your markup.

"priceValidUntil" shows when the quoted price won't be valid. You don't need to use this element and it's mostly used during promotion periods, where you lower a price point. If the price isn't changed on your markup during promotional periods, it will show up with orginal price on search results, eventhough you might have a different price on your website.

As previously stated, crawlers look only at your structured data markup when deciding which snippets to show on search results and this might create data inconsistencies if you fail to update markup after content updates on your website.

Keep in mind:

Product markup could be added to product review and affiliate websites if you're linking to pages that directly sell that product. In that case make sure on "offer" element you select the right seller.

Service structured data markup

Same as with product structured data markup, each service should have unique markup added for it and only the pages that best represent the service should have service markup added to it.

An example markup looks like this:

<script type='application/ld+json'>
{
"@context": "http://schema.org/",
"@type": "Service",
"areaServed": "United States",
"serviceType": "Insurance",
"provider": {
   "@type": "Organization",
   "name": "My insurance company"
},
"url": "http://www.example.com/insurance/",
"name": "Business Insurance",
"description": "Quick business insurance. Includes 10-weeks business interruption & $10M public liability cover."
}
</script>

You could add offer markup if there's a fixed price for your services (same one product markup has, except you wouldn't use "seller" and "availability"). That said, if you have a service without a fixed rate - the offer markup can't be done.

In this service markup example, "provider" element replaces "seller" element that you had in product markup. Essentially it's the same thing though and you should use your brand name here, unless you're re-selling services.

Another new line that you see here is "serviceType". This is self-explanatory and should contain the industry you're operating in.

Just like with product markup, you can also add "review" or "aggregateRating" elements if your services are rated and the ratings are shown on same page you're marking up.

Review structured data markup

I already went into review markup that could be added to Local Business, Organization or Product markup, but in some cases you would want to add it as a separate entry.

Review markup should be used as a separate unit on content where you review products, services or other companies. For example if you have a website that reviews computers, each product review should have a review markup.

A review structured data markup would look like this:

<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"Review",
"author": {
   "@type":"Person",
   "name":"Jack Jackson",
   "sameAs":"https://plus.google.com/123"
},
"url": "http://www.example.com/item-review",
"datePublished":"2014-03-13T20:00",
"publisher": {
   "@type":"Organization",
   "name":"My Organization",
   "sameAs":"http://www.example.com"
},
"description":"Great item and company that built it.",
"inLanguage":"en",
"itemReviewed": {
   "@type":"Thing",
   "name": "Just an item",
   "sameAs": "http://itemwebsite.com"
},
"reviewRating": {
   "@type":"Rating",
   "worstRating":1,
   "bestRating":5,
   "ratingValue":4.5
}
}
</script>

With this, you have quite a few items that don't necessarily have to be used. For example reviewer's social media profile doesn't have to be used, exact time stamp on "datePublished" element doesn't have to be used (in that case delete everything "T20:00" and leave everything else), a website of item you have reviewed doesn't have to be used.

If you're going to remove a website for item reviewed or author's social media profile, remember to also delete comma off of an element above it to make sure the last element within curvy brackets doesn't have a comma at the end of it.

Just like with organization markup, local business markup and product markup, instead of "Review" you can use "aggregateRating" type of structured data. This would be used either if you let other viewers / readers review the same product and it shows up on your website or if the item is just being reviewed by more than a single person.

In that case use a structured data markup that looks something like this:

<script type='application/ld+json'>
{
"@context": "http://schema.org/",
"@type": "AggregateRating",
"itemReviewed": "Reviewed Item",
"url": "http://www.example.com/item-review",

"reviewCount": "150",
"bestRating": "5",
"ratingValue": "4.7",
"worstRating": "1",
"description": "Item reviewed by 150 of our readers"
}
</script>

The structured data markup could be used as-is and requires only for red text to be replaced.

In "description" element you should add a short conclusion for your item reviewed. Your meta description tag could be use here as long as it's custom-made for that page, but my recommendation would be to use 4-7 short sentence overview of the product.

BlogPosting and Article structured data markup

BlogPosting and Article markup is almost the same. All but one line will be exactly the same, so I decided to keep it within a single section.

There's also another type of markup that is almost the same, just used in slightly different situations - NewsArticle. The same type of data needs to be marked up.

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage": {
   "@type": "WebPage",
   "@id": "http://www.example.com/article"
},
"headline": "Headline of my article",
"image": [
   "http://www.​​​​example.com/photo-1.jpg",
   "http://www.example.com/photo-2.jpg",
   "http://www.example.com/photo-3.jpg"
],
"datePublished": "2018-02-05",
"dateModified": "2018-02-06",
"author": {
   "@type": "Person",
   "name": "John Doe",
   "sameAs":"https://plus.google.com/123"

},
"publisher": {
   "@type": "Organization",
   "name": "My Organization",
   "logo": {
      "@type": "ImageObject",
      "url": "http://www.example.com/logo.jpg"
   }
},
"description": "This is a great news article"
}
</script>

With this markup, you can easily replace "@type": "Article", line with "@type": "BlogPosting" or "@type": "NewsArticle", based on what type of content you have on your website. Obviously, blogs would have BlogPosting and news reports would have NewsArticle.

No other data needs to be changed when you're replacing content type as the same exact content needs to be marked up for all of those kinds as BlogPosting and NewsArticle are subcategories for Article structured data markup.

Same as with previous examples, you are able to remove some of the details, such as social link for author profile or some of the images for an article. Unfortunately publisher markup and author markup are necessary, even if you don't have such content shown on your website.

Now all that's left for us to do - add test this structured data markup and then upload it on your website.

Testing structured data markup

All the markup I have provided was already tested to make sure there were no mistakes within it, but after you make some changes - you should test it to make sure there's no code issues.

Testing structured data markup is extremely easy to do and Google provides you with the only tool you need for the task.

You can also use this tool to check what structured data your competitors have and this might help you determine some additional types of markup that you need.

To test structured data markup, you need to head into Google Structured Data Testing Tool website.

Testing structured data code

First you will be testing code, not an URL, so this can be done by heading into Google Structured Data Testing Tool page and selecting "CODE SNIPPET" tab.

Structured Data Markup Testing #1

Once you run the test, it will bring up screen separated into 2 sides. Left side will show the code that you've tested and right side will show errors and data that was marked up.

As an example, I've tested last structured data markup we've reviewed - article markup. We're going to completely ignore left side for this example as it would show the same code.

Structured Data Markup Testing #2

On the top right corner it shows whether you have any errors or warnings with your markup. Since this was already tested, there's no issues with it. Just to show you how this might change with a deleted comma - I will do that on purpose and show you how to find the issue.

Structured Data Markup Testing #3

If you press on the error, it shows you what the issue is. There are several different types of errors you might have - missing curvy bracket, missing comma, too many symbols (such as commas or brackets) or an actual issue with type of code you marked up, for example where a certain element doesn't belong within markup that you're doing.

In this case it's a missing comma that I've created on purpose.

If you turn to the left side of your screen, it will show you where the error is.

Structured Data Markup Testing #4

If you look at the code on the left side (one I took a screenshot of), a small "X" icon on a red circle will appear where the issue is. Since we already know that it's a missing comma or bracket, we know exactly what to look for.

Eventhough the issue is marked in 24th line, if you pay close attention, the commany isactually skipped one line above. Another thing you might notice, which might help you find an issue location is that only a markup should be marked in dark red text, while all elements are in black font color. But from 23rd line, all text starts showing up in dark red font, which also shows you where the issue lies.

Just try to look for inconsistencies within your markup and finding the issues won't be difficult.

Now in order to test a code again, you will need to start a new test. You could reload an URL I've given you, but there's an easier way to set up a new test - by pressing "NEW TEST" button on top right corner of your browser.

Structured Data Markup Testing #5

It will bring up the same window you had at the beginning - where you are able to add a completely new code.

Once code is uploaded to a website, you might want to test it out again, which we will discuss going forward.

Testing structured data markup on a website

To test structured data markup on your own or competitor website, you should start at the same place - head into Google Structured Data Testing Tool page.

Now instead of "CODE SNIPPET" selection, you will need to stay on defaul window - "FETCH URL".

In here, just add an URL into the search bar and press "Run Test" button.

You will appear on a similar looking page as with code testing, where on left side you see HTML code of the page you're analyzing and on the right side you will see all the markup that a specific page has.

As an example, we're going to take an article I previously written and analyze what data it marks up there. Article we're going to look at - Best Tools for SEO Analysis and SEO Audits.

Structured Data Markup Testing #6

On this specific article, I have "Article" and "Website" type of markup. Website was automatically created by the content management system I'm using (WordPress) and Article markup I've done myself.

I've highlighted the same type of data as structured data mentioned on "Article structured data markup" section of this guide.

Now all that's left to do is upload this data to your website.

Adding structured data markup to a website

This will be the most difficult part about structured data markup, especially if you're not using WordPress content management system. For a WordPress website, this is a much easier process than for most other content management systems or custom websites.

Now to mention again - I'm not a coder, developer or programmer of any kind and might not know of all the ways to add structured data markup, but I do know several different ways either for WordPress or just any website out there.

You could directly create structured data markup templates that are automatically filled out for you, but I wouldn't know how to do that and it would require you to hire a professional to get this done.

First of all I will show you how structured data markup could be added to WordPress website and then I will talk about a way to do it with Google Tag Manager on any website or any content management system.

Adding structured data markup to WordPress website

WordPress is an open source platform with thousands of plugins that help with anything from order management to content optimization. There are several plugins dedicated specifically to help with structured markup additions to your websites.

The first plugin I wanted to talk about - Schema App Structured Data. It isn't a very popular plugin, but really easy to use and it adds structured data markup that you might need to most of your pages automatically.

Unfortunately plugin adds only "BlogPosting" type of markup to posts and "Product" markup to product pages, but if that's all you have on a website - then it will help you tremendously as you won't have to change the code at all and everything will be done automatically.

It also allows you to change the code and add custom code, but for that I would recommend a different method that I will talk about later on.

Now let's talk about setting up and using the plugin. The easiest way to add it to your website would be to search for plugin in plugin search database on WordPress.

To do that you have to go into your WordPress dashboard and on the left side menu select "Plugins" -> "Add New" option.

Adding New Plugin on WordPress #1

Doing this will bring you to a plugin search dashboard. All you have to do there is enter the addons name ("Schema App Structured Data") on top right search bar.

Adding New Plugin on WordPress #1

You don't need to press anything after entering the keyword and it will automatically refresh search results. Once the name of a plugin was added, it will appear as first result and you have to press "Install Now" button on the top right of a box surrounding plugin's description.

Adding New Plugin on WordPress #1

At that point, "Install Now" option will be replaced by a dar blue "Activate" button, which you have to press as well. Once this is done - all you have to do is head into any page, post or product on your dashboard and at the bottom of it, you will see a section where structured data markup could be changed.

On bottom right corner, you will see a dark blue pencil icon, which lets you edit the code upon pressing it.

Adding New Plugin on WordPress #4

You can also access Structured Data Markup Testing Tool that we've talked about previously if you press "Test with Google" button right above highlighted pencil icon.

By default, all the code for blog and product pages will be marked up well though.

Now a different plugin that lets you add specifically the code you need is called "WP SEO Structured Data Schema".

It lets you add "Organization", "Article", "BlogPosting", "Event", "Product", "Video", "Service", "Review", "AggregateRating", "Restaurant" and "LocalBusiness" type of structured data markup. The code you're able to select is limited, but it's extremely easy to use and you're able to select all the mandatory lines of code without any coding at all.

You can find the plugin same way by searching for "WP SEO Structured Data Schema" and activating it. Then it will show up at the bottom of each page or article.

WP SEO Structured Data Schema Plugin Dashboard

Their dashboard that appears below your pages looks like this.

At the very top you have navigation between structured data types and you can select whichever types of markup you want to add on each page. There can be several types of markup added on each page.

To use any type of markup, you need to select "Enable" element at the very top of each structured data markup category and fill out the information with red star next to it. In this particular case the red star means that information is mandatory if you want to use selected markup structure.

Right below mandatory information you will have some information that could be added, but it's not necessary to do that. Specifically for an article it will be "Description", "Article body" and "Alternative headline".

In most cases you will want to use "Description" markup and could highlight "Article Body" as well, pasting your whole page's content into there, but I don't see "Alternative headline" being used often.

Unfortunately these types of tools have their limitations. For example it's impossible to create more than a single type of structured data markup using the first plugin I've mentioned and with a second one you are able to create markup only for the categegories you see at the top. These will be the most common types of markup that you use, but you might want to use some custom code occasionally.

In order to that that, you will have to do some minor editing to page's content, which I will show you how to do.

I've introduced you to the way you can get code and test it out, so will skip that explanation for now and make an assumption that you already have the code ready. If you don't, then please read the previous few sections of this article and you will find out how to get your code.

First thing you want to do is to open up the page you want to add structured markup to. Then at the top right corner of your content select a "Text" tab instead of default "Visual" tab.

Adding Custom Structured Data Markup #1

This will open up a window where content of your page is turned into HTML format that is used. Since structured data markup we've analyzed (specifically JSON-LD type of markup we've looked at) is also an HTML code - you're able to add this code to the page without any issues.

Now scroll down to the very bottom of your content, leave a few empty rows and paste the code you want to add. It should fit in really well. Then all you have to do is save the page by pressing a bright blue "Update" button on right side of your dashboard and structured data will be added to your website.

Adding Custom Structured Data Markup #2

Instead of an update button you will have "Publish" button in the same place if you're just releasing you content on that page for the first time.

That's all you need to do in order to add custom code to your website. At this point you can test it out by using Structured Data Testing Tool we've discussed earlier to make sure the content was added without any issues.

If you don't use WordPress, then adding custom structured data markup is a little more difficult and I will introduce you to the only way I know how to do it as well as talk about Google data highlighter, which lets you add some types of structured data very easily.

Adding structured data markup to any website

The easiest way to add structured data markup to any website is by using Google Data Highlighter tool. You need to open up this tool by pressing a link above and selecting a property you want to use it on by using drop-down menu it gives you.

If you don't see your website there - it means you don't have your website registered on Google Webmaster Tools, which I recommend you do as soon as the website is created.

There's a Google's Guide introducing you to new property submissions to Google Webmaster Tools on their developer website. By following this guide, you will learn how to add new property and when you refresh the highlighter page I've provided - it will suggest you the website.

What you need to do after selecing the website is to press the bright blue "Start Highlighting" button on the right side of their introduction video.

Using Google Data Highlighter Tool #1

It will open up a new small window, where you're able to do some selections for which page you want to add structured data markup to, types of structured data markup and so on. With this highlighter tool, you're only able to do "Article", "Book Review", "Event", "Local Business", "Product", "Restaurant", "Software Application" and "TV Episode" types of markup.

Using Google Data Highlighter Tool #2

You have to enter your URL for the page you're adding markup to at the very top, then select type of markup below, select "Tag just this page" and press "OK" at the bottom. With this example we're going to highlight Article data for one of my latest articles (at the time of writing this guide) - Best Tools to Use for SEO Analysis and SEO Audits.

Once the URL is entered, a new screen opens up with the last indexation of that page. At that point, highlighting data is really easy. Hold left mouse button and select the content you want to highlight and then select which structured data element it represents.

Using Google Data Highlighter Tool #3

As soon as data is selected, it will open a drop-down menu where you're able to choose the element. In this case we highlighted the title of my article, so "Title" should be selected.

All highlighted data will also be shown on the right sidebar.

Using Google Data Highlighter Tool #4

Once all data you wanted to highlight has been added, you have to press the bright red "Publish" button on top right side of your screen.

Using Google Data Highlighter Tool #5

If you're not happy with the results or just tested out the markup, then you can either edit it by pressing on small pencil icon (highlighted with red) or select it and press "Delete" just above list (highlighted with purple).

Using Google Data Highlighter Tool #6

The only downside to this - it has highly limited options, essentially ones you would have with "WP SEO Structured Data Markup" WordPress tool for each type of markup that is available, except here you don't have as many types either, which makes it even worse.

In order to add more data or other types of structured data markup that isn't available here - you will either need to edit whole website structure and include custom code on each page or use something like a Google Tag Manager to add structured data markup.

We will now discuss how to add structured data markup to your website using Google Tag Manager. Any type of markup or data could be added there as we will be using pure code for this.

If you haven't yet read about generating this code, then please go back and read previous sections of this guide to get a better understanding.

The method I use to add structured data markup is with Google’s own tool – Google Tag Manager. Here’s a step-by-step rundown on how to add structured data markup using their tag manager tool:

First you need to register your company and set up your website on their Tag Manager tool if you don’t have it set up already. To do that, just head to the link provided few lines above this step and follow their steps.

On the left side of your dashboard press on “Tags” section, then push bright red “New” button a little further to the right from your primary sections.

Adding Structured Data Markup Using Google Tag Manager #1

At this point what you want to do is press on "Untitiled Tag" option at the top and then name the tag. My recommendation would be to name it something descriptive, where you would be able to tell what the tag represents. For example it could be “SEO Analysis Tool Article Schema Markup” for my article markup used on previously named post I created.

Adding Structured Data Markup Using Google Tag Manager #2

For the next step you want to press the huge "Tag Configuration" button.

Adding Structured Data Markup Using Google Tag Manager #3

Once the "Tag Configuration" is selected, a new sidabar will open up and it will let you select the type of tag you want to create. Here select "Custom HTML" option in "Custom" category.

Adding Structured Data Markup Using Google Tag Manager #4

Now in the primary "HTML" section add the structured data code that you had created and press the "Trigger" button at the bottom of your screen.

Adding Structured Data Markup Using Google Tag Manager #5

This is where you will get to create a trigger that activates and starts showing your HTML code.

On a new screen that opens up you need to press a blue "+" sign that is on the top right corner.

Adding Structured Data Markup Using Google Tag Manager #6

Just like with tags, you will need to rename this trigger into something you will be able to recognize (for example "SEO Analysis Article Trigger"). Then continue by selecting the huge "Trigger Configuration" option.

Adding Structured Data Markup Using Google Tag Manager #7

A new window on your right side will open up with many different triggers you're able to select. Here you need to be selecting "Page View" option.

Adding Structured Data Markup Using Google Tag Manager #8

A screen will open up where you're able to select which pages trigger the markup to be shown. Since we're doing markup that should be shown only on individual article page, the selection we should make here is "Some Page Views".

Adding Structured Data Markup Using Google Tag Manager #9

Right below "Some Page Views" selection it lets you choose under which circumstances the markup will show up.

In the first drop-down menu, you should select "Page URL", in the second one select "equals" and in 3rd one enter a full URL of the page you're adding markup to.

Then press the bright blue "Save" button at the top of your page. It will close down the previous screen and you will need to press "Save" again on the next one.

This will create structured data markup on your page. Now the only thing left for you to do is check the markup using Structured Data Testing Tool.

Conclusions

At this point you should understand that Structured Data Markup is one of the ranking factors in Google's algorithm and it also helps you get Rich Cards for search results, which tend to be ranking higher than normal results under same circumstances.

Without the direct benefits, structured data markup also helps you increase clickthrough rates, which essentially help you increase rankings as well, because Google thinks of your results as being more relevant.

Unfortunately adding structured data markup will be one of the most difficult tasks for on-site optimization of your website and will require some knowledge about code that needs to be added to your website and how to do that, which you will find by reading my full guide.

Hopefully this guide will help you create some great structured data markup on the website, test it out and therefore increase your search results.

If you have any questions about anything related to structured data markup or SEO in general - feel free to leave a comment below this article.

Subscribe to our Newsletter!

Get all the latest news from Start-Cap.com right into your mailbox. We guarantee no spam and no unsolicited emails.

Social Shares