Schema markup the complete guide

Schema markup is a structured data that comes in different formats such as RDF or JSON LD. It is used on websites to clarify the content of your pages to search engines. This article, goes through the details of different schema markup types supported by various search engines, with examples on how to apply schema.org types on your web pages.

asdf

Some people refer to structured data as Rich Snippets or Rich Results. Technically, structured data is the code that you have to add on your website and rich snippets are the additional info added to your search results by search engines.

Recipe rich snippets result.

 

Rich snippets have been around since May 2009, as part of Google's efforts to make search results more informative and user friendly.

 

Are rich snippets and rich results important for SEO?

 

Interestingly some organizations or even SEO professionals don't fully appreciate the power of rich snippets on their businesses; they read somewhere that it doesn't affect ranking, so they decide to ignore it or pay little attention to it. However, companies such as Apple, Adidas, Nike, and other major corporations, understand and utilize schema markup to their advantages as it can boost organic search results to 100% or more in some cases.

It seems that Google states that schema markup does not impact page rank to prevent people from stuffing a lot of keywords into it. They want to make sure that this feature matures slowly instead of becoming an overused and abused feature like the keywords meta tag.

Take a look at some case studies by google on the impact of structured data on SEO. They studied seven major websites that integrated their websites with structured data. Eventbrite saw a 100% boost in traffic! 

How can you boost 100% of traffic if the ranking is not affected? Well, the answer is simple. Schema markup can and does increase ranking!

 

Based on SEO Ranking Factors, we know that CTR (Click-Through-Rate), user engagement (such as bounce rate, time spent, and overall activity on a page) clarifies whether this page should rank higher or lower. We also know that schema markup leads to a significant boost in CTR and user engagement. Thus it does make sense to see ranking increase after implementing schema markup.

 

You can also read Neil Patel schema markup guide where he confirms that structured data indeed affects ranking.

 

How does schema markup affect convergence and CTR?

 

Some people think that if your page rank doesn't increase, you will not get any value from schema markup. Let's look at an example Local Business schema markup below:

<html>
  <head>
    <title>Best burgers restaurant</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Restaurant",
      "image": [
        "https://bestburger.com/photos/1x1/photo.jpg",
        "https://bestburger.com/photos/4x3/photo.jpg",
        "https://bestburger.com/photos/16x9/photo.jpg"
       ],
      "@id": "http://www.bestburger.com/#main",
      "name": "Best burgers restaurant",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "160 50 St",
        "addressLocality": "New York",
        "addressRegion": "NY",
        "postalCode": "10020",
        "addressCountry": "US"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "5",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Mary"
        }
      },
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": 41.731292,
        "longitude": -72.942234
      },
      "url": "http://www.bestburger.com/location/manhattan",
      "telephone": "+12122459600",
      "servesCuisine": "American",
      "priceRange": "$$$",
      "openingHoursSpecification": [
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Monday",
            "Tuesday"
          ],
          "opens": "08:30",
          "closes": "20:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Wednesday",
            "Thursday",
            "Friday"
          ],
          "opens": "09:30",
          "closes": "22:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": "Saturday",
          "opens": "16:00",
          "closes": "23:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": "Sunday",
          "opens": "16:00",
          "closes": "22:00"
        }
      ],
      "menu": "http://www.bestburger.com/menu",
      "acceptsReservations": "True"
    }
    </script>
  </head>
  <body>
  </body>
</html>

 

Notice that in addition to their address, we added GeoCoordinates as well as OpeningHoursSpecification. Clients who search for "burger restaurants near me" are more likely to get this restaurant instead of other ones. Search engines have 100% confidence in the result (and business opening times) compared to other businesses that do not have structured data.

 

Which search engines support structured data or schema.org?

 

Fortunately, all major search engines such as Bing, Yandex, Yahoo, and Google support structured data. Currently, Google is leading the pack when it comes to structured data.

Each website has a guide to building structured data; below is a quick reference:

