Home>SEO>Schema Markup 101: How to Create Rich Search Results and Boost SEO
  • schema markup 101

Schema Markup 101: How to Create Rich Search Results and Boost SEO

7 minute read

Driving users to your website through organic search requires two things: getting your site to rank near the top of search engine results pages (SERPs) and making the search snippet appealing so that users will click on it. Schema markup helps with both of these tasks.

The rest of this post will explain what schema markup is and how you can use it to help boost your website’s SEO, create rich search results, increase search traffic, and drive more engaged audiences to your website.

What is Schema Markup?

Schema markup is a form of microdata or structured data (SD) that is added to a webpage to help search engines better understand its content. It uses a set of standard data structures that categorize on-page content. For example, a line of code may tell search engines that “March 3, 2019” is a date or that “To Kill a Mockingbird” is a book title.

When schema markup is used on a page, that page may receive a rich snippet search result on search engine results pages (SERPs).  A rich snippet is a search result that includes more than a standard search result display.

A standard search result typically only includes a title, URL, and description.

standard schema markup example

Rich snippets include additional information such as photos, reviews, and other extra content depending on the type of search result. Schema markup identifies this extra information and explains it to search engines so that they can display it as a rich result.

rich snippet schema markup example

In the examples above, AllRecipes.com added recipe schema markup to their page so that search engines could produce rich search results that include a rating, number of reviews, cook time, calorie count, and image.

It’s important to note that schema markup will help create rich search results but that not all structured data will lead to rich results.

Having schema markup doesn’t guarantee that results will have rich data. While this is one of the top benefits of using schema markup, it isn’t the only reason why structured data are important.

Why is Schema Markup Important?

Schema markup makes it easier for search engines to understand content, which makes them more likely to rank it. Click To Tweet

While Google has not published that schema markup is a ranking factor and Google’s Webmaster Trends Analyst John Mueller has said that there is “no generic ranking boost for SD usage” – that doesn’t mean schema doesn’t have a positive impact on SEO.

  • Schema helps search engines recognize the meaning of the content. When search engines easily understand content, they are more likely to rank it for relevant terms and phrases.
  • Schema helps a page stand out on SERPs. Rich data make a search result larger and easier to notice.
  • Schema increases click-through rates (CTRs). Tests have found that websites can achieve up to a 30% increase in organic search traffic when they have rich snippets.

So while adding schema markup won’t immediately boost a website’s search rankings, it is a part of best practices for SEO that will provide long-term value and results.

What is Schema.org?

The schema structure was created when four founding companies came together to create one consistent structured data language for all search engines. Google, Microsoft, Yahoo, and Yandex started the project along with support from the larger web community. The information and schemas they created are organized on Schema.org.

Schema.org houses all of the schema vocabulary and guidelines for adding this structured data to a website.

schema.org explanation

Schema Categories

There are hundreds of types of schema categories. Schema.com has a database of numerous types of data. For example, you could add image schema markup to tell search engines about a graphic on your page, or you could use local schema markup to show search engines the name, address, and phone number for a brick-and-mortar business.

Commonly used categories for schema markup are:

  • Products
  • Software Applications
  • Businesses and Organizations
  • Restaurants
  • Articles
  • Events
  • Recipes
  • TV Episodes and Ratings
  • Book Reviews
  • Movies

On Schema.org, you can find popular and widely used codes, as well as specific and obscure codes for things like video game cheat codes and airline boarding policies.

Structured Data Examples

Schema uses an information hierarchy to organize content. Itemscope, itemtype, and itemprop all work to identify important content on a website.

  • Itemscope is a microdata HTML body tag that encloses information about a specific topic or thing on your site.
  • Itemtype is a tag added near the itemscope HTML tag that specifies what the topic or thing is that is enclosed in the itemscope tag.
  • Itemprop is an individual tag that describes a single property of the topic or thing enclosed in the itemscope tag.

Schema.org describes this breakdown using the movie “Avatar.” In the structured data example below, you can see the uses of itemscope, itemtype, and itemprop.

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1> <span>Director:
<span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Without schema markup, the code would look like this.

<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

The schema microdata use:

  • Itemscope to group relevant information
  • Itemtype to show that the grouped information is about a movie
  • Itemprop tags (name, director, genre, and trailer) to identify individual details about the movie

Schema markup can also include embedded items within a primary itemscope. In the example below, you can see how another itemscope for person has been added within the itemscope for movie. Additional itemprop tags were added to give details about the person.

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

3 Types of Schema Markup

In the example above, the schema is presented as microdata. But there are different types of schema markup.

