HTML microdata, or semantic markup, means marking a website up with special tags and attributes inside the HTML code in order to structure the information it contains.
Attributes are words that define the characteristics of an element and are placed inside that element’s opening tag.
You need it for two reasons:
First, to explain to the browser what the content on the site actually is: where the price sits, the contacts, the reviews, the company details and so on. You are using “words” the browser understands to describe what the page contains. A search robot can then read that information more easily and more quickly. Which means users get relevant information, and the site owner gets loyal, well-targeted visitors.
Second, structured data is convenient for the user. In the search results, next to the link, we see a fragment of the content — the snippet. It lets you convey the substance of a page briefly and clearly. And when the snippet appeals to the user, more people click the link.
And yes, structured data has no direct effect on how a site ranks. But search engines do react to behavioural factors, and click-through rate is a very important measure of how interested users are. So structured data on a web page is a good bonus for SEO.
Take a film site that uses schema markup: its snippet shows the rating, the number of votes, the cast, the director, the year and the genre. Users prefer that to plain text under a link, because it carries clear information they actually need. And you choose for yourself what goes into the snippet.
To fully understand what microdata is, you need to know what it consists of. Microdata is an addition to the HTML code. It is made up of specific tags and attributes that are written down in a vocabulary. How those elements go into the code is decided by the syntax. The same markup can be written in different syntaxes.
Structured data vocabularies
Many vocabularies have been created for “talking” to the browser, but two of them are the most popular. Here is how they differ.
1. Schema.org
This is the most popular and most widely used structured data vocabulary.
There are reasons for that:
- it is constantly extended, updated and improved
- every well-known search engine understands it: Google, Yahoo, Microsoft.
The vocabulary is continuously improved by a steering group of webmasters representing the most popular web browsers. Every change, extension and addition is put through public discussion.
The vocabulary consists of 823 types (also called entities) and 1529 properties of those types.
Here are a few examples (entity on the left, properties on the right):
- Product — product name, rating, price, description.
- Event — topic, location, duration, who is performing.
- Recipe — calories, ingredients, instructions, cooking time.
- Movie — cast, director, genre, country, rating.
- Organization — address, founder, phone, logo.
2. Open Graph
The vocabulary was originally invented for Facebook, but was later picked up by Twitter, LinkedIn and others. These are meta tags you need to embed in the website’s code so that, when a page is posted on social media, the preview of it looks polished and conveys the point of the content clearly. Open Graph markup makes links clear and rich. The preview will carry an image, a headline and a precise description.
The main tags:
og:url — the link to the source;
og:type — the type of content: a film is “movie”, an article is “article”…
og:title — the headline of the shared post;
og:description — the description;
og:image — the image;
Structured data syntaxes
A syntax is the way a vocabulary is used. It defines which tags declare the types and their properties, and how. Put simply, the syntax says how to combine tags and attributes so that the browser understands them. Within a single syntax you can combine different vocabularies.
There are three main syntaxes today:
1. Microdata
This syntax is often used together with the Schema.org vocabulary. Microdata works inside HTML code, into which you embed additional attributes.
The 3 core Microdata attributes:
1. itemscope — first you declare the object you are going to mark up. You place the word “itemscope” in the opening tag, and the search engine then understands that the element inside that tag carries additional information about its status;
2. itemtype — you specify the type of object (or entity) you are marking up. A product, for example.
3. itemprop — the properties of that object. The name, the description, the price and the currency, for example.
As it looks in the code:
<div itemscope itemtype="https://schema.org/Product"> — specify the type
<div itemprop="name">product name</div> — the “Name” property
<div itemprop="description">text description</div> — the “Description” property
<div itemprop="price">500</div> — the “Price” property
<div itemprop="priceCurrency" content="UAH">UAH</div> — the “Currency” property
</div>2. RDFa
The data is placed in the HTML code as well. This syntax is difficult to implement, so it is used very rarely. Most often with the Open Graph vocabulary.
3. JSON-LD
The youngest of the three, but a very relevant syntax, and the one Google recommends. It is simpler, clearer and more compact than the previous two.
2 ways to add structured data to a site
As we said above, you can mark a page up by hand, in the HTML code. That requires a clear understanding of how the different syntaxes behave — where, with what and when to apply them. The smallest error can damage a site’s entire markup. It is better to turn to a web studio for help, where experienced developers will do everything properly. Technically it is the same work as the rest of the page’s code, which is why the markup is usually built in from the start — it is part of website development, not a separate fix after launch.
There is an easier way, using online generators. All you do is paste the information you need into the relevant fields. Generators are very simple to work with; plenty of hints make it easy to find your way around the interface.
Online generators for the Microdata syntax:
- The Ultimate Microdata Generator,
- Schema Markup Generator,
- Local Business Schema Generator.
Generators for JSON-LD:
- JSON-LD Schema Generator For SEO – Joe Hall,
- Schema Markup Generator (JSON-LD).
How to check microdata markup on a site
Use the Google validator (the Rich Results Test). Paste the URL or the piece of code you want to check into the field provided. The report returns a list of the errors you need to fix. Google checks markup very thoroughly, so it spots even the smallest mistakes.
The Schema.org validator (validator.schema.org) works in a similar way and checks the markup more broadly — not only the types Google uses for rich results. After the test, errors are highlighted in red inside the code and additional text appears, pointing out the inaccuracies.
So, structured data is a good way to raise the click-through rate of your link and the revenue of your site. Thanks to schema markup your site looks good in the results and users pay attention to it, while search engines understand your content better. Which means semantic markup helps to promote a site, even though it is not on the list of ranking factors.