Note: Yahoo doesn't have tools for markup as they use Bing to power their search results, just like Google powers Duckduckgo. Thus, we can say that both search engines directly or indirectly support or at least understand schema.org even if they don't yet provide rich snippets for the results.

Baidu also is working towards supporting rich snippets.

 

Schema markup can impact google images result as well.

 

When building a product schema markup on your website, your web SERP results will have rich snippets, and you will notice that Google Images will get rich snippets applied as well. The good news is that you don't have to add schema markup specifically for the images. The image inherits the schema markup from the product page itself.

 

The picture below shows how schema markup of the product page affects image results.

Keep in mind that you might want to consider adding image license markup for all the images at your website to protect them from being used illegally by competitors.

 

Note: as of writing this article, the license feature still isn't implemented, but you can add them in advance.

 

What are the major structured data formats?

 

  • JSON-LD current version is JSON-LD 1.1 Developed by JSON-LD Working Group, JSON-LD decouples the schema markup data from the HTML content of the page, which gives greater flexibility when building large and complex schema.org structured data types. 

 

  • Microdata is a set of specifications that you can add to your HTML. It does require adding meta props to your HTML elements, which can be inefficient or inconvenient when trying to add information that doesn't exist on your page. 

 

  • RDFa (Resource Description Framework in Attributes) is yet another way to add structured data for web pages; just like microdata, it requires changing your HTML code and adding its field on each DOM element.

 

JSON LD and schema.org data structures are the future.

 

In this article, we will focus on the JSON LD format since its recommended by search engines. It integrates nicely with any website without changing the existing code. 

Adding JSON LD to your website requires adding a simple script similar to the one below:

 <html>
  <head>
    <title>Travellers Shoe</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Travellers Shoe",
      "image": [
        "https://acmesolutions.com/photos/1x1/main-photo.jpg",
        "https://acmesolutions.com/photos/4x3/main-photo.jpg",
       ],
      "description": "Travellers Shoe, the best for business travelers.",
      "sku": "3004883",
      "mpn": "39920",
      "brand": {
        "@type": "Brand",
        "name": "ACME Solutions"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "250"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://acmesolutions.com/travellers-shoe",
        "priceCurrency": "USD",
        "price": "300.00",
        "priceValidUntil": "2021-01-01",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock",
        "seller": {
          "@type": "Organization",
          "name": "Big Shoe Org"
        }
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

 

The JSON LD code applies product schema markup on the page. As you can see, we have added offer section to clarify for search engines whether the product is available or not. We also added price and currency rather than having search engines trying to understand page details on their own.  

Google typically has a set of required and recommended that you can on their product page, in order for your schema markup to qualify for rich snippets result, you have to make sure all the required/recommended fields are properly added. 

Below is a screenshot for a product schema markup by SchemaBoost Editor on required (marked in red), recommended (marked in yellow) and fields that might be required (marked in blue), finally we see extra markup fields that are (marked in white), these fields are not referenced in google documentation.

 

⭐Can the extra structured data information be useful?⭐

 

According to Google’s John Mueller “Additional structured data can be useful", however, he cautioned from overusing the additional fields. If you have important information that you'd like to present to Google and the supported fields didn't support them, then make sure to add markup for those fields. In many cases, Google already parses additional information that is not shared to the public yet.

For example, there is a field called sameAs which allows you to add references (URLs) to the product from Wikipedia or other external websites that might help Google understand more about your page.

 

How do I apply JSON LD on my website?

 

Fortunately, JSON-LD allows you to add any structured data to your website without having to inspect your HTML elements one by one and see the matching types. It might look easy at first to merge your code with HTML elements. However, once your website grows, and the content of your pages becomes dynamic, things become messy pretty quickly.

 

With JSON-LD, no matter how complicated your schema markup is, you can add it separately into the head section of your pages the same way you add a link or style element; the type of script is "application/ld+json".  Previous examples showed that you can simply add a script with the JSON LD object to the head section of the HTML page and that all is required. Anyway, in some cases, this is not efficient when the schema needs to be updated dynamically. Fortunately, we have alternative options using Javascript or GTM (Google Tag Manager) to add JSON LD script to our pages.

 

Using javascript with async API to insert JSON LD to page

The following picture shows an example that we request an API Url "https://api.example.com/recipe/123," which returns a response data in the form of a JSON object to form an application/ld+json script and insert it in the head of the page.

 

Note: SchemaBoost uses this method to serve schema to websites. You add a single script to your website, it calls the API, and injects schema markup to each page when requested.

We tested Structured Data Testing Tool and Rich Results Test and found both supports using the javascript method. They add a 5 seconds timeout for async JSON requests to get resolved before timing out.

 

Using GTM to insert JSON LD to page

GTM allows you to define variables that you can use such as {{recipe_name}} or {{image_url}} that you can add on your schema, these variables will get replaced by the correct field (that you have defined earlier).

 

In some cases, you might want to add more than a single schema type to a single page. Suppose you want to implement a breadcrumb markup in addition to Local Business for the same page.

Fortunately, there are five ways to accomplish this.

  1. Build an array of schemas in a single script.
  2. Use @graph and nest multiple types in an array.
  3. Add script elements one by one at the head section.

 

Here is a quick example of each option:

Build an array of schemas in a single script

 

Use @graph and nest multiple types in an array.

 

Add script elements one by one at the head section.

 

You can use any type you prefer. The difference between these options is minor. 

 

Schema markup generator tools and solutions

 

There are many options to build a JSON-LD code for your website, some of them are free and limited to certain types/fields, and there are paid solutions that offer greater flexibility. 

 

There are some free and limited generators on the internet, such as technical seo or merkle. They allow you to generate a simple markup and copy it manually to your page; this can become a nightmare if you have many pages or the content changes every few days on those pages.

 

Companies that use traditional CMS solutions such as WordPress or Drupal, have options such as yoast or rank math plugins. These tools can react to content changes. One major drawback with CMS SEO tools is that they have limited schema markup just like the free tools, you don't have 100% schema.org support when using these tools.

 

Lastly, for big projects and enterprise customers that need a custom solution which works with any platform, they only have two main options: 

  • SchemaApp Has been around for a long time. It supports all schema.org types. Keep in mind that working with this app can be a pain as it has an outdated interface and isn't intuitive or user friendly in most cases.
  • SchemaBoost Launched in 2020, just like SchemaApp it does support every schema.org type and full integration with any platform. However, SchemaBoost makes building schema markup easy and fast; the built-in tools that come with it are unparalleled; you can try its editor at SchemaBoost Builder

 

 

What are the essential schema types that you need to implement?

 

Most people think of a few types when talking about schema markup on websites. The widely are used to the ones below:

  • FAQ (frequently asked question or Q&A).
  • Local Business (such as restaurants, bars, shops, etc.).
  • Product (any type of product, be it physical or service).
  • How-to (explains the steps in articles)
  • Review snippet (social proof for any product or service).

 

Structured data types that are new or less known:

 

ClaimReview (Fact Check)

Google fact check is a great tool when writing an article and you want to reference a fact from another article and add your opinion on it.  The good news is that Google provides you with out of the box tool (that will attach the fact check to your page automatically, it works similar to the way schemaboost schema generator works. 

For example, in this article, I fact-checked Neil Patel's claim that “Schema markup can increase page ranking”, I confirmed his claim in this article. The good news is that Google would show my fact check schema markup when people search for the term “Would schema markup increase my page ranking?

To build your own fact check markup, you can start with the page below:
https://toolbox.google.com/factcheck/markuptool

Or if you want complete control over the JSON code, then you can create a free account on schemaboost and build a fact check (ClaimReview) schema.

You can view what are the eligible rich results for this blog post through the following link:
https://search.google.com/test/rich-results?url=https://www.schemaboost.com/blog/schema-markup-the-complete-guide&schematest=10

Note: that I added schematest=10, it is a random number that I insert on the URL to trick Google bot into thinking its a new page, thus it will re-read the JSON code whenever I do some changes. otherwise, Google bot will return the previously cached result and cause confusion. 

 

COVID-19 announcement (still in beta, preferrable to be used with Local Business for opening hours specification)

 

The coronavirus structured data is a bit complicated compared to other types. It involves many different pieces, such as quarantine guidelines, travel restrictions, opening hours, or other special announcements that apply to businesses, healthcare providers, and government agencies. 

 

Since COVID19 has hit many businesses, many people struggled to apply schema markup on their websites properly. Google created a tool to submit a COVID-19 announcement for sites that you can use directly from your search console. Unfortunately, the tool is very limited, its only applicable to your website for a month (where you have to re-submit) for it to stay active.

 

On the other hand, if businesses want to build proper schema for COVID19, they can use a professional tool like schemaboost

SchemaBoost builder for SpecialAnnouncement

 

Speakable (still in beta, but could be the next big thing!)

 

In 2019 search engine land published an article that nearly 50% are using voice for web search. This photo shows Speakable structure. to give a better context, again I am using schema builder, as it explains both the JSON LD part and the HTML page. 

 

Notice that we gave the search engine a clear indication about the headline and answer XPath to the text/paragraph. 

Note: you can get the XPath of any element in an HTML page by using Chrome Developer tools, just right click on any HTML element in your browser, click on inspect, the dev tools will open, and it will highlight the element that you selected. Once it's open, you can again right-click on the highlighted element, then copy --> copy XPath or copy --> copy full XPath.

Alternatively, you can use a tool like Schema Site Highlighter, which automatically writes the correct XPath for each element you select by simply clicking on it.

 

DataSet (it has recently come out of beta)

 

Dataset is currently used by researchers and scientists to explore hypotheses or statistics about specific topics. It has 25 million indexed results. 

 

You can try to search keywords for terms like Coronavirus recovery rate in Italy as of July 14, 2020, by age group to see the results on Google Dataset Search console.

 

Email Markup or schema markup for email

 

Unlike the types that we have been talking about so far, Email Markup used primarily to add snippets to your emails rather than search results. You can add Flight Reservation for google calendar, One Click Action for Gmail Actions, or Actionable Message for outlook. 

 

For example, Gmail One-Click Action uses EmailMessage schema.org type. It allows you to add schema markup and link it to a specific button to hide unnecessary details from your subscribers.

 

Microsoft Outlook Actionable Message uses non-schema.org type MessageCard, while it uses JSON LD code, it's unfortunate it's not a standardized messaging format such as schema.org.

 

I will not go through the details of the email markup in this post. I think its good to add it here for completeness. I'll add a separate article soon to explain the available types of email markup and how to use them.

 

How can I verify if my pages have structured data markup?

 

You can view structured data, and any errors of your implementation by vising google search console then go to the Enhancements tab. Under it, you can see if you have schema markup on your page, such as Breadcrumbs, FAQ, Review snippets, etc.

 

There is the Unparsable structured data tab to see if you have any pages with issues with the data you have on pages; the image below shows an example of parsing errors. 

 

If you find any errors on your google search console, make sure to click on the errors and inspect your pages one by one to fix the schema on them.

 

You can quickly verify the CTR and average position for your rich results pages, again from google search console go to Performance tab, add a new filter, and notice the picture below shows Rich results and Review snippet. Apply those filters to see the current CTR for these pages.

 

You can also click on Search Appearance section (next to queries, pages, and countries) to see the number of clicks vs. impressions.

 

Note: in some cases, you might notice that the CTR is lower for review snippets vs. the overall CTR of your website. The reason is that Google only allows a review to show up for products, services, or article pages rather than the website's home page. So any search term for your brand name (website name), which usually has a very high CTR, will be removed from the search console results for review snippet. 

The bottom line is that every SEO professional should know the value of schema markup and make sure they add it to their pages. It gives businesses a great boost to search results and SERP appearance. In addition schema markup enhances Google knowledge graph and makes it easy for search engines to digest your content.