What is schema markup?


Schema markup is a collaborative initiative that was spearheaded by search engines. It enables websites to display “richer” data on various platforms like Google, Microsoft, Yahoo, Yandex and even Pinterest.

Schema is a type of structured data, which is code in a specific format. It is written in such a way that search engines understand it as a semantic vocabulary. Schema tells a search engine what your data means, not just what it says.

Key Definitions

Before we get started, it’s important to wrap your head around a few key terms:

Structured Data – Code that you put on your website to help the search engines return more informative results for users.

Schema – A type of structured data that defines entities, actions, and relationships on the internet.

Rich Snippet – A snippet is a result Google shows to the user in the search results. A rich snippet shows extra information between the URL and the description.

JSON-LD – An implementation format for structuring data. Typically, in terms of SEO, JSON-LD is implemented leveraging the Schema.org vocabulary.

Why is schema markup important?

Without schema markup in place, the information on a web page is left open to Google’s interpretation. By not marking up your data, you run the risk of search engines misunderstanding the content of your page.

For example, if the name ‘Chris Evans’ is included on a webpage, although search engines will be able to read the name they may struggle to understand the specific person being referred to. ‘Chris Evans’ could refer to the English TV presenter and radio DJ, or it could refer to the Hollywood actor famous for playing Captain America. Another example would be ‘Harry Potter’ – are you talking about the books, the films, or the specific character? Implementing schema allows you to tell the search engine what kind of information you are presenting.

Schema and SEO

In the context of SEO and web design, schema markup can encourage more information to be displayed in SERPs. It then creates an enhanced description (commonly known as a rich snippet), which appears in search results. This is important because these rich snippets are much more eye-catching and engaging than a regular snippet, and can have a significant impact on click-through rates. Just look at the examples below – I know which result I would rather click on.

Screenshot of a rich snippet
Screenshot of a normal snippet

Types of schema markup

Schema can be industry-specific and valuable to certain companies depending on the vertical they operate in. You can find a full list of schemas available on the Schema.org website, but we’ve pulled out some of the main ones for SEO benefit with examples of how they look.

Organisation

An organisation such as a school, NGO, corporation, club, etc.

Screenshot of rich snippet for a software application in search results

Local Business

A physical business or branch of an organisation. Examples of LocalBusiness include restaurants, branches of a restaurant chain, branches of a bank, medical practices, clubs, etc.

Screenshot of a knowledge panel demonstrating LocalBusiness schema

Product

Any offered product or service. For example: a pair of shoes, concert tickets, car rentals; a haircut, etc.

Screenshot of a search result demonstrating product schema

Breadcrumb

A set of links that can help a user understand and navigate a website hierarchy.

Screenshot of a search result demonstrating breadcrumb schema

People

Fairly self-explanatory. A person (alive or dead, real or fictional).

Screenshot of a search result demonstrating people schema

Article

An article, such as a news article or piece of investigative report. Newspapers and magazines have articles of many different types and this is intended to cover them all.

Screenshot of a search result demonstrating article schema

FAQ Page

An FAQ Page is a WebPage presenting one or more “Frequently asked questions”. FAQ schema can trigger voice actions.

Screenshot of a search result demonstrating FAQPage schema

How To

Instructions that explain how to achieve a result by performing a sequence of steps. This can drive results on virtual assistants such as Google Home.

Screenshot of a search result demonstrating How To schema

Event

An event happening at a certain time and location, such as a concert, lecture, or festival. Can be edited to include ticketing information via the offers property.

Screenshot of a search result demonstrating Event schema

Job Posting

A listing that describes a job opening in a certain organisation.

Screenshot of a search result demonstrating Job Posting schema

Recipe

Again, fairly self-explanatory… for recipes. For dietary restrictions covered by the recipe, a few common restrictions can be included via suitableForDiet. The keywords property can also be used to add more detail.

Screenshot of a search result demonstrating Recipe schema

How to add schema markup to a website

There are 3 main ways in which you can add schema to a web page:

  • Generate the code using Schema Generator tools and ask a developer to implement
  • Use the Data Highlighter tool in Google Search Console.
  • Directly tag the HTML code on your web pages via Google Tag Manager

There are also some Schema plugins, particularly for WordPress sites, that can help to do the job for you.

How to add schema via Google Tag Manager

This is by far our most preferred way to implement schema markup because it requires minimal coding knowledge and is a relatively smooth process. By following these 5 steps, you should be able to get any type of schema added in no time.

1. Create the code

You’ll need to find the specific JSON-LD that you need using the Schema.org website. Be sure to customise this code with your specific information, and wrap it with the blue code as shown below. You should then check your code using the ‘Code Snippet’ function of the Structured Data Testing Tool.

<script>

(function() {

  var jsonData = {

“@context” : “http://schema.org”,

  “@type” : “Organization”,

  “url” : “http://www.your-company-site.com”,

  “contactPoint” : [

    { “@type” : “ContactPoint”,

      “telephone” : “+1-401-555-1212”,

      “contactType” : “customer service”

    }

  },]};

  var el = document.createElement(‘script’);

  el.type = ‘application/ld+json’;

  el.innerHTML = JSON.stringify(jsonData);

  document.head.appendChild(el);

})();

</script>

2. Create a trigger

In Tag Manager, create a Page View trigger using the exact URL of the page that you want to add the schema to.

Screenshot showing how to configure a trigger in Google Tag Manager

3. Create a custom HTML tag

Copy and paste your code in, and apply the Page View trigger that you just created.

Screenshot showing how to set up a custom HTML tag in Google Tag Manager

4. Preview and publish

Use preview mode to check your changes in the wild. If you’re happy, you can then publish the changes.

Screenshot showing Google Tag Manager checking that the tag works properly

5. Check your implementation

Check using the Structured Data Testing Tool to see if the code is working as it should.

Screenshot showing the Structured Data Testing Tool

You can also run your web page through the Rich Results Test tool.

Helen Freeman

SEO Executive

I'm a Digital Executive with a love of using organic and paid strategies to drive growth for a range of lead gen and e-commerce businesses. In my spare time, you’ll likely find me with a camera in hand, playing the latest board games, or shouting about women's football.

Leave a Reply

Your email address will not be published. Required fields are marked *