Beginners Guide to Structured Data or Schema Markup

Structured data or schema markup is a relatively new addition to the web world. However, it is increasingly important for website owners and managers to know about it and implement it correctly on their websites. Good implementation will help a website rank better in the search engine results and for more relevant phrases.

Executive Summary

This article has been written to introduce schema to both non-technical and technical staff.

Section 1 recaps the basics of organic search, search indexation and ‘bots’.

Section 2 explains what information schema contains, how it interacts with search bots and how it is used by Google to populate rich snippets and featured snippets.

Section 3 introduces the three methods of coding schema and explains why JSON-LD is the preferred method. It provides resources to help you build and test schema. Finally, it talks about creating code manually for a single page and the instances in which you should automate schema production.

Section 4 provides a few tips just for the coders.

1.0 Web Search Basics

You will probably have heard of things like html, css, php, Javascript and Ajax. All these are languages that are used to create different elements of a website. Most of this code is not visible to a human reader – it is hidden behind the scenes. However, it is the brains behind the webpage and controls form validation, hover over effects image sliders and the like.

Humans are not the only readers of websites though. Search engines like Google and Bing read websites too via their spidering ‘bots’. The bots are just programmes that search the internet to find websites, identify all their pages and read their content. They do this in order to work out what a webpage is about and how good it is. The bots record this information in a huge index. When a person makes a search on a search engine like Google, the term searched for is compared to this index and the best matching web pages are returned in the search results.

1.1 Bots Aren’t Too Bright

The search engine bots are not perfect at working out what a webpage is about. Most of a webpage’s code is normally taken up by non-unique elements like headers, footers, styling and social media widgets. In addition, there may be blocks of programming such as Javascript, which controls moving and interactive elements. The search engine bots have to be able to separate all that text and code from the web pages unique text and images. Once they have done that they have to understand what is being written about and exactly what is being said. They don’t always get it right as they have to make algorithmic judgements and decisions. When they get it wrong it means that your webpage may not be recorded in the index for the right search terms (meaning you can’t rank for them) and/or not given a high enough position in the index.

2.0 Schema To The Rescue

Structured data markup and code can be added to a webpage to tell the search bots exactly what the page topic and content is. Human readers won’t see the code, it is there specifically and only for the search engine bots. Firstly the bots can recognise the code easily so there is no risk of them missing the information. Secondly, it means that the bots don’t have to guess what a particular piece of text is referring to because you are you telling them in an unequivocal way.

The schema code will start by defining what the webpage is about, for example, a local business, company, person, place, thing, article or product. The schema will then go on to list relevant properties some of which are required. So for a local business the url, address and name are required but in addition, you can choose to include things like opening hours, phone numbers and GPS coordinates. You can’t just make up types of schema and associated properties. There is an agreed list which you must use. You can look up all available types and their properties at schema.org.

You can have several different blocks of schema on one page. If you are listing several products on a single page, each product can have its own schema. If your page covers several topics you can have a schema for each.

Note that you should not attempt to use schema to falsely manipulate the search results. It is likely the search bots will penalise websites that use these tactics.

If you implement schema properly it can also provide opportunities for your website and content to appear in Googles rich results and Featured Snippets. For this reason, it makes sense to ensure that the schema types that Google uses for its rich Results are implemented on your website where relevant; Local business, Article, Review, Video, TV & Movie, Music and Recipe. Appearing in rich & featured snippets has a large positive effect on click-through rate (CTR). For this reason, it is one of the primary drivers for schema implementation.

2.1 Rich Snippets

Rich snippets are organic search results that Google has enhanced by adding additional information to it. You may have seen a search box appear under some websites in the search results, see below, or yellow stars that indicate a review rating. These are examples of rich snippets, Google has found the onsite search or review rating and determined it is useful information to web users and therefore added it directly to the search results.

Rich Snippet Search Box

Example of a Rich Snippet Search Box

2.2 Featured Snippets

A featured snippet is separate to organic search results and appears above them. It is Googles attempt to answer your query on its search results page. As well as being first the featured snippet is larger than search results and it is highlighted by a border. See below for an example.

An Example of a Featured Snippet

An Example of a Featured Snippet

 

3.0 How Do I Code Schema

There are three ways to add schema code to a webpage; Microdata, RDFa or via JSON-LD snippet.

Microdata and RDFa work by adding additional markup to html elements in the same way css classes are coded.

So if we have this basic html on our webpage how would we code the schema?
Please download our Basic Schema Code Examples which shows you how you would mark up a basic section of html with the three different types of schema code. Notice that Microdata and RDFa can be inserted into the existing html tags in the same way as a css class or id. JSON-LD is different. It is totally independent of the original html so it has to be coded from scratch and added to the page in addition to the original block of html.

Although it might seem like JSON-LD is more complicated it is actually easier to automatically generate and because it is created separately to the rest of the webpage it is actually easier to manage schema implementation across a whole website. Since Google recommends implementation via JSON-LD you should try to use that in preference to the other methods.

PLEASE NOTE: html code does contain some structured data of its own. The html that codes lists, be they bulleted or numbered, is structured as is the html used to code tables. The search engine bots are able to clearly identify and read this html in the same way as they read schema. As a result content in tables and tags can appear in Featured Snippets even if there is no Microdata, RDfa or JSON-LD on the webpage. If you have tabulated data like weather reports, size conversion charts or similar it is worth checking that your html is optimal – have you differentiated headers and added the extra markup to make the tabulated data accessible? The higher the quality of this markup the better your chances of winning a Featured Snippet place.

 

3.1 Building & Testing Your Code

Here are some useful links that will help you write valid code and test it.

    • JSON-LD Schema Code Generator. This is very useful. It generates code for the following types; Local business, person, product, Event, Organisation, Website. You select the type from a drop down and then the tool presents you with a series of boxes which you can fill in with the relevant properties. Once you have finished, click a button and the valid code appears. You can just copy it and paste it into your webpage.
    • These generators are great for one-offs such as organisation or website schemas which will only appear on your homepage. However, if you want to apply schema to every product on a large e-commerce site or every article on a news website it simply will not be practical to generate the code manually for every product or page. In these cases, you need to write a programme that will automatically generate the schema code from the existing product or article content. There are lots of ways to do this. If you use a well known CMS like WordPress there are plugins that you can try. Alternatively, you can write your own code.
    • Once you have generated your code and added it to your webpage you should perform a final check to make sure that the bots can read it correctly. Google has a Schema Testing Tool – simply enter your webpage url and click a button. Google reads the page and returns all the schema code it has found with any errors or warnings.

     

    4.0 Notes For The Techies

    The nuts and bolts of implementing schema depend on how your site is built and exactly which schema types you want to use.

    1. Although JSON-LD is the recommended method microdata and RDFa can be very quick to implement globally via templates so they can be useful as an interim measure. For example, if you already have a page template with areas for titles and specific slots for different product features it can be very easy to simply add the markup to the right html tags. Having said that you should also be able to use the same templates to generate a block of JSON-LD once you have had time to learn the basic syntax. If in doubt just use the JSON-LD code generator (see section 3.1 for the link) as a template.
    2. When adding JSON-LD you can just past the code pretty much anywhere in the page head or body.
    3. You can use Google Tag Manager to add schema markup.
    4. WordPress does have a number of plugins which automatically add schema code to your page. The schema types available are quite restricted and in our experience, the results aren’t always reliable. However, it is an area that is developing quickly so we would expect to see the number and quality of schema plugins rapidly increase. Yoasts SEO plugin does have some schema handling and there is a plugin for Woocommerce installations. Sadly, the Advanced custom fields plugin (ACF) has not built in any handling of schema yet.

     

error: Content is protected