9
Understanding structured data – Lesson 3.1 3.1 Types of structured data markup Table of contents Learning objectives 1. Introduction 2. RDFa and Microdata markup 3. JSON-LD markup Key takeaways Learning objectives After this lesson, you’ll be able to: recognize different types of structured data markup; identify the differences between the different types of structured data markup; describe the JSON-LD syntax. 1. Introduction In the previous lessons, you’ve learned the difference between markup, metadata, and structured data. You also know that there’s a project called Schema.org and that their website contains a large collection of markup you can use to add structured data to your site. But did you know there are different types of markup you can use to add structured data to your pages? Here, we’ll discuss three of them. Then, we’ll explain which one we advise you to use. Yoast SEO academy 1 / 9

3 . 1 T y p e s o f s t r u c t u r e d d a t a m a r k u p

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

 

Understanding structured data – Lesson 3.1 

3.1 Types of structured data markup 

 Table of contents   

Learning objectives 

1. Introduction 

2. RDFa and Microdata markup 

3. JSON-LD markup  Key takeaways  

 

Learning objectives 

After this lesson, you’ll be able to:  

● recognize different types of structured data markup;  

● identify the differences between the different types of structured 

data markup;  

● describe the JSON-LD syntax.  

 

 

1. Introduction In the previous lessons, you’ve learned the difference between markup, 

metadata, and structured data. You also know that there’s a project called 

Schema.org and that their website contains a large collection of markup you 

can use to add structured data to your site. But did you know there are 

different types of markup you can use to add structured data to your pages? 

Here, we’ll discuss three of them. Then, we’ll explain which one we advise 

you to use.   

  Yoast SEO academy  1 / 9 

 

2. RDFa and Microdata markup  

The first type of structured data markup we’ll discuss is RDFa. RDFa stands 

for ‘Resource Description Framework in attributes.’ RDFa uses HTML tag 

attributes to add structured data to a site’s code (Image 1).  

 

 

Image 1: An example of RDFa markup 

 

RDFa uses an HTML tag to refer to the vocabulary, Schema.org (<div vocab

=”https://schema.org/” ), and to the type of structured data, Recipe 

(typeof = “Recipe”). The HTML code that follows has extra tag attributes, 

specifying various properties: the name of the recipe, the author, the date it 

was published, the image, the description, and so on. These attributes 

describe the content to search engines so they can understand it better. 

RDFa is commonly used in both the head and body sections of the HTML 

page. 

 

On Schema.org, you’ll also find Microdata. Like RDFa, the Microdata 

format uses HTML tag attributes to name the properties you want to 

expose as structured data (Image 2). 

 

 

  Yoast SEO academy  2 / 9 

 

 

Image 2: An example of Microdata markup 

 

As you can see, it looks similar to RDFa. The HTML code also refers to the 

Schema.org vocabulary, and it specifies the type (<div itemscope

itemtype=”https://schema.org/Recipe”>). It also has added attributes 

that specify the structured data properties, such as name, author, date, and 

image. Microdata is typically used in the page body but can also be used in 

the head section of the HTML page.  

  Yoast SEO academy  3 / 9 

 

3. JSON-LD markup 

The third format is called JSON-LD. JSON-LD stands for JavaScript Object 

Notation for Linked Data. Linked data is about using the internet to connect 

related data. And unlike RDFa and Microdata, JSON-LD is a JavaScript 

notation and not an HTML notation. This means JSON-LD markup is 

embedded in a <script> tag in the page head or body, so it’s not 

interleaved with the user-visible text (Image 3). 

 

 

Image 3: An example of JSON-LD markup 

 

So, basically, instead of adding tags to all individual elements on a page like 

you do with the HTML tags, you can use a block of JavaScript code that has 

all that info — including all the connections. This makes it easier to express 

connected data items, such as the nutritional information of the recipe.  

 

This way of embedding structured data also allows Google to read the 

markup when it’s dynamically injected into the page’s content – when you’re 

using the Yoast structured data blocks, for example! And because all of the 

JSON-LD code is collected into a separate piece of JavaScript code, it’s also 

less likely to break when you make changes to your site. So, JSON-LD is more 

efficient and less error-prone than RDFa and Microdata. Therefore, we – and 

Google! – recommend you to use JSON-LD as much as you can.  

  Yoast SEO academy  4 / 9 

 

The JSON-LD syntax 

Because JSON-LD is a JavaScript notation, it looks a bit different from RDFa 

and Microdata, but it has the same elements. When you see JSON-LD, the 

first thing you see is a <script> tag with a Type attribute (Image 3). That tag 

says: “Hey browser, I’m calling the JavaScript that contains JSON-LD.”  

The second element in JSON-LD markup is @context, referring to 

Schema.org (Image 3). This tag says: “Hey browser, I’m referring to the 

vocabulary you can find on Schema.org.” Then, it specifies the type that’s 

being marked up with @type. In this case, it’s a recipe. If we check out the 

type Recipe on Schema.org, we’ll find the type’s documentation and 

technical specifications, including the type properties we can use for this 

item. 

Then, the code mentions properties like the author, cooking time, date 

published, description, image, and ingredients. All of these properties make 

sure search engines understand the elements on your page, so they can 

display it in a better and richer way!  

 

 

Example: Local business listings with Schema.org and 

JSON-LD

There are many types of schemas out there. A very popular and useful one is 

the LocalBusiness schema, which can help your local business site 

become eligible for different rich results. A regular organic search result for 

a business can feature breadcrumbs, highlighted pages, or even a search 

box. In Google, there’s also the Knowledge Panel on the right-hand side. 

There, you’ll find lots of metadata about a business, from opening hours to 

photos and products (Image 4).  

 

 

  Yoast SEO academy  5 / 9 

 

 

Image 4: An example of a Knowledge Panel for a local business  

How to add Schema.org to your local business listing 

There’s one main type of schema you’ll need for a local business: 

Schema.org/LocalBusiness. In this type of schema, you’ll find everything you 

need to inform search engines about your local business. To get started, you 

need at least the following properties: 

● @id (globally unique id of the specific business in the form of a URL) 

● name of business 

● image (as of now, you have to supply a logo) 

● address 

○ address.streetAddress 

○ address.addressLocality 

  Yoast SEO academy  6 / 9 

 

○ address.addressRegion 

○ address.postalCode 

○ address.addressCountry 

 

The properties mentioned in the previous paragraph don’t get you very far, 

though. To make the most of structured data for your site, you need to go 

further. So check Schema.org/LocalBusiness and see what other properties 

that fit your business you can add. 

 

The most important thing to keep in mind when you are working on your 

local business listing is to pick the correct business type. Make sure to pick a 

specific one, not a broad one. So if you own a barbershop, you can use the 

local business type HairSalon. There are over 400 types of businesses, so 

you’ll probably find one that matches closely. 

 

Secondly, while it’s possible to write Schema.org JSON-LD code by hand, it’s 

not recommended. Use a generator like the JSON-LD Schema Generator or 

Google’s Structured Data Helper. Always validate your Schema.org data in 

the Rich Results Test. Using Synup’s Schema Scanner, you can check your 

site to see if the Schema.org data is implemented correctly. Don’t forget to 

add your site to Search Console, so you can check how Google presents your 

site. If you want to learn more about Google Search Console, read the 

beginners guide to Google Search Console. 

So, what can your code end up looking like? In Image 5 you can see an 

example of an implemented LocalBussines schema.  

 

  Yoast SEO academy  7 / 9 

 

Image 5: An example of LocalBussines JSON-LD code  

In this piece of code, you can clearly see the specific type of business 

(ClothingStore). Moreover, we see information such as the name, URL, 

logo, etc. You can see that some properties are listed by adding simple text 

to them. However, for the address, another type – PostalAddress – is 

added. That is because, and we’ve talked about this in the previous lesson, 

this is a specific type of thing with its own properties and rules.  

 

If all of this is overwhelming to you, there is some good news. Yoast SEO 

adds JSON-LD structured data automatically, so you won’t even have to 

look at the code if you don’t want to. We also have add-ons like the Local 

SEO plugin, which adds local business schema to your pages.  

 

  Yoast SEO academy  8 / 9 

 

That was a lot of information, so it’s time for a recap. In this lesson, you saw 

several types of structured data markup, but we advise you to use 

JSON-LD to add structured data to your site. When you implement 

structured data, search engines may give you rich results for your content. 

They are great for making your site stand out on the search results pages 

and attract visitors to your website!  

 

Key takeaways 

● On schema.org, you’ll find three types of structured data markup: 

○ RDFa 

○ Microdata 

○ JSON-LD 

● Microdata and RDFa use HTML tag attributes to add tags to all 

individual elements on a page.  

● JSON-LD is a JavaScript notation and not an HTML notation. and it 

is embedded in a <script> tag in the page head or body. So, instead 

of adding tags to all individual elements on a page, you can use a 

block of JavaScript code with all the necessary information and 

connections.  

● Since all of the JSON-LD code is collected into a separate piece of 

JavaScript code, it’s also less likely to break when you make 

changes to your site. So, JSON-LD is more efficient and less 

error-prone than RDFa and Microdata. Therefore, we – and Google! – 

recommend you to use JSON-LD as much as you can.  

 

 

 

 

  Yoast SEO academy  9 / 9