The Ultimate Guide to Work with Structured Data Markup

• What is structured data?
• Why do you need structured data on your website?
• What do you need to mark up?
• What types of markup vocabularies are there?
• Schema.org
• Open Graph
• JSON-LD
• What are other ways to mark up a webpage?
• Conclusion

All website owners and SEO experts want one thing–to make their website stand out from competitors in the search results, luring more visitors. The most effective way to achieve this goal is to work with structured data. In this article, we will try to find out what structured data is and how you can implement it on your website.

What is structured data?

Structured data is information that is represented in the unified and accurate form in compliance with a certain set of rules.

Today, there are two common types of structured data in SEO:

• Properties that are specified directly in HTML or using Google tools; they describe information such as price, address, phone, email, etc.
• Data that describes the type of content on the page. For example, page layout in forms like articles, product cards, events, videos, etc.

The structured data markup is performed directly in HTML-code of the page according to the rules described in schema.org. The markup also can be worked out indirectly using Google Marker, a Google structured data markup tool in the Search Console.

Why do you need structured data on your website?

Whether you have an E-commerce or a corporate website, you need to implement structured data markup as soon as possible if you have not done it yet.

First, it is necessary for making search robots index your website faster and more accurately, forming a unique snippet with detailed information in the search results.

An extended description makes your website stand out from the rest of the search results, improving your CTR. That is the second reason for implementing the structured data markup.

Rich snippets in Google mobile search

Usually, pages with structured data have a 30% better CTR that pages without it. However, keep in mind that it depends on the industry. If all of your competitors use the markup and you do not, it will be an obvious disadvantage. If most competitors in your niche do not use this tool, implementing the markup will be of great help for you.

The SERP in Google search for the keyword «buy iphone xr»

What do you need to mark up?

The most common page elements for schema markup are:

• Article – schema.org/Article
• Event – schema.org/Event
• Famous people or fictional characters – schema.org/Person or People
• Movie – schema.org/Movie
• Music – schema.org/MusicAlbum
• Organizations – schema.org/Organization
• Product – schema.org/Product
• Ratings and reviews – schema.org/Review or Google support
• Recipe – schema.org/Recipe
• Video – schema.org/VideoObject

The truth is, there are many markup options in the schema.org vocabulary, and we are going to look into some of them below.

Depending on the page type, you should mark up the following information:

• Price;
• Manufacturer;
• Author;
• Description;
• Publication date;
• Address;
• Phone number;
• List;
• Movie genre;
• Music album;
• Rating.

What types of markup vocabularies are there?

At the moment, schema.org is the most popular vocabulary of structured data, but it is not the only one. Some other markup methods are:

• JSON-LD
• Open Graph
• Microformats
• Data Vocabulary
• DublinCore
• GoodRelations
• FOAF

We will not dive deep into all of them and look closer at the main three: JSON-LD, Open Graph и Schema.org.

Schema.org

Let us start with the popular schema.org vocabulary. You can find the full hierarchical list of properties on this page.

The main and most generic type of item in the schema.org hierarchy is Thing, which, in its turn, is split into several subtypes. Some of them are:

• CreativeWork – a general set of rules for describing creative activities: articles, books, films, photography, software, etc.;
• Event – a set of rules for events that happened or are going to happen during a certain period: meetups, concerts, exhibitions, etc.;
• Intangible – a service class that includes several non-material qualities such as sizes, job descriptions, ratings, services, etc.;
• Organization – a set of rules for the markup of organizations, check out the full list of business types on localBusiness;
• Person – a property that is used for describing alive, dead, or fictional people/characters;
• Place – a set of rules for something that has a fixed physical location (a building, park, monument, etc.);
• Product – everything that is created for sale. For example, a pair of shoes, a ticket, or a car.

Each subtype includes a variety of tags for describing, so almost any type of business can find suitable markup.

The majority of schema.org tags have implementation options that in the form of an approximate piece of HTML-code or a JSON-LD script. Below we will look into some markup examples for articles, products, and organizations.

An Article Schema.org markup template

The most common data for markup are URL, datePublished, dateModified, headline, image, author, publisher, and others. Let us look at a specific example.

The majority webmasters stick to this schema when marking up articles. Note that in this example, some tags are specified in the part (meta description), and the rest are implemented in the HTML page body. Some tags are optional, but still, we recommend checking your website page with Google structured data testing tool.

The examples of pages with data markup. The publication date is displayed here

A Schema.org markup template for product cards

The next markup type that we will look at is the product, or, in other words, a semantic markup of a product card.

Pay special attention to the format of prices, because this is where most markup errors happen. You can specify any value in any format in your product card copy, but it is important to add the value to the price tag in the correct format. Otherwise, search robots will ignore it.

The examples of snippets for product cards in mobile search

A Schema.org markup template for organizations

The last template we will analyze is the organization markup. Usually, this markup is implemented for structured data on the Contact page.

Local Business Schema.org alone does not result in a specific type of snippet, although it can be combined with other types of markup to produce more attractive snippet.

Schema.org has a large vocabulary. That can be intimidating, but not all the tags are mandatory so you can leave many of them out. In our examples, you can see the most necessary tags, but there can be much more.

Schema.org pros and cons

Pros:

• A large and frequently updated vocabulary;
• It is supported by all the most popular search engines;
• The code is not hidden behind scripts and is shown in the page code;
• It improves search snippets on the SERP;
• You can find markup properties for any website;
• There are plugins for automated markup;
• It is constantly improving.

Cons:

• A wide variety of markup schemes can be daunting for a non-professional user;
• You need basic HTML skills;
• It makes HTML-code more complicated which slows down the development;
• The official guides and manuals are in English;
• Now all the properties have examples on the official website.

Tools for implementing schema.org markup

Here are some of the tools that can be helpful for Schema.org markup implementation:

• A structured data testing tool by Google;
• Markup Helper by Google: it generated an HTML-code for your page with added markup;
• The Schema.org official website;
• «All In One Schema.org Rich Snippets», «Wprichsnippets.com», «Schema App Structured Data» — these are WordPress plugins that form schema.org markup automatically;
• Notepad++ or any other text editor.

Open Graph

This protocol is developed by Facebook for improving the look of link snippets for external websites on social media. This is one of the easiest markup vocabularies. You can start the implementation with these four properties:

• og:title — the page title.
• og:type —the object type, for example, «music.album». Depending on the type, other properties are supported. Check out the full list of type tags on the official website.
• og:image — image URL.
• og:url — canonical URL of the object.

  All the «Open Graph» tags are added to the <head> container.

Besides the main properties, you can specify additional ones — they will improve how your links are displayed on social media:

• og:audio – URL to the audio file, if music plays after opening the page.
• og:determiner — a word that appears before the name of this object in the sentence. The enum type (a, an, the, “”, auto). If you select auto, the data consumer has to choose between “a” and “an”. The default type is – ” ” (empty). The tag is most relevant to the English segment due to the use of different articles («a», «the», «an».)
• og:description – the page description from 160 to 295 characters.
• og:locale – the language and country. The format looks like this: language_TERRITORY, the default value is en_US.
• og:locale:alternate – the alternative language or country.
• og:site_name – the site name.
• og:video – URL to video.

An Open Graph markup template

Below you can find an example of HTML code with all the possible Open Graph properties. In reality, some tags can be left out and you can do well with just the main four properties.

Facebook social snippet for the page with Open Graph

Open Graph pros and cons

Pros:

• An easy to understand vocabulary;
• It improved the look of link snippets on every social media;
• It is supported by many social networks;
• The markup is compatible with apps and games on social platforms;
• Help docs in Russian;
• Plugins for markup automation;
• Supported by search engines.

Cons:

• Limited functions;
• It works only on social media.

Open Graph tools

We recommend the following tools for working with the Open Graph markup:

• The official Open Graph website with markup examples;
• Facebook debugger shows which data is added to the webpage;
• The Open Graph plugin for WordPress;
• The Open Graph plugin for Joomla;
• Notepad++- or any other text editor.

JSON-LD

The last markup type that we are going to explain is JSON-LD. The name stands for JavaScript Object Notation Linked Data. It’s developed by W3C (World Wide Web Consortium.) This markup format serves the same purpose that schema.org does, but in a slightly different way: it uses JavaScript to structure data; that greatly simplifies the task.

One of the benefits of this format is that you can use the schema.org vocabulary for describing your elements. So, with the help of JSON-LD scripts, you can describe any property or improve how your website displays in the search results while spending much less time. Moreover, you can do it without implementing HTML-tags in the page body: just add <script type=”application/ld+json”> to the <head> container, then add all the necessary markup terms and close the </script<.

For clarity, let us compare the layouts of schema.org and JSON-LD.

• Schema.org

• JSON-LD

An article JSON-LD markup template

This example of JSON-LD markup is based on the schema.org markup of the article mentioned earlier in this guide. All the properties are the same.

You may naturally have a question: what is better – schema.org or JSON-LD? There is not an easy answer. It is much easier to work with JSON-LD than to use the schema.org vocabulary in the HTML format. Google recommends this technology for markup.

JSON-LD pros and cons

Pros:

• This format is way easier to use than schema.org;
• It is recommended by Google;
• Quality plugins for WordPress;
• Thanks to JavaScript, the markup is hidden for a regular user (unlike HTML);
• The script can be placed in the container without adding multiple lines of code to the page body;
• It passes the validity test in the Google and Yandex tools.

Cons:

• The markup is implemented in JavaScript and is not indexed by all the search engines;
• You need both HTML and JavaScript skills.

JSON-LD tools

Here is a set of tools for working with JSON-LD:

• A tool for structured data check by Google;
• A plugin for WordPress, для WordPress that supports all markup types;
• WordPress plugin that helps to markup Author and Publisher; it’s helpful for blogs and periodicals;
• A JSON-LD module for Drupal;
• JSON-LD docs for GIT;
• Official JSON+LD docs JSON+LD by W3C;
• Notepad++ – or any other text editor.

What are other ways to mark up a webpage?

The markup formats listed above involve direct intervention in the page source code. However, there are other methods for structuring your data. For example, Structured Data Markup Helper:

Go to the tool and select the data type for the markup. You can mark up 12 data types:

• Articles
• Book reviews
• Data sets
• Events
• Films
• Job postings
• Local businesses
• Products
• Question and Answer page
• Restaurants
• Software applications
• Television episodes

1. Select the data type to start tagging and enter the URL page of your website.

  You can mark up only the pages that are in Google index.

2. Start tagging all data items on the page according to the chosen data type. In our case, these are name, author, date published, images, article section and article body, aggregate rating.

3. After tagging all necessary elements, you can add new HTML-source or the script block with microdata on your page.

This is the example of how to mark up your webpages with the Google tool. You do not need to know HTML or JavaScript, it is enough to mark each page manually, and Google will adjust the search snippets. However, the tool has its pros and cons.

Google’s Structured Data Markup Helper: Pros and Cons

Pros:

• You can use the tool right in the Google Search Console;
• The pages are marked semi-automatically;
• You can group pages by types;

Cons:

• The markup will work only in the Google search results;
• The markup deals with the source code, you have to add the script block into the head section of your HTML;
• The tool does not always work correctly;
• Lots of manual work for structuring big websites.

Conclusion

Implementing structured data markup is an important step that can increase the CTR of your website in the search and improve the link previews in the search results. There are several ways to implement structured data on your website, but schema.org is the most reliable one. Other methods either have limited functions or work in a limited number of search engines.

Each markup method has its pros and cons, and you need to consider them before implementation to find the best option. Remember that adding the markup to your website does not guarantee the change of the search snippets in the SERP. First, it simplifies indexing for search engines.