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
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.
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.
The simplified HTML source of the webpage above looks like this:
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.
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:
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.
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:
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:
Defining Items and Properties With JSON-LD
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.
Types of Schema Markup
These are the most popular Schema.org markup types e-commerce websites use. Let’s look at them.
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.
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.
‘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.
‘Product’ is beneficial for e-commerce stores. When you tag your page with ‘product,’ search engines will display the details of your products.
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.
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.
- 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
- 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
The All in One Schema.org plugin also creates visual summaries at the end of your WordPress posts.
Schema & Structured Data for WP & AMP
- Supports up to 35 schema types
- Free and pro versions are available
- Easily add schema markup through a user interface
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.