See more articles

Everything You Need to Know About Schema Markup in 2024

Schema Markup header
Schema Markup header

With Google and other search engines trawling through literally billions of webpages it is more important than ever that search engines can properly understand your site and pages.

Imagine you were sorting through a filing cabinet at work.

Without proper notes and tabs it can be nigh on impossible to easily pick out key details without a lot of hard work.

Schema Markup essentially provides these notes for search engines when it comes to them processing your pages.

At a glance they can have a clear understanding of the structure and content of your pages, as well as who produced them.

What Is Schema Markup?

Schema Markup is a “label” made up of code, that shares important information about your pages and adds context. 

It’s like a signpost for spiders as they crawl your content. The code is added to your HTML to enhance the rich snippets in Google SERPs.

Do you remember learning how to format essays at school? Your teachers were tired of impossible-to-read cursive fonts, line heights that turn a one page essay into five, and not knowing who wrote the dang thing because there’s no name on it!

In the same way that your teachers wanted a better way to understand your essays, Google wants a better way to understand your content.

Ok, you’re a local business. What is the name of your company and where is it located?

Ok, you’re posting a recipe. What is the name of the recipe, the ingredients, and steps to make it?

Ok, you’ve reviewed a product. What is it called and what overall star rating would you give it?

Google’s official definition of schema markup is “a standardized format for providing information about a page and classifying the page content.”

You’ll see in the example below that the second snippet includes a star rating and review which has been added in schema.

A screenshot of the difference between a search result with and without schema markup

Schema provides more information to search users as well as search engines. The content also stands out amongst other results which helps to increase Click Through Rate (CTR).

How was Schema Created?

Although schema.org was created by the four largest search engine companies (Google, Bing, Yahoo, and Yandex), it is in fact a community-led project.

Anyone can get involved and share their ideas.

 

Above is a screenshot of schema.org’s Github Issues page. This is where the vast majority of discussion happens regarding different schema types.

It’s a great place to troubleshoot problems and confusions with different snippet types. The issues are easily searchable.

I’ll discuss more about this in the developer section of this article.

Simple Schema

As with humans all over the world, there are many languages used to code websites.

A web page is made up of HTML (Hypertext Markup Language) which tells the website how to view your content. Although your website speaks this language, we can’t assume that all search engines can! 

It’s a big guessing game for Google to figure out who’s the author, the company/organization it represents, and which pieces of data can be utilized in the SERPs.

Let me give you a quick example. Say we want to organize a local SEO meetup. It’s our goal to get listed in this box that shows up when you Google “SEO events near me”:

Well, there are a variety of ways we could go about this. The first (and easiest) way would be to create a Google My Business Event post. But maybe we are not eligible to have a Google My Business listing!

No problem. The second method is to put a schema.org code snippet on our event page.

Check out the below code snippet. I annotated it to make it easy to understand.

But wait! In case you check out the screenshot and get overwhelmed, do know that there are a variety of ways to add Schema markup to your site without touching any strange markup. There are both WordPress plugins and easy-to-use code generators.

It helps to get a raw understanding of what those helpers are actually doing though.

And just like that, this little snippet gives Google a ton of information about our event!

Make sense?

Schema.org vs. Rich Snippets vs. Structured Data

You’re going to see all sorts of terms thrown around:

  • Schema types/classes
  • Structured data
  • Rich snippets

But what are their differences?

Structured data describes what we are doing. We are providing clear, organized data about our content that the search engines could understand.

Schema.org is a type of structured data. It is actually the only type of structured data that Google cares about. 

You might have heard of OpenGraph before. That is another type of structured data, but it is used almost exclusively for social media sites like Facebook, Twitter, and Pinterest.

Rich Snippets are the cool, fancy widgets that Google creates using your data. It is nothing we have absolute control over, but our schema.org structured data does increase our chances.

Want to see some examples?

Information about a movie:

Star reviews:

Recipe:

What Schema.org Types Does Google Make Use Of?

For all we know, they use all of them! Google is a core player behind the schema.org project after all.

However, regardless of how many data types they make use of for understanding and ranking websites, there are only a few that are used in their rich-snippets (as of now at least).

They are:

  • Organization
  • Article
  • LocalBusiness
  • Recipe
  • Review
  • Video
  • Product
  • Event
  • Person

This doesn’t mean the other ones aren’t worth implementing. We’re about to go over a variety of different data types that could be very beneficial to implement.

How to Add Schema Markup to Your Website

You’ve got three main options for adding Schema markup to your website:

  1. Add the markup code manually
  2. Use the Data Highlighter
  3. Use a WordPress plugin

Checking for Existing Markup

Before adding anything to your site, it’s important to see what is currently implemented. 

If you’re reading this article, you’ve likely done some SEO efforts in the past, even if it’s only as little as installing the Yoast SEO WordPress plugin. Well, plugins like that usually add at least some schema markup.

Throw a URL of yours into the Structured Data Testing Tool.

Whatever markup you have will display on the right-hand side of the page. As you can see, there are three schema types used on the page I tested.

Option #1: Add the Markup Code Manually

You could write your markup code from scratch, but it doesn’t have to be that way.

Google created the Structured Data Markup Helper and it is great!

You start out by selecting your content type and inputting one of your URLs. I choose a recent blog post of ours.

Then, start highlighting and tagging different elements of your page.

Google SEO Data Highlighter GIF

After that, click the red “Create HTML” button and grab your code to add to the head section of your HTML! It’ll look a little like this: 

This is wonderful for your home page or even a single page. But it starts to get tedious if you want to individually tag every single blog post. 

If this is the case, there are other options to explore. The first of which is the Data Highlighter.

Option #2: Data Highlighter

Google wanted to give webmasters an easier-to-use interface for tagging their data. Maybe you are not confident with editing a page’s HTML to add Schema markup. 

The Data Highlighter is useful. Make sure you’re logged into your business Google account, plug in one of your URLs and tag it just like you would with the Structured Data Markup Helper.

After that, it will present similar content on your site and you could ensure it too is tagged properly.

Option #3: WordPress Plugin

You could get started with a WordPress plugin like Yoast. Its free version gives you the most basic Schema types like Organization, Person, and Breadcrumbs.

They have premium upgrades as well that support eCommerce and local business related schema types.

Now, where do you go from here? You might be a blogger, so you would want schema types like BlogPosting or Article. You may have a local business and would like the LocalBusiness type.

A great free plugin I have found is WP SEO Structured Data Schema. It supports a ton of schema types in the free version.

If you’re not sure which to implement on your site, below we’ve listed the most popular schema types.

Schema Data Types You Should be Using

Organization & Breadcrumb Schema Data

There are a few data types that apply to all sites — whether you’re a news publication, online store, or an ice cream parlor.

In Google’s guide to enhancing the appearance of your company’s website in search, they recommend setting up the Organization and Breadcrumb schema type.

Doing so, you’ll be specifying all sorts of information such as your brand name, its address (if you have one), your official social media channels, and your logo.

Breadcrumbs help display the hierarchy of your pages. You’ll see them a lot in search results. Take a look at the URL of this search result for the term “men’s hiking boots”:

Breadcrumbs show the hierarchy of pages, product categories, and blog post categories.

Google also advises adding a contactPoint section to your Organization markup. That will help you in getting your contact information properly listed when people search for your company.

Like so:

Organization Markup Tip: Do not place your organization markup on all pages. John Mueller of Google recommends it only be placed on the home page or contact page.

Person Markup

The most common reason people want to use the Person markup is to land rich snippets like this:

Getting those sorts of rich snippets isn’t always easy. Especially if you are not very well known or have a fairly common name.

The best use of this schema markup for SEO is if you own a personal website. It is also useful if you are a company that has dedicated pages about each of your team members.

Local Business Markup

If you’re a local business, implementing the LocalBusiness schema markup is a great step to take.

However, local business rich snippets primarily pull data from your Google My business listing.

It is still worth implementing for NAP (name, address, phone number) consistency.

Article Markup

To get even more specific than the Article type, you could use a NewsArticle or BlogPosting type instead.

Articles can hold all of the basic data you’d associate with an article such as its headline and date published. In addition you could also specify its word count, awards it has won, and a short description of it.

Rating/Review Markup

We’ve all seen this sort of rating rich snippet in the search results before:

It could be used to display ratings from your customers or your own review of a product.

Be sure to use real reviews from your customers rather than arbitrarily setting all of your products to five stars.

This is likely the most commonly abused schema type. Some people put these on all of their pages hoping for increased rankings and click through. Google has caught onto that and could even penalize you for doing such a thing.

Product Markup

Product Schema is a must for eCommerce stores!

It’s recommended to pair it with the review/ratings schema. 

Video Markup

Google displays video results not only on their Videos tab but also in line with their regular content.

A lot of the time the video results are dominated by Youtube results. Other times (like this one) other high authority sites are able to secure rankings.

Event Markup

Definitely re-read our section titled “Simple Schema” where we go over a practical example of the event markup.

This markup is for any type of event you create and allows you to include all the details of the event within the markup.

Recipe Markup

It’s a must for any cooking blog! If you’ve ever taken a look at any recipe-related search result page…

…it’s clear that it is completely different than the results for any other keyword.

You want to make it as easy as possible for Google to understand your recipe.

Bonus: Markup For Your Niche Industry

There are a lot of super niche industry-related markup types to utilize. Especially if you’re in local SEO, chances are that your competitors aren’t taking advantage of them.

For example, there are types such as:

Schema Markup in…Emails

90% of you reading this article are likely only interested in how to add Schema markup to websites.

Most people had no idea it was something that could also be added to their marketing emails!

First, it’s important to mention that this is really only a benefit for Gmail users. Luckily, Gmail users happen to hold 29% of the email client market share, making it the most-used email service.

I’d love to see Schema markup added to Apple’s email clients. Did you know that Gmail and Apple make up over 50% of the email client market share?

The two most common examples of schema.org snippets you’ll see used in your inbox are for flights and hotels. Below is what you’ll see for flights you have purchased:

And here is an example of a button that shows up next to all of your emails regarding a hotel booking.

Most of you, however, are not in either the hotel or airline business. There are still some wicked data types you could make use of!

Go-To Actions

The most useful actions for just about every business will be go-to actions.

All it does is provide a simple button or link next to your email that allows your subscribers to visit a URL

This markup is great for providing a call to action and encouraging opens.

Events & RSVP

You could use the EventRegistration and RSVP data type to make it dead easy for your subscribers to say yes to your next event.

Creating specific custom responses (ex. “Yes, I’m going”) and assigning each one a unique URL is ideal for split testing, tracking and personalising the user experience.

Order & Shipment Tracking

For those who are in e-commerce, the two most useful elements of email markup for you are going to be Order and Parcel Delivery.

Invoices

Whether you’re sending invoices to clients or reminding a customer about an automatic subscription payment, the Invoice data type is very helpful.

In the image above, you can see the example showing a bill that was already paid.

One unique part of this data type is that there are a variety of payment statuses you could choose from.

This is defined by Schema’s PaymentStatusType. The five types are:

  • PaymentAutomaticallyApplied
  • PaymentComplete
  • PaymentDeclined
  • PaymentDue
  • PaymentPastDue

Schema For Developers

Click here to email this section to your developer.

I thought I’d close out this article with some tips and tricks for developers.

This is not necessarily something you need to know as a marketing manager or somebody that doesn’t like anything that resembles code.

How to Read the Docs

As a developer, learning any sort of technology starts with learning how to read the documentation.

There are three main resources you want to keep your eye on:

Schema.org Docs

The schema.org documentation details every possible type/class defined by the standard and the configuration options you have.

Its documentation is not the most fun to read. Due to how it is laid out, you’ll become an expert in hitting the “Home” and “End” buttons on your keyboard.

That main gray table you see details all of the available properties/attributes you have the option of defining. 

If you scroll alllllllllllllllllllllllllllllll…the way to the bottom of the page, you’ll notice both sub-types (think sub-classes in programming terms) as well as code snippet examples.

Google Structured Data Docs

Google’s Structured Data Docs show all sorts of code examples as well as a look behind the curtain of what schema types Google cares about.

Navigating it is very straightforward. The panel on the left has everything you need to be listed under “structured data”.

Schema.org Github Issues

There will be times when you’re reading the docs and something is not clear enough to you. Chances are that someone had that very same confusion. The best place to gain clarity on these kinds of problems tends to be through browsing Github issues.

Microdata vs. RDFa vs. JSON-LD

The real debate here is Microdata AND RDFa vs. JSON-LD.

Microdata and RDFa are very similar. They follow an HTML/XML like syntax. It is also completely visible and makes use of your existing content.

JSON-LD, on the other hand, is just an invisible snippet of code, only processed by the bots that visit your site. The big difference is that you have to define everything over again. So, say you’re specifying the name of your blog post. You have to type it again rather than wrapping it around your visible content.

If that doesn’t make any sense, let me illustrate using two code snippets.

A microdata blog post:

<div itemscope itemtype="http://schema.org/NewsArticle">
    <h1 itemprop="headline">
      15 Electric Car Companies Taking Over The Market
    </h1>
    <p itemprop="articleBody">This is my article content.</p>
</div>

A JSON-LD blog post:

<h1>15 Electric Car Companies Taking Over The Market</h1>
<p>This is my article content.</p>

<script type="application/ld+json">
 {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "15 Electric Car Companies Taking Over The Market",
  "articleBody": "This is my article content."
  }
</script>

Final Notes

I hope this article has been a great help in teaching you about structured data and schema markup!

We’ve covered a lot of ground and went through many different schema types.

As Google implements more and more rich search result features, the importance of schema will only increase.

Let us know how you’re getting on with the implementation of schema using #fatjoeschema on Twitter @fatjoewho!

Daniel Trick
Daniel Trick

Head of Content

View All Posts

Become a Pro at SEO

Join 65,000 others and learn the secrets to SEO success with our weekly blog posts.

FATJOE CTA image