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, known as enriched search results.
The most used modern search engines like Google, Bing, or Yandex require structured data to provide users with enriched search results and other SERP elements. The advantage to the website operator is these sorts of search results greatly increase visibility and are much more likely to get the attention of potential customers.
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
Structured data is based on a vocabulary defined by the organization Schema.org. Google, Microsoft, Yahoo, and Yandex founded the organization. The properties of the vocabulary are developed by an open community process, using the mailing list public-schemaorg@w3.org and through Web-based processes at GitHub.
The vocabulary is used for many different encodings, including RDFa, Microdata, and JSON-LD. These vocabularies cover many entities, actions, and relationships between entities and actions and help to describe a document for its specific characteristics.
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 a full list of all properties of the vocabulary available from the Full Hierarchy at Schema.org.
Data encodings
Structured data uses standardized formats to provide information about a page and classify the page content. Two general types exist for linking data in HTML documents for this additional data.
Linked Data in HTML
Linked Data in HTML uses attributes on HTML tags to name the properties you want to expose as structured data. The HTML tag attributes are typically used on elements in the <body> element section.
Microdata
Microdata is an open-community HTML specification used to nest structured data within HTML content. Like RDFa, it uses HTML tag attributes to name the properties you want to expose as structured data. It is typically used in the <body> element but can also be placed in the <head> element.
At a high level, Microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Common elements represent items and properties. To create a microdata element, the attribute itemscope is used. To add a property to an item, the itemprop attribute is used on one of the item’s descendants.
| Properties generally have values that are strings. |
The following two examples are exactly equivalent at a microdata level.
<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 an Microdata item |
| 2 | the attribute itemprop marks an HTML tag as an Microdata property |
| Markup without the microdata-related attributes does not have any effect on the microdata model. |
RDFa
RDFa is an HTML5 extension that supports linked data by introducing HTML tag attributes (like the encoding by Microdata) that correspond to the user-visible content you want to describe for search engines. RDFa is commonly used in both the <head> and <body> sections of HTML pages.
The following example specifies the properties of a person to point out to a search engine. The person’s name, phone number, and web page are marked-up in the example. Both text and URLs can be marked up with RDFa Lite.
<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 | enables 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 of structured data for most of the modern search engines like Google, Bing or Yandex. JSON-LD stands for JavaScript Object Notation for Linked Data. JSON-LD is a JSON-based method of embedding structured data in webpages. JSON-LD uses the standard JSON notation and extends this with a syntax that allows data to be distinguished according to a universally valid, globally standardized schema.
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"BlogPosting", (1)
"...",
"url":"/pages/public/panels/intro_panel/"
}
</script>| 1 | specifies the type of the document as an blog post (article) |
Compared to HTML-linked data like Microdata or RDFa, linking data by JSON-LD is much easier to generate because no HTML data model is needed to interpret the HTML tags to be extended. JSON-LD data uses the vocabulary from Schema.org directly for a set of pre-defined document types like:
-
WebSite
-
Article (specific types: BlogPosting, NewsArticle)
-
Receipe (specific types: HowTo, ItemList)
-
FAQ (specific types: FAQPage, Question, Answer)
and many others. Find a list of available document types and their supported structured data markup at Google with the: Structured Data Gallery.
| The template system J1 Theme for Jekyll uses JSON-LD to enrich supported document types for structured data. A plugin for the generator engine manages the process automatically and can be controlled by a simple configuration. |
Enriched Search Results
In addition to standard rich results, Google Search supports a more interactive and enhanced class of rich result called enriched search results. Enriched search results often include an immersive popup experience or other advanced interaction feature. For example, here is a Jobs enriched result popup that might appear if a user searched for "jobs in Mountain View":
Enriched search enables the user to search across the various properties of a structured data item; for instance, a user might search for chicken soup recipes under 200 calories, or recipes that take less than 1 hour of preparation time.
Enriched search is a subset of rich results, and is implemented using structured data. Some types for rich results are only available as enriched search types, for example, recipes, jobs, and events. Other rich result types can be extended to be an enriched search type with the addition of a few properties. The documentation for a rich result type explains whether and how it can be extended from a basic rich result to an enriched result.
Type of Rich results for multipurpose websites
Porro labore maiores aut nulla. Minima eos omnis et numquam dolor sunt deleniti nihil labore tempora voluptates. Incidunt eum quod vel eius molestias occaecati a corporis voluptates et ducimus delectus autem. Nesciunt temporibus nesciunt et. Dolores praesentium fugiat quia quo perferendis repellat amet ab voluptate ea repellendus.
Generating JSON-LD data
It’s a great benefit to visitors and website owners to see rich snippets from your website in the SERPs generated by the search engine. If a website is searchable on the Internet, generating a schema of JSON-LD data for all site pages is one of the most important SEO tactics today.
Several free online web-based tools are available on the Internet. A selection of some handy JSON-LD Generators:
A disadvantage of these online tools is that all required (structured) data for a document must be entered manually to generate a JSON-LD data set. Once the data set is created, the generated HTML code (the script tag <script>) is manually entered into the respective website to take over.
Besite the free tools, commercial SEO suites or standalone JSON-LD Generators may an option:
The commercial tools can eliminate the need for manually adding data and support generating the required structured JSON-LD data from a source page. But in the end, the need to manually take over the code into the website remains.
| You can find an automatic procedure for generating and data transfer for websites that are generated with the generator engine Jekyll in section [J1 SEO Plugin]. |
A half-automated solution to generate JSON-LD data is the Markup-Helper from Google. Find some practical tips using this tool from Google below.
Interactive Markup-Helper from Google
Google recommends using structured data or schema and will only leave you with providing a tool to add structured data to web pages. Google delivers the Markup-Helper tool to support website owners and developers to generate and add JSON-LD schema data to their websites, whether in a more complex way than simply using a plugin. The tool allows you to add all kinds (aka document types) of structured data to your website and tag relevant parts of a selected page with the correct schema.
Start the Google Markup-Helper from here:
SEO Plugins for Jekyll
If the website generator Jekyll and the Template System J1 are used, it is quite easy to generate JSON-LD data, because a eligible plugins are available for SEO. For the generator Jekyll, the plugin Jekyll SEO Tag is available, for J1 Theme the plugin J1 SEO Tags is shipped.
As already discussed, JSON-LD data uses the vocabulary from Schema.org directly for a set of pre-defined document types. The plugin J1 SEO Tags support the document types:
-
Website
-
WebPage (not supported by Google)
-
Article
-
BlogPosting
out of the box.
Currently, the page you’re viewing is Learning SEO|Structured Data. If you hit the keys Ctrl+U, the source code of the current page is displayed in a second window of the browser. If you do a seach for @context in the source, you’ll find the JSON-LD data generated by the plugin J1 SEO Tags for the current page.
For easier reading of the JSON code placed in the source, you can run the online tool JSON Editor Online. Copy and paste the JSON-string and format the data for better homan reading. The results should look like the data from below:
{
"@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/modules/attics/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/icons/j1/j1-512x512.jpg"
},
"name": "Juergen Adams"
},
"url": "https://jekyll.one/pages/public/learn/kickstart/learning_seo/structured_data/"
}This data has been automatically generated by the HTML generator engine of Jekyll using the SEO plugin. In this case the plugin J1 SEO Tags was used for J1 Theme.
SEO plugin for J1 Theme
Using the plugins available for Jekyll, no need anymore to manually add data or code. The plugin ensures that for all available web pages of a site, the proper data for JSON-LD is generated and injected into the resulting HTML pages.
For the J1 Theme, the plugin J1 SEO Tags generates and injects JSON-LD data. The plugin does a lot more as the name J1 SEO Tags implies: a full set of HTML tags generated and injected for:
-
SEO, the recommended HTML tags and JSON-LD data
-
Social Media integration (Facebook, Twitter) to inject related Open Graph tags to publish pages and articles on Facebook respective suitable HTML tags required for Twitter
Configuration
The plugin J1 SEO Tags is default enabled for the J1 Theme. The configuration settings seo-tags.yml of the plugin is stored in the project folder of a website under ~/_data/plugins. In the configuration file ~/_data\plugins\defaults\seo-tags.yml, the following default settings are pointing to the Template used to generate all SEO tags for a webpage, including the JSON-LD data:
template_source_folder: _data/templates
template_name: seo-tags.html| How to manage and create projects for Jekyll and J1 Theme describes the tutorial J1 in a Day. |
The Plugin template
The website generator engine Jekyll uses a template system based on the template language Liquid. The template language is used in different ways: on the one hand, for so-called page layouts, but for content, partials as well used by the page layout templates under specific conditions.
The J1 SEO plugin template is used under the hood to generate the HTML data of the web pages of a site. Generally, this Template could be extended for additional HTML tags to be generated for SEO or Social Media integration.
{% 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 supports a lot of standard variables that might be helpful in an SEO context. Individual variables are generated by one of the (customized) layout templates or taken from the front matter of individual pages. Feel free to extend the existing plugin template with additional entries and test how it works.
Structured Data for Social Media Providers
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement.
Open Graph meta tags are snippets of code that control how URLs are displayed when shared on Social Media. They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent).
You can find Open Graph meta tags in the <head> section of a webpage. To turn a web page into graph objects, you need to add basic metadata to a page. We’ve based the initial version of the protocol on RDFa which means that you’ll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:
-
og:title, the title of your object as it should appear within the graph, e.g., "The Rock".
-
og:type, the type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
-
og:image, an image URL which should represent your object within the graph.
-
og:url, the canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".
As an example, the following is the Open Graph protocol markup for 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/modules/attics/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 especially useful for users and sites often shared on Twitter. These meta tags change the appearance of a shared page in the Twitter feed. Thereby you can adjust the data exactly to the target group.
If the Twitter Card Tags are not set, the link will be displayed completely without further information. By, e.g., a meaningful picture, the user is, of course, made aware of the post, and the post gets (possibly) more coverage.
<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/modules/attics/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.