In one of our previous articles I explained how you can add structured data to your web pages via microdata, microformats or RDFa. Google recently launched a tool to help with this task, called the Structured Data Markup Helper, and this article will help you understand its various features.
What is Structured Data?
I've already explained structured data in the SEO Session, but for those of you who missed it, here’s a short recap:
Search engines have a hard time deciphering the content of a web page. Some elements that might seem obvious for humans can be problematic for search engines. Implementing structured data will help them understand your content.
Search engines can use this information to generate rich snippets; small pieces of information which appear in the search results. Try searching for a recipe in Google - you will probably see rich snippets in the form of star-ratings, number of reviews, thumbnails and author pictures.
Structured data is extra (perfectly valid) information that can be added to the HTML markup of a page. There are three types of structured data: microdata, microformats and RDFa. The Structured Data Markup Helper is based on the microdata markup.
Getting Started
Let’s start adding some structured data to our page. You can find this tool at google.com/webmasters/markup-helper/ or in Google Webmaster Tools under Other Resources > Structured Data Markup Helper.
You’ll see two tabs in the middle of the page: a website and an email tab. The tool can be used for emails that contain certain types of reservations (more information about structured data in emails can be found in the article Embedding Schemas in Emails). The website tag has several data types, such as:
- Articles
- Events
- Local businesses
- Movies
- Products
- Restaurants
- Software applications
- TV episodes
There are plenty of other data types that can be used, for example Landmarks, Books, Reviews, etc. but those are not yet available in this tool. A complete list of all data types can be found on schema.org.
Let's use a local furniture store as an example, called ‘Meubelen Gené’ (Gené Furniture). In the tool I selected ‘local business’ as a data type and entered the URL of the page I wanted to tag (http://meubelengene.be/). Alternatively I could paste a piece of HTML code that can be used for tagging.
Start Tagging
When you’ve hit the ‘start tagging’ button, Google will load the page into the tool. Because the website is written in Dutch, I’m going to start by indicating that the page is written in a different language. Hit the cog wheel in the top right corner and select ‘Settings’. Choose the correct site language and (optionally) a different data format.
Let’s take a look at the various elements of this tool. On the left you’ll see a visual representation of the URL, on the right the structured data information. As you can see in the right sidebar, a ‘name’ is required, hence a great starting point for our task.
To start tagging your content, simply select the element with your cursor (in this case the name of the business - Meubelen Gené). In the pop-up menu you can select the correct property. Once you tag an element, it will be added to the right sidebar.
If you accidentally tagged the wrong element or used the wrong data type, you can remove the tag by clicking the ‘clear tag’ button. In case you've really made a mess of your tags, remove all the tagged information by clicking the cog wheel in the top right corner and selecting ‘clear all tags from this page’.
For tags that can’t be highlighted on the page (perhaps because it’s implicit data or simply missing) you can use the ‘missing tags’ function. This is how you can add a URL, for example. Simply add it manually via the missing tags feature.
Some of the tags you’ll find in this tool can be a bit ambiguous. If you need help understanding the various tags and properties, click on the question mark icon. You’ll be redirected to the corresponding schema.org page where you’ll find more information.
Creating the HTML
Have you tagged all the elements of your page? Great! Now it’s time to implement the microdata in our code. Hit the ‘create HTML’ button when you’re ready.
In the right sidebar you’ll see the code of the page. The microdata is highlighted, making it easy to quickly see the changes. If you want, you can download the HTML file via the ‘download’ button. This file can be used as a guide to help you implement structured data on your website.
Pros and Cons
There are several reasons why you should and shouldn’t use this tool. Here are some pros and cons:
First of all, as it’s a visual tool, it’s very easy to use. Simply select the element on the page and add it to the appropriate property. You don’t need to worry about selecting and implementing the correct markup. This makes the Structured Data Markup Helper very user-friendly.
Unfortunately, the selection of data types is very limited. You can choose between eight data types while there are probably ten times as many that can be used. Webmasters who require more specific data types will still have to search schema.org.
The last disadvantage of this tool is the absence of a knowledge transfer. Because the tool does all the ‘hard work’, the user doesn’t get to know the markup, practical details and fundamentals of structured data. Understanding structured data is essential to implementing it correctly.
Conclusion
Structured data is a very useful addition to any website, and Google's Markup Helper is a great way to introduce yourself to the concept if you haven't already. If you have any questions, let's hear them in the comments!
