Jeremy Hickman, WordPress Website Designer 1200 627
Written by
Jeremy Hickman, WordPress Website Designer 310 310

Read it in 6 minutes

Topics
About the author

Jeremy Hickman is a freelance Web Designer and WordPress expert from West Sussex in the UK. With over 20 years' experience as a web designer, he also has a good level of development, marketing and SEO knowledge across both WordPress and HubSpot platforms.

https://jeremyhickman.co.uk

Follow Jeremy Hickman on Instagram

An often overlooked part of your website is Schema markup.  You won’t see it on your web pages, and neither will your website visitors, but it provides a great way for your website to stand out in search results. So what is Schema markup, and why is it important?

What is Schema markup?

Schema markup is a form of microdata. It is a semantic vocabulary of tags which are set out in full at schema.org.  You can add these schema tags to the HTML of your website.  Doing so will enhance the way that search engines see your content and represent it in search engine results pages (SERPs).  The Schema markup creates an enhanced description called a rich snippet which appears inline within search results.

Schema has been around since around 2011 and was created by a collaboration between Google, Bing, Yahoo and Yandex.  It was conceived as a way of helping search engines understand website content to provide more accurate search results.  This is especially helpful where the content within a webpage might otherwise be ambiguous.

How does Schema help to explain your website content?

The easiest way to explain this is with a practical example from schema.org.

Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string ‘Avatar’ in a heading 1 format. However, the HTML tag doesn’t give any information about what that text string means — ‘Avatar’ could refer to the hugely successful 3D movie, or it could refer to a type of profile picture — and this can make it more difficult for search engines to intelligently display relevant content to a user.

Schema.org

You can now understand how these hidden tags can help the search engines understand the context of otherwise ambiguous text strings.

What does Schema markup look like?

The Schema tags can be added to existing HTML to explain the context of your content.  In the following example, we’re displaying the headline of a blog post along with its author:

<div>
    Mary Makes it Easy: The new ultimate stress-free cookbook
    Mary Berry
</div>

You can see how this may be ambiguous to search engines.  It’s not clear which text string is the title (name) of the book, and which is the author.  With Schema markup, we explain the context as follows:

<div itemscope itemtype="https://schema.org/Book">
    <span itemprop="name">
        Mary Makes it Easy: The new ultimate stress-free cookbook
    </span>
    <span itemprop="author">
        Mary Berry
    </span>
</div>

You can go further by adding customer reviews.  You could add the following Schema markup within your product page content:

<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4</span>stars –
    <span itemprop="reviewCount">250</span>Reviews
</div>

Adding schema will enhance the rich snippet that is shown beneath the page title in SERPs.  This example shows the aggregate star rating, number of reviews, price and stock status:

This image shows an example search result including rich snippets added with Schema markup

Does Schema improve your search ranking?

There is no evidence that adding Schema markup will improve your search ranking.  What it will do is make your pages appear more impactful in SERPs, which in turn will help with click-through-rates, and a better user-experience generally.

Please note that adding Schema markup code doesn’t guarantee that Google will show your page with rich snippets like the example show above. Even if Schema markup is present, Google can sometimes choose to show your listing in a regular blue link format. We can supply Schema markup, but utlimately, Google will decide whether it wants to show rich snippets or not.

What should Schema be used for?

Schema can be used to mark up various pieces of content on your site, but is most often used to provide additional information about:

This list is certainly not exhaustive and you can see the full list of options available at Schema.org.  Each category has different properties that can be used to give further detail.  The earlier example of a book can include the title (‘name’), ‘author’, as well as even more detailed information such as ‘price’, or even ‘isbn’.  How many or few properties you use is up to you, and depends on how much detail you wish to provide to describe the item.

How to add Schema to your website

If you’re an experienced coder, you will find it relatively straightforward to add Schema markup directly to your page templates such as product pages, blog posts, and so on.

Some WordPress plugins such as Yoast SEO include built-in options to apply Scheme for you.

If you’re less experienced, why not try Google’s Structured Data Markup Helper Tool?  Using the tool you select your content type (article, event, etc), paste your URL and then click ‘Start Tagging’.  The tool will load your page and you can start tagging your content by selecting text and choosing the appropriate Schema tag for it (such as ‘name’, ‘author’ and so on).

When complete, click ‘Create HTML’ and you’ll be provided with your Schema ready to be added to your page either as JSON-LD (added to your page as a script) or as Microdata, as shown earlier in this article.

How make sure you have added Schema to your website correctly

There is plenty of really useful guidance at Schema.org.  There is information about the various Schema tags and how to apply them to your web pages.  Once you have done so, you can check your work by using the useful Google Structured Data Testing Tool.  Simply enter the URL to your page and the tool will check your Schema and report any errors, missing crucial items and may suggest other tags that you might want to add.

Conclusion

Hopefully, after reading this article, you will see the advantage of having Schema in place on your website.  It is easily overlooked but can help your website really stand out in SERPs.  A professional web design will find it straightforward to add Schema to your pages or templates, and should be doing this as already as a best practise.  Schema requires a little thought and effort, but is certainly worthwhile and nothing to be afraid of.

Let’s make you a great website!

Let’s make you a great website!

Let's talk →