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