Schema Markup6 min read

When you search for something on Google, you are going to click on the result that will give you the results you want. Schema markup gives websites more options for clarification, using microdata, to organize your content and draw in more organic search visitors.

Is Schema Markup Important?

Spoiler: yes! Markup in general is crucial for online content. Even if you aren’t familiar with the most common markup language, you have at least heard of HyperText Markup Language (HTML). It is the current standard for website page structure. Basically, it makes it easier for content to be digested by robots – whether it be site crawlers, or just browsers trying to load up the page for your visitors. Humans are great at deciphering page hierarchy, but robots sometimes need some help. That’s where schema markup comes in.

How is Schema Markup Different From HTML?

Well, really, it’s not. I like to think of it as bonus features, or an extension to your already-existing markup code.

Here is a simple example of HTML:

<div>
<h1>Hello, World!</h1>
<p>My name is <span>Maryn</span>.</p>
<p>I want to create the entire universe.</p>
</div>

Here is the same example, modified with schema markup:

<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Hello, World!</h1>
<p>My name is <span itemprop="author">Maryn</span>.</p>
<p itemprop="description">I want to create the entire universe.</p>
</div>

This Seems Like A Lot of Work…

…and it is. Schema markup can take a lot of time to write initially. However, it takes a lot of the guess-work out of search engine crawlers, and it can prettify the information to potential visitors. The ultimate goal is to be able to write your HTML from the group up with relevant microdata. If you are using WordPress, there are already some plugins out there that help you write microdata to your posts, so it will take less time to implement. Your site SERP entry will look more appealing than a site result without schema markup. Don’t believe me? If you search for your favorite movie, which result are you more likely to click through:

SERP entry with site navigation schema markup
SERP entry without schema markup

How Does Schema Affect SEO?

Well, it doesn’t – at least, not explicitly. It doesn’t bring your results up higher in search results, or offer your page for people looking for similar products. It has been shown to improve click-through rates compared to websites that don’t use microdata. There is some speculation going around about how schema markup might just be the next big ranking factor, but there are no verifications on those claims just yet. However, Google, as well as other search engines, love the schema project, and Schema.org is planning to continue evolving for the next several years. If you want to stay ahead of the game, implement now.

Get Started

Now that we kind of have an idea of what schema markup does, let’s take a look at how to actually use it. Of course, you can read the official documentation, but you’re already here, so maybe just open that up to a new tab and look at it later.

Vocabulary

Alright, class, let’s look at some new terms, shall we? You don’t necessarily have to add microdata to each individual page on your website, since it doesn’t matter directly for SEO. However, since it helps a lot with SERP click-through rates, you might want to add these to specific elements across your website that you think people will be interested in clicking.

itemscope

You want site crawlers to pick up on certain elements of your page. For example, this might be a product or a review. The itemscope is going to tell these robots that the marked-up container is one of these things. Here is the example given on the official documentation:

schema markup itemscope example

itemtype

Now, the robot needs to know what the itemscope actually contains. Here is a full list of supported schema types, but you can also kind of create your own by creating an extension. To get an idea of what is available, you can create itemscoped itemtypes of a recipe, an event, a business, a review, a product, or an offer. There are a lot more options available.

schema markup itemtype example

itemprop

To clarify your item even further, it helps to give attributes to individual elements in your container. The official documentation gives a complete list of supported properties. For example, you might want to include the author of a book, the address of your business, or the rating of a review. These marked-down elements are going to stand out in your search results.

schema markup itemprop example

Schema Markup Example: Reviews

My professor specifically asked me to cover how reviews would look in schema markup. So let’s add a review to our page! On my client’s site, this is what their current review page looks like, as well as the current code. Even though a human might look at it and say “Oh, these are quotes by people who have used this service”, a site-crawler might just glaze over it as generic text content. Let’s change that.

reviews example without microdata

To make this a little more robot-friendly, let’s add the itemscope to the <p> elements, as well as the itemtype="http://schema.org/Review" and itemprop="review". We also want to establish the authors, and their review descriptions. We should restructure a little bit so that the hierarchy makes more sense. Now our code should look a little better.

reviews example with microdata

Testing Your Microdata

Now that you have your elements efficiently marked-down, you need to make sure you’ve done it correctly. Luckily, Google has their own Structured Data Testing Tool, which is super easy to use and understand. I’ve put in the review example from before to see what we can improve.

structured data testing tool

Looks like we forgot to add in what they’ve reviewed. Quite an easy fix, just need to add a scoped product or service element and it should be good. But for the sake of this post and my presentation, I think everything is fine.

Closing Remarks

I believe that schema markup will help filter out search results in the near future. It will help to allow websites and companies to write for humans, but keep clean parsing available for site crawlers and robots. Markup itself isn’t a new idea, but a schema markup that is more up-to-date and encourages encapsulation is exactly what we need in the web development field.

However, it does depend on the content of your website. On my clients’ site, I can definitely see use for these elements. On my own personal site, it’s a little harder to figure out what makes sense and what doesn’t, as far as scoping is concerned. I’m excited to see how this project grows. I definitely encourage front-end folks to learn it, namely copywriters, SEO teams, and developers. It would just make search results a lot easier to look through.

 

love,
maryn


 

Leave a Reply

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