Microdata

Microdata is a set of tags that uses certain vocabulary to describe an item and name-value pairs to assign values. It uses lines of HTML body code to define content on a page, which helps search engines understand the information and provide better results for users. But because microdata markup methods can be somewhat cumbersome and complicated, JSON-LD was created to provide another option for adding additional information structures to a page.

JSON-LD

Rather than use multiple lines of HTML code, JSON-LD uses a piece of JavaScript code to assign schema language to a webpage. JSON-LD uses the same standardized schema language as microdata. You can use any schema format with JSON-LD.

RDFa

Google supports another type of schema markup called RDFa. It is an HTML5 extension that supports linked data. Like microdata, it uses HTML tag attributes to explain the meaning of the content to search engines. RDFa can be added to either body or header HTML on a webpage.

How to Add Schema Markup to Your Webpages

As the structured data examples show, schemas can be complicated if you aren’t familiar with adding custom code. Thankfully, there are both manual methods and tools for adding schemas.  To add schema markup to your website, you have a few options.

Manually Add Schema Markup Using HTML

As shown in the example above, you can add HTML directly to your webpage to insert schema markup. Using Schema.org, you can find the relevant microdata codes for information on your page and manually add it to your page’s HTML.

Manually Add Schema Markup Using Javascript

You can also pull schema vocabulary from Schema.org to create lines of JSON-LD javascript code that can be added to the body or header of individual webpages.

Use Google’s Structured Data Markup Helper

Instead of manually adding code, you can use Google’s schema markup generator to create structured data HTML or javascript for your page.

add schema markup using schema markup generator

To use Google’s schema markup tool:

  1. In Google Webmasters Tools, use the Structured Data Markup Helper.
  2. Select the type of data you want to mark up.
  3. Enter the page URL or HTML code for the page.
  4. Select on-page content and match it with the type of elements that need to be marked up.
  5. Continue to add all structured data elements.
  6. Select microdata and add the new HTML to your page. If you’re using JSON-LD, you choose JSON-LD and add the script block to the head section of your page.

Use WordPress Plugins

If your website is a WordPress site, there are a variety of schema markup generator plugins available to you. You can upload and activate the plugins to add structured data to your site without needing to get into custom coding.

Plugins are available if you want to use microdata, JSON-LD, or RDFa schema markup.

Here are some plugin examples:

Be mindful that these plugins are created by third-party developers and are not designed specifically for your website, so they could interfere with other themes, plugins, or custom code on your site, leading to problems. Test each schema markup tool before using it on your site to avoid any problems or site downtime.

How to Check Schema Markup on Your Website

Once you go through the work of adding schema markup to your website, make sure you add it correctly. To check your work and ensure that all of your tags match up with the correct information, use Google’s Structured Data Testing Tool.

check schema markup with Google testing tool

  1. Launch Google’s Structured Data Testing Tool.
  2. Enter the URL or code snippet of the page you want to test into the structured data markup, and run the test.
  3. Review the errors and warnings and make necessary changes on your pages to resolve incorrect data structures. review structured data errors
  4. Use the results to review and ensure the correct information is added and tied to the right data markers. structured data testing report
  5. Use the preview option to view what the rich results may look like in search results.

By running a schema markup test on your pages, you can see where you successfully added code, where you made mistakes, and how rich results might look like on SERPs.

Don’t Forget About Other On-Page SEO Elements

To drive more traffic to your website via organic search, you need your webpages both to appear in top spots on SERPs and provide search snippets that users want to click on. Schema markup can help with both of these tasks.

But schema alone won’t get your webpages to rank.

You also need to use on-page SEO best practices to get search engines to notice, recognize, and properly categorize your pages. In addition to using schema markup, use an on-page SEO checklist and also this checklist for writing before considering any of your pages fully optimized.

Use Alexa’s On-Page SEO Checker to scan each page on your site and make sure each follows SEO copywriting and on-page optimization best practices. The report will let you know what optimization opportunities you are missing and provide guidance on how to fix errors to help the page rank.

check on page SEO using Alexa

Support Schema Markup With Improved On-Site SEO

Use what you learned about schema markup in this guide to add structured data to your website, improve your site’s search visibility, and drive more customers to your website. Then, sign up for a free trial of Alexa’s Advanced Plan. You’ll get SEO and keyword optimization tools to help you improve other essential elements of on-page, off-page, and technical SEO.

Google and the Google logo are registered trademarks of Google LLC, used with permission.

SEO

Schema Markup 101: How to Create Rich Search Results and Boost SEO