When we go through some web pages, we can visually infer what the page is about, what is being discussed in the page, and all the other information.
For example, if we are reading a Wikipedia article about a person then we can tell that this page is about a person, this is his birthdate, place of birth and all the other information associated with the person being discussed.
But when search crawlers crawl and read the page, they cannot make sense of what is in the page since search crawlers are just pieces of code.
So, how do we help them understand the information present on the page and classify various elements on it into various categories? For this, we use something we call structured data.
What Is Structured Data?
Structured Data is a standardized format for helping search engines understand the information on the page and classify the page content. For example, if the page is about a person, Structured Data can help search engines understand what is the name of the person, what is the birthdate of the person, where does the person live, etc.
With Structured Data, we explicitly label each piece of content on the webpage for search engines to understand. At the end, Structured Data is just the metadata about the page.
We have various formats to use Structured Data on the webpage.
The most common ones are JSON-LD, RDFa, and Microdata.
Before we show you how you can use and implement Structured Data using these formats, let’s first talk about the benefits of having Structured Data on the page.
One of the most common benefits of Structured Data is that your web page becomes eligible for special rich results that appear at the top of the Google Search as shown below:
The reason why these results appear like that is that these pages have implemented Structured Data for recipes.
The other benefit of Structured Data is that it will help search engines understand your page.
Structured Data is implemented using schema vocabulary. Schema is a collection of vocabularies used for marking up the page with extra information so that the major search engines can understand it.
Some of the popular schemas are Local Business, movies, article, person, organisation, recipe and more.
Which schema you are going to use depends on what your web page is talking about. For example, if you have a web page describing how to make a Pizza, you should use the Recipe schema for your page.
Now, Let’s learn how to implement Structured Data. As said earlier, there are various formats you can use. Here we will use JavaScript Object Notation for Linked Data (JSON-LD) since this is easier, efficient and recommended by Google. For learning, we will assume we have a page about a Book whose HTML is given below:
<html>
<head>
<title>How To Do SEO</title>
</head>
<body>
<h1>Name of Book: Guide To SEO</h1>
<h1>Author: George Lewin</h1>
</body>
</html>
As you can say, we have a very basic page about a Book named Guide To SEO written by George Lewin. Now let’s implement Structured Data on it.
Getting Started With JSON-LD
JSON-LD is put inside JavaScript script tags. The empty JSON-LD looks like this:
<script type = “application/json+ld”>
{
}
</script>
First, we need to specify the context which is always https://schema.org/ and next, we need to specify what type of schema are we going to use. There are many schema types and for our page here, we need Book schema type. Here’s what our JSON-LD looks like:
<script type = “application/json+ld”>
{
“@context” : “https://schema.org/”,
“@type”: “Book”,
}
</script>
Context and type are reserved words and that is why we use @ sign with them. Now for the Book schema type, we can add various properties of the book depending on what information we have available. You can check all properties of Book schema type here https://schema.org/Book
Since our web page talks about the author and name only so we will add only those ones. Let’s add name and price. Our JSON-LD looks like this:
<script type = “application/json+ld”>
{
“@context” : “https://schema.org/”,
“@type”: “Book”,
“name” : “Guide To SEO”,
}
</script>
For adding author, as we are going through schema.org/Book documentation, we realise that author is itself another schema type, so we will have to create another hierarchy inside our code, so JSON-LD looks like this:
<script type = “application/json+ld”>
{
“@context” : “https://schema.org/”,
“@type”: “Book”,
“name” : “Guide To SEO”,
“author”:{
“@type”: “Person”,
“name”: “George Lewin”
}
}
</script>
Depending on what information we had available for the author, we can add more properties. All properties of the author that you add can be checked here https://schema.org/Person
Remember to add only that information that is visible on the web page to users. As our final schema is ready, we will implement it on our original HTML page. You can add it either in <head> or <body>. Here is our final HTML
<html>
<head>
<title>How To Do SEO</title>
<script type = “application/json+ld”>
{
“@context” : “https://schema.org/”,
“@type”: “Book”,
“name” : “Guide To SEO”,
“author”:{
“@type”: “Person”,
“name”: “George Lewin”
}
}
</script>
</head>
<body>
<h1>Name of Book: Guide To SEO</h1>
<h1>Author: George Lewin</h1>
</body>
</html>
Is There A Some Way To Generate Schema Faster For My Webpage?
Yes! There are various online tools to do that. They will generate schemas for you automatically. Try searching schema generator on Google.
Some Guidelines For Using Structured Data
- Specify only that information in Structured Data which is visible to user on the webpage. Don’t try to add hidden information in it.
- Google warns against using Structured Data for misleading content such as fake reviews
- The Strcutured Data should be true representation of the page’s content.
- For more Guidelines, visit this page.
Using MicroData For Structured Data
While JSON-LD is preferred and recommended by Google and should be your preferred method too. Here we will discuss how we can implement the same schema as above using Microdata format.
As you might be knowing HTML consists of tags to structure data. Some of the tags are <p>, <h1> , <title> , etc. Microdata is a set of extra tags that you can use to label information on a web page. Again,let us imagine we have a page about a book as:
<div>
<h1>Name of the book:</h1>
<span>Guide to SEO</span>
<span>Author: George Lewin</span>
</div>
Using the itemscope and itemtype, we specify what this section of content is about which in this case is a book.
<div itemscope itemtype= “https://schema.org/”>
<h1>Name of the book:</h1>
<span>Guide to SEO</span>
<span>Author: George Lewin</span>
</div>
Next, we label each part using itemprop as:
<div itemscope itemtype= “https://schema.org/Book”>
<h1>Name of the book:</h1>
<span itemprop= “name”>Guide to SEO</span>
<span>Author: George Lewin</span>
</div>
Since the author is a person who in itself is a separate schema property, we will create another itemscope and itemtype for it.
<div itemscope itemtype= “https://schema.org/Book”>
<h1>Name of the book:</h1>
<span itemprop= “name”>Guide to SEO</span>
<div itemprop = “author” itemtype = “https://schema.org/Person”>
<span itemprop = “name”>Author: George Lewin</span>
</div>
</div>
And that was it. We implemented the same schema using MicroData.
Using RDFa For Implementing Structured Data
RDFa is another format to label your web page but it is not commonly used. If you are still interested to learn it. You can learn about it here.
Conclusion & Resources:
Google supports all three formats for creating Structured Data but JSON-LD is recommended by Google and it is also efficient and easy to implement. It can also be implemented when you are dynamically injecting content on the page. After implementing Structured Data, you need to test your web page whether the schema is working as expected or not. You can use Google’s rich results test to do that.
Some Resources:
- Getting Started With Schema
- Understanding Structured Data
- Getting Started With Popular Schemas
- Schema Markup Generator
Search Engine Code Team is comprised of SEO experts and strategists having more than 20 years of combined experience. We keep testing and delivering knowledge of SEO for the community of SEO.
Leave a Reply