How To Implement Schema Markup on Your Website From Scratch

Ranking high on the search engine result pages (SERPs) is crucial for the success of your business. But, a top-ranking page alone isn’t sufficient. You need to ensure people click on your webpage link on the SERPs.

Customers often just glance through the search results. That means you only get a few seconds to impress them.

Along with your webpage link, you need to present impressive snippets of information on the SERPs. Google calls them rich snippets. They are crucial to improve your search engine optimization (SEO) and click-through rate (CTR).

But how do you achieve rich snippets for your website?

To do that, you should create structured data on your webpage by using schema markup. If you don’t know what schema markup is, don’t worry. We’re going to cover everything you need to know to use it advantageously.

Here’s what you can expect:

The Basics of Schema Markup

A Closer Look at Schema.org Vocabulary and How To Implement It on Your Website

Types of Schema Markup

Writing and Validating Schema Markup

Final Thoughts: What Is Schema Markup and How To Implement It From Scratch

The Basics of Schema Markup

Search engines like Google index webpages to understand their content. They use advanced algorithms like natural language processing, but they don’t have a human-like capability to understand the contextual meaning.

If you help search engines understand your webpage better, it will improve your search presence. And that’s exactly what schema markup does.

With schema markup, you can:

  • Boost SEO: Search engines understand pages with schema markup better. Hence, it may increase search rankings. By presenting users with impressive rich snippets, it will also improve your CTR and website traffic.
  • Help customers: Search results with rich snippets help customers understand your products better. Getting more information from the SERPs also enhances user experience.
  • Create brand awareness: Schema markup helps highlight top products and services on the SERPs. It helps your brand stick in your customers’ minds.

But what is schema markup, exactly?

What Schema Markup Is

Schema markup consists of a set of keywords or HTML tags that help you define on-page content. It gives search engines information about the type of content on your webpage.

In essence, what schema markup does is create structured data on your webpage, which search engines render as rich snippets on the SERPs.

To implement schema markup, you need to incorporate the markup tags into the HTML source code of your webpage.

For instance, let’s assume you have a recipe website. In that case, you may want to tell search engines that your content is primarily recipes. You can use specific schema markup tags to do that.

Rich Snippet on SERP for a Popular Recipe Website
Screenshot

If you’ve used the visual editor on WordPress or any website builder tool before, you may have a working knowledge of HTML code.

If you haven’t, you should know that every webpage has an HTML source code. Consider the following blog post about The Godfather movie.

A Simple Webpage With Details of the Movie the Godfather
Screenshot

The simplified HTML source of the webpage above looks like this:

Simplified HTML Source Code of a Movie Review Webpage
Screenshot

As you can see, the HTML code tells the browser how to render the webpage. However, pure HTML code doesn’t help search engines understand the meaning of the webpage’s content. For that, website owners need to incorporate schema markup tags into their HTML code.

Now you know what schema markup is, but one question remains — how do search engines know which keywords to look for to understand the content?

Schema.org and Its Common Vocabulary

Major search engines like Google, Microsoft Bing, Yahoo! and Yandex have come together to define a standard. They have created a website, Schema.org, to define a set of content types and their properties.

Schema.org defines hundreds of content types to suit every website. All you need to do is incorporate them into your page’s HTML source code.

Although at first it may sound complicated, it’s simpler than it seems. To show you that, let’s have a more in-depth look at how to use schema markup vocabulary on your website.

A Closer Look at Schema.org Vocabulary and How To Implement It on Your Website

Before adding tags to your website’s HTML, you should know that Schema.org defines specific terms to describe the content on your webpage:

  • Item Scope: This tag encapsulates a particular part of your content that talks about a specific subject.
  • Item Type: This tag describes what’s the type of item encapsulated within an item scope. For a product page on a WordPress-based e-commerce store, the item type might be ‘product.’
  • Item Property: Describes the features of an item. For example, a product will have a name, make, brand and ratings.

There are also multiple ways to encode this information into your page’s HTML source. Just like we use human languages, we can use various programming languages or formats to encode schema data into HTML sources.

The formats are:

With that in mind, we’re going to show you how to implement schema markup in Microdata and JSON-LD.

Defining Items and Properties With Microdata

Microdata is an extension of HTML5 with some additional features.

Here’s how schema markup works with microdata:


Step1: Add All the Relevant Content to Your Webpage

Let’s take The Godfather movie blog post as an example. We have all the information relevant to the movie on this page.

A Simple Webpage With Details of the Movie the Godfather
Screenshot

Step 2: Edit Your HTML Code To Indicate the Item Type ‘Movie’

Now we need to tag the webpage. The simplified HTML code with no schema markup looks like this:

Simplified HTML Source Code of a Movie Review Webpage
Screenshot

Now, let’s add the schema markup tags itemscope and itemtype. But what does this schema markup do?

It tells the search engine that we are talking about a movie on this webpage.

Example Of Microdata Code Schema Markup For Movie Review
Screenshot

Step 3: Add Additional Properties to the itemtype

To produce a rich snippet, search engines need additional information. Let’s also add some itemprops like themovie’s name, director, genre, and trailer.

Here’s what the final HTML source code with Microdata schema markup looks like:

Example Of Microdata Code Schema Markup For a Movie Review
Screenshot

Step 4: Verify Your Results on Schema Markup Tester

Once you have written the schema markup data, you need to verify it. Here’s how this page may appear on the Google search results as a rich snippet:

Example of the Rich Snippet for a Movie Review
Screenshot

Defining Items and Properties With JSON-LD

Another option to write schema markup is JSON-LD. It’s a special extension of JavaScript that represents linked data.

Let’s see how our movie webpage can be tagged using JSON-LD. The keywords @context and @type are equivalents of itemscope and itemtype in Microdata.

JSON-LD Schema Markup Example Code
Screenshot

Types of Schema Markup

  • Place
  • Person
  • Review
  • Product
  • Store


These are the most popular Schema.org markup types e-commerce websites use. Let’s look at them. 

Place

This schema markup tells the search engines about a place, be it an e-commerce or local business. Whatever your business type, you’ll find a suitable type in Schema.org.

Example of Rich Snippet Generated by Place Schema Type
Screenshot

Person

If you are the face of your business, having a personal page about yourself on your website is a great idea to tag it with the ‘person’ schema markup type. You can tag your name, address, affiliation, education, brands, and awards.

Example of Rich Snippet Generated by Person Schema Type
Screenshot

Review

‘Review’ is helpful for product pages or review websites. If you have webpages with client reviews and star ratings, use this schema markup to tag your page.

Example of Rich Snippet Generated by Review Schema Type
Screenshot

Product

‘Product’ is beneficial for e-commerce stores. When you tag your page with ‘product,’  search engines will display the details of your products.

Example of Rich Snippet Generated by Product Schema Type
Screenshot

Store

If you own an e-commerce or physical store, you need to correctly tag your website with ‘store’ or one of its child data types. The properties of ‘store’ are address, opening hours, price range, and currencies accepted.

Example of Rich Snippet Generated by Store Schema Type
Screenshot

Writing and Validating Schema Markup

By now, you’re probably thinking that getting these impressive rich snippets for your website is a little complex.

But here’s the good news:

You don’t need to write the Microdata or JSON-LD code manually. There are several tools available online to add schema markups automatically.

Here’s what they are and how to implement schema markup with these tools.

Google Structured Data Markup Helper

This is a tool for anyone with a valid webpage, not necessarily a WordPress website.

Features include:

  • Free to use for anyone with a Google account
  • Based on a graphical user interface
  • Generates schema markup code in JSON-LD and Microdata

Here’s a quick demo of how to implement schema markup using Google’s structured data markup helper.

WordPress Plugins To Create Schema Markup

True to its feature of diverse plugins, WordPress’s business plan offers several schema markup plugins.

Here are two well-known plugins:

All in One Schema.org Rich Snippets

All in One Schema.org Rich Snippets WordPress Plugin
Screenshot
  • Available for free with WordPress’s business plan
  • It helps you add schema markup through a user interface on the blog editor page
  • Users need to fill in content type and properties, and the plugin creates schema code
All in One Schema.org Rich Snippets Plugin
Screenshot

The All in One Schema.org plugin also creates visual summaries at the end of your WordPress posts.

Webpage Summary Generated by All in One Schema.org Rich Snippets Plugin
Screenshot

Schema & Structured Data for WP & AMP

Schema & Structured Data for Wp & Amp Plugin
  • Supports up to 35 schema types
  • Free and pro versions are available
  • Easily add schema markup through a user interface
User Interface of Schema & Structured Data for Wp & Amp Plugin
Screenshot

Validating Schema Markup Code

Once you have written the schema markup code, you must verify it. The most popular tools to verify schema markup code are Google’s structured data testing tool, Google rich result test and schema markup validator from Schema.org.

Final Thoughts: What Is Schema Markup and How To Implement It From Scratch

Implementing schema markup on your website can significantly boost your SEO and help you succeed. To achieve impressive rich snippets for your website, you’ll need to incorporate unique HTML tags into your webpage’s source.

Despite its great benefits, many e-commerce owners shy away from implementing schema markup as it involves coding.

If you feel the same, you can always get SEO experts to help you. Check out Bluehost’s SEO tool kit today to kickstart schema markup implementation for your website.

Devin Sears
Devin Sears | Field Marketing Manager

Leave a comment

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