Creating Rich Content Using Schema.org

Posted By Maddie Keogh on

In part three of this beginner’s blog series, I’m going to talk about structured content which is the final piece of the SEO puzzle. We’ve delved into how rich content improves your voice search results but this will also come from the effort you put into building your web pages using schema.org structured content. It is one of the most powerful forms of SEO available, however, it isn't that commonly used. 

What is Schema.org?

Here is a snippet from the website so you can get the low down on what it actually is:

Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended through a well-documented extension model. Over 10 million sites use Schema.org to markup their web pages and email messages. Many applications from Google, Microsoft, Pinterest, Yandex and others already use these vocabularies to power rich, extensible experiences.

Still confused? Well, basically structured content is providing the information (which they call microdata) for a search engine to better understand the content on your website.

How Do I Apply It to My Web Pages?

Applying it to your web pages isn’t actually as hard as you think. Let’s get into the “rules” for how you should use microdata, so then you can apply it to any product, service, interest or item on your website.

If you use an HTML editor, it’s easy to find what you’re looking for to start to itemise parts of your web pages for search engines to better understand your content. The schema.org page provides plenty of assistance with examples. Check out this page from schema.org for a start.

To put it simply - everything is an item. Your product, your service, your interest, your spoon, shoe or hairbrush. So every time you want to tell the search engine about one of your items, you will put some code to that part of the web page so the search engine can interpret your page with more details. You do this by stating the itemscope.

The itemscope is applied at the start of each item. Here's some plain text from the front end of a website that might sell hairbrushes:

Hairbrushes
XX brand hair brush is the best hairbrush to buy.
<image goes here>

Hairbrushes are a type of product. If you’re selling them on your website, by recommending the best type, it will position your website as the expert on hairbrushes and therefore, the best to look at and buy this product from.

So with your HTML editor, you would first locate this heading and content on hairbrushes.  Then you would start to convert the plain text (in terms of search engine legibility) into rich text or rich content (also known as structured content) by adding the type of item it is. You are now starting to structure your own content for the search engines to interpret with more ease.

This means that you will now have better search result listings because your content is more readable by the search engine to better display what the user is searching for.

So to do this, start by adding the type of item (itemtype) it is, in this case, it is a Product. More specifically, it is an Individual Product, which provides more specific provisions on top of what the Product schema provides. You’ll likely use this quite often unless there’s another specific Product schema that exists for your product (you would use that instead). You would add the following itemscope to the existing code to tell the search engine what type of item it is on the first line:

<div itemscope itemtype=“http://schema.org/IndividualProduct" itemid="#product">
Hairbrushes
XX brand hair brush is the best hairbrush to buy.
<image goes here>
Next, you want to explain more features, benefits or 'properties' of the Product. These are the details that you want to explain about the Product to the search engine. In this case, the Name, Brand, a Description and an Image of the Product. This is done using the code within a span "itemprop=" as follows:
<div itemscope itemtype=“http://schema.org/IndividualProduct">
<span itemprop=“name”>Hairbrushes</span>
<span itemprop=“brand”>XX brandname hair brush </span>
<span itemprop=“description”>is the best hairbrush to buy.</span>
<span itemprop=“image”><image goes here></span>
This sort of coding is fairly simple to do as long as you follow the schema rules. You can do this for each page or just focus on a featured product. This may result in your page or product being displayed as rich content in a search results page:

 

There is a lot more detail which you can provide properties on, such as serial number, manufacturer and colour. Take a look here to get a further idea about this. It is also possible to list additional item types and nest these within products or services to give more specific details depending on the content. Another option is to write structured content using JSON.

This is such a huge topic because you could basically pick any product or service and there will be a schema type on it. But we have to stop somewhere! Hopefully, this post has given you some interest in using schema.org to improve your search results. Now it’s time to go and have some fun with your content!

Tell us where to send your Prospectus