Structured Data is extra information you add to your page so that search engines can understand the meaning of the content - not just the words on the page. With structured data, a search engine can index your page more accurately and can show it as an enriched search result (also called a rich snippet) - a result that contains more than a plain link and description.
The most popular modern search engines - Google, Bing and Yandex - all need structured data in order to build enriched search results. For the website owner, that is great news: enriched results are much more visible in the search results page, and far more likely to catch the eye of a potential customer.
15 Minutes to read
All Chapters
Find here an overview on all chapters this tutorial:
What SEO Is
Factors of Success
You are here · Structured Data
Content Optimizations
Vocabulary for Structured Data
A vocabulary is just a fixed list of names and what they mean - like a dictionary that programs agree to use. The vocabulary for structured data is defined by the organisation Schema.org, which was founded by Google, Microsoft, Yahoo and Yandex. The vocabulary is developed in the open: by an active community on the mailing list public-schemaorg@w3.org and through the project repository on GitHub.
The same vocabulary is reused by several data formats - RDFa, Microdata and JSON-LD - so the same words mean the same thing, no matter which format you choose. The vocabulary covers many things: entities (such as a Person or a Book), actions (such as "buy" or "watch"), and the relationships between them.
Over 10 million sites use Schema.org to markup their web pages and email messages. Many applications from Google, Microsoft, Pinterest, Yandex, and others already use these vocabularies to power rich, extensible experiences.
Find the full list of properties available in the vocabulary on the Full Hierarchy page at Schema.org.
Data encodings
Structured data uses standardised formats to describe what is on a page and what kind of content it is. Two general approaches exist: either you put the data inside the HTML tags themselves, or you put it in a separate block of JSON code in the page.
Linked Data in HTML
This approach puts the extra data straight into your existing HTML. It uses HTML attributes - small pieces of information added inside an HTML tag, like id="…"" or class="…". The attributes name the properties (such as the name or the price) that you want to share with search engines. They are usually placed inside the <body> of the page.
Microdata
Microdata is an open HTML specification for adding structured data directly inside your HTML. It does this through extra HTML attributes on the tags you already have. Microdata is most often used inside the <body> of a page, but it also works in the <head>.
At a high level, Microdata is a collection of name-value pairs - pairs of "what is it called?" and "what is its value?", such as name = "Elizabeth". A group of such pairs is called an item, and each pair is a property. To start a new item, you add the attribute itemscope to an HTML tag. To add a property to that item, you put the attribute itemprop on one of the tags inside it.
| The value of a property is usually a piece of text (a "string"). |
The next two examples produce exactly the same structured data at the Microdata level, even though the HTML wrapping is different:
<div itemscope> (1)
<p>My <em>name</em> is
<span itemprop="name">E<strong>liz</strong>abeth</span>. (2)
</p>
</div><section>
<div itemscope> (1)
<aside>
<p>My name is
<span itemprop="name"><a href="/?user=daniel">Daniel</a></span>. (2)
</p>
</aside>
</div>
</section>| 1 | the attribute itemscope creates a Microdata item |
| 2 | the attribute itemprop marks an HTML tag as a Microdata property |
| HTML that does not contain the Microdata attributes ( |
RDFa
RDFa is an HTML5 extension that does the same job as Microdata: it adds structured data by putting extra HTML attributes on your existing tags. RDFa is commonly used in both the <head> and the <body> of a page.
The next example describes a person for a search engine. It marks up the person’s name, phone number and home page. With RDFa Lite you can mark up both text and URLs.
<p vocab="https://schema.org/" typeof="Person"> (1)
My name is
<span property="name">Manu Sporny</span> (2)
and you can give me a ring via
<span property="telephone">1-800-555-0199</span>
or visit
<a property="url" href="https://manu.sporny.org/">my homepage</a>.
</p>| 1 | turns on RDFa using the vocabulary from Schema.org |
| 2 | the attribute property marks an HTML tag as an RDFa property |
JSON for Linking Data
JSON for Linking Data (JSON-LD) is the preferred format for most modern search engines like Google, Bing and Yandex. JSON-LD stands for JavaScript Object Notation for Linked Data.
JSON (JavaScript Object Notation) is a simple, human-readable text format used to exchange data between programs. JSON-LD takes the standard JSON format and adds a vocabulary - the one from Schema.org — so that all search engines understand the data in the same way.
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"BlogPosting", (1)
"...",
"url":"/pages/public/panels/intro_panel/"
}
</script>| 1 | tells the search engine that this page is a blog post |
JSON-LD is much easier to write than HTML-based formats like Microdata or RDFa, because the data is in a separate block and you do not have to weave attributes into your existing HTML. JSON-LD data uses the vocabulary from Schema.org directly, with a set of predefined document types like:
-
WebSite
-
Article (specific types: BlogPosting, NewsArticle)
-
Recipe (specific types: HowTo, ItemList)
-
FAQ (specific types: FAQPage, Question, Answer)
and many others. The full list of supported document types is available in the Structured Data Gallery at Google.
| The template system J1 Theme for Jekyll uses JSON-LD to add structured data to all supported document types automatically. A plugin (a small piece of software that adds features) handles the process for you, and you can change its behaviour through a simple configuration file. |
Enriched Search Results
A rich result is a search result that shows more than just a link and a short description - for example, a recipe with a photo and a star rating, or a job posting with the salary.
In addition to the basic rich results, Google Search also supports a more interactive group called enriched search results. These often appear as a pop-up on the results page and let the user explore the information further. For example, here is an enriched result for jobs that may appear when a user searches for "jobs in Mountain View":
With enriched search the user can filter the results by specific fields of the structured data. For example, a user can search for chicken soup recipes under 200 calories, or for recipes that take less than one hour to prepare.
Enriched search is a subset of rich results and is also built on structured data. Some content types - such as recipes, jobs, and events - are only available as enriched search results. Other content types can be upgraded from a basic rich result to an enriched result by adding a few extra properties. The documentation for each content type tells you whether and how it can be upgraded.
Types of Rich results for multipurpose websites
For multipurpose websites that combine different types of content such as blogs, e-commerce, services, and company profiles, there are a number of universal and specific rich results (enriched search results). These are activated through structured data (schema markup) in the website’s HTML code.
Generating JSON-LD data
Rich snippets in the search results are a big benefit for both visitors and website owners. If your site is published on the internet, generating JSON-LD data for every page is one of the most important SEO tasks you can do today.
There are several free online tools that build JSON-LD code for you. A few useful JSON-LD generators:
The downside of these online tools is that you have to enter all the data by hand. Once a JSON-LD block is generated, you also have to copy and paste the resulting <script> tag into your page on your own. This is fine for one or two pages, but quickly becomes painful for a real website.
Besides the free tools, there are also commercial SEO suites and stand-alone JSON-LD generators:
The commercial tools can read your existing page and build the JSON-LD data from it - so you do not have to type it all yourself. But you still have to copy the result into your website by hand.
| If your website is built with the Jekyll engine, the whole generate-and-inject process can run automatically. See the section SEO plugin for J1 Theme below. |
A half-automatic alternative is the Markup Helper from Google. A few practical tips for using this Google tool follow.
Interactive Markup-Helper from Google
Google strongly recommends adding structured data (also called schema) to your pages, and provides a tool to help: the Markup Helper. It supports website owners and developers who want to add JSON-LD to their pages without a plugin. The tool lets you pick a document type, select parts of a real page, and tag each part with the right schema field.
Start the Google Markup-Helper from here:
SEO Plugins for Jekyll
If you use the Jekyll website engine and the J1 template, adding JSON-LD data is easy because suitable plugins are already available. A plugin is just an add-on that gives the engine more features. For Jekyll there is the official Jekyll SEO Tag plugin, and the J1 Theme ships with its own plugin called J1 SEO Tags.
As mentioned earlier, JSON-LD data uses the Schema.org vocabulary for a set of predefined document types. The J1 SEO Tags plugin supports the following types out of the box:
-
Website
-
WebPage (not supported by Google)
-
Article
-
BlogPosting
The page you are reading now is Learning SEO | Structured Data. Press Ctrl+U (or Cmd+Option+U on a Mac) to open the page source code in a new browser window. Use your browser’s "Find on page" feature (Ctrl+F) and search for @context - this jumps straight to the JSON-LD data that the J1 SEO Tags plugin generated for this page.
The JSON code in the page source is not very pleasant to read because it is packed into a single line. To see it in a nice formatted layout, paste it into the free online tool JSON Editor Online. The formatted result should look like this:
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"author": {
"@type": "Person",
"name": "Juergen Adams",
"url": "https://jekyll.one/"
},
"dateModified": "2022-12-12T01:00:00+01:00",
"datePublished": "2022-12-12T01:00:00+01:00",
"description": "Structured data enables search engines to understand ...",
"headline": "Learning SEO",
"image": {
"width": 1920,
"height": 1280,
"alt": "J1 Theme",
"url": "https://jekyll.one/assets/image/module/attic/1920x1280/melanie-deziel.jpg",
"@type": "imageObject"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://jekyll.one/pages/public/learn/kickstart/learning_seo/structured_data/"
},
"publisher": {
"@type": "Organization",
"logo": {
"@type": "ImageObject",
"url": "https://jekyll.one/assets/image/icon/j1/j1-512x512.jpg"
},
"name": "Juergen Adams"
},
"url": "https://jekyll.one/pages/public/learn/kickstart/learning_seo/structured_data/"
}This data was generated automatically by the Jekyll engine using an SEO plugin - in this case the J1 SEO Tags plugin shipped with J1 Theme.
SEO plugin for J1 Theme
With the plugins shipped for Jekyll, you no longer have to add SEO data or code by hand. The plugin makes sure that for every page of your site the correct JSON-LD data is generated and put into the HTML output automatically.
For J1 Theme, the plugin J1 SEO Tags generates and injects the JSON-LD data. Despite its name, the plugin does much more than only SEO tags: it generates and injects a full set of HTML tags for:
-
SEO - the recommended HTML tags and JSON-LD data
-
Social media integration (Facebook, Twitter) - so-called Open Graph tags. Open Graph tags tell social media platforms how your page should look when it is shared (which title, which image, which description, …). The plugin generates them for Facebook and the matching tags for Twitter cards as well.
Configuration
The J1 SEO Tags plugin is enabled by default in the J1 Theme. Its configuration file is called seo-tags.yml and lives in your project under ~/_data/plugins. The default settings, stored in ~/_data/plugins/defaults/seo-tags.yml, point to the template that the plugin uses to build all SEO tags (including the JSON-LD block):
template_source_folder: _data/templates
template_name: seo-tags.html| The tutorial J1 in a Day explains how to set up and manage Jekyll/J1 projects. |
The Plugin template
The Jekyll engine builds web pages using a template language called Liquid. A template language is just a normal text file with small placeholders (such as {{ page.title }}) that get replaced with real values when the page is built. Liquid is used in two ways inside Jekyll:
-
for page layouts - the overall shape of the page
-
for partial templates - small reusable pieces of HTML, included by the page layouts
The J1 SEO plugin template is used internally to build the HTML head section of every page. If you want to add more SEO or social media tags, you can extend this template yourself.
{% comment %}
# -----------------------------------------------------------------------------
# ~/_data/templates/seo-tags.html
# Liquid template to create the HTML portion for the seo-tags plugin
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
# -----------------------------------------------------------------------------
# Test data:
# liquid_var: {{ liquid_var | debug }}
# -----------------------------------------------------------------------------
{% endcomment %}
<!-- Begin J1 SEO tags -->
{% if seo_tag.title? %}
<title>{{ seo_tag.title }}</title>
{% endif %}
<meta name="generator" content="Jekyll v{{ jekyll.version }}" /> (1)
{% if seo_tag.page_title %}
<meta property="og:title" content="{{ seo_tag.page_title }}" /> (2)
{% endif %}
{% if seo_tag.author.name %}
<meta name="author" content="{{ seo_tag.author.name }}" /> (3)
{% endif %}
<meta property="og:locale" content="{{ seo_tag.page_locale }}" />
...
{% if seo_tag.image %}
<meta name="twitter:card" content="{{ page.twitter.card | default: site.twitter.card | default: "summary_large_image" }}" />
<meta property="twitter:image" content="{{ seo_tag.image.path }}" /> (4)
{% else %}
<meta name="twitter:card" content="summary" />
{% endif %}
...| 1 | Standard variable set by the Jekyll generator engine |
| 2 | Variable set by the J1 SEO plugin used for the Facebook integration |
| 3 | Variable set by the J1 SEO plugin used for SEO |
| 4 | Variable set by a page front matter used for the Twitter integration |
The Jekyll engine offers many standard variables that can be useful for SEO. Individual variables are filled in either by the page layout templates or by the front matter at the top of each page. (The front matter is the small block of settings between two --- lines at the very top of a page file.) Feel free to extend the plugin template with your own additions and try them out.
Structured Data for Social Media Providers
Open Graph is a small protocol (a set of rules) that turns any web page into a "rich" object on a social network. For example, Facebook uses Open Graph data to show a shared link as a small card with an image, a title and a description, instead of a bare URL. Many other social media tools use the same data.
Open Graph builds on top of existing web technology (RDFa, in particular) and gives developers one simple thing to implement.
Open Graph meta tags are small pieces of HTML that control how a link to your page looks when it is shared on social media. They are part of Facebook’s Open Graph protocol, but they are also used by other platforms - including LinkedIn and Twitter (when Twitter Cards are not set).
You will find Open Graph meta tags in the <head> section of a web page. To turn a page into an Open Graph object, you add a few <meta> tags to the <head>. The four required properties for every page are:
-
og:title- the title of your page as it should appear when shared. Example: "The Rock". -
og:type- the type of object the page is about. Example: "video.movie". Depending on the type, other properties may also be required. -
og:image- the URL of an image that represents the page. -
og:url- the canonical URL of the page. This is the permanent address used by the social network. Example: "https://www.imdb.com/title/tt0117500/".
As an example, here is the Open Graph markup for the current page:
<meta property="og:title" content="Learning SEO">
<meta property="og:locale" content="en_US">
<meta property="og:description" content="Structured data enables search engines to understand how to interpret the content of a webpage. The additional data enables a search engine to have a more human understanding of the content to add extended information to the index and support the search engine for better-rendered result pages.">
<meta property="og:url" content="http://localhost:29000/pages/public/learn/kickstart/learning_seo/structured_data/">
<meta property="og:site_name" content="Jekyll One">
<meta property="og:image" content="http://localhost:29000/assets/image/module/attic/1920x1280/melanie-deziel.jpg">
<meta property="og:image:height" content="1280">
<meta property="og:image:width" content="1920">
<meta property="og:image:alt" content="J1 Theme">
<meta property="og:type" content="article">Twitter Cards
Twitter Card tags are the Twitter equivalent of Open Graph tags. They control how your link looks in the Twitter feed when someone shares it - usually as a small preview card with an image, a title and a short description. This way, you can tune the preview to fit your target audience.
If no Twitter Card tags are set, Twitter only shows the plain link - no image, no description. A good preview image makes your post much more visible in the feed, so the post will usually get more clicks and more reach.
<meta property="twitter:description" content="Structured data enables search engines to understand how to interpret the content of a webpage. The additional data enables a search engine to have a more human understanding of the content to add extended information to the index and support the search engine for better-rendered result pages.">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:image" content="http://localhost:29000/assets/image/module/attic/1920x1280/melanie-deziel.jpg">
<meta name="twitter:image:alt" content="J1 Theme">Summarized
A lot you’ve learned. Time to summarize what is behind you has worked on. The last chapter should help with that. Summarize section offers some handy sections to remember what has been presented in this chapter. And gives an outlook of what could be done next, an overview of all chapters of this tutorial, and useful links to learn more.
See all sections below:
Recap · What has been done, what’s explored in current section
What Next · Find to go further, what’s planned next
All Chapters · The full chain, all chapters
Further Reading · List of helpful links to get more
Recap
Understanding the backgrounds of structured data took a lot of work; unfortunately inevitable. Important for all data encodings of structured data is that the vocabulary used is based on the specification provided by Schema.org.
The most important encoding scheme for structured data is JSON-LD. All relevant search engine providers support JSON-LD as a base to generate enriched search results for the SERPs provided on searches.
Many tools are available to generate JSON-LD data for the supported document types. Free web-based tools are available but require much manual work to generate and inject for web pages. The better solution is a plugin that integrates into the generation pipeline of the website generator you’re using.
For Jekyll-based websites, eligible plugins are available for the Template System J1, which is built-in and enabled by default. All sites generated by J1 are already ready for SEO. If required, the shipped plugin for J1 can be extended by configuration to add additional SEO-specific data.
Using suitable software tools for site generation, no programming, and no additional manual work is required to generate and inject SEO-specific data into a website. Proven tools prevent incorrect data from being injected or getting missed to be processed.
What Next
Hard work is done: the structured data for SEO is generated and in place. For the website’s content, it is recommended to review for potential optimizations in terms of the HTML code and the quality of the content. If a higher percentage of plagiarism is detected for the content, you’ll run into severe trouble. Your content should be at least 90% original to avoid getting penalized by a bad ranking of the search engines.
The following section will discuss some interesting backgrounds of what HTML code for tags and meta tags are recommended. It makes great sense to review the pages of a website for content optimization!
Continue on the final chapter to run Content Optimizations
All Chapters
Find here an overview on all chapters this tutorial:
What SEO Is
Factors of Success
You are here · Structured Data
Content Optimizations
Further Reading
Reading this chapter is not essential for working on the project first time. Additional links will be helpful to learn more. The references point to important sources of manufacturer documentation. Here you can find out all the possibilities what the products can offer. Experiences from others are extremely important when dealing with software and more complex projects. Links to other sites may answer common questions from the experience of professionals. Here you can think far outside the box of a project currently worked on.
Further links in the current section.