How to Use Google’s Structured Data Highlighter to Markup Your Site

August 8, 2013

It used to be that you needed a web developer to modify your site’s code in order to add structured data tags — and in more advanced cases, you probably still do.

However, for simple semantic tagging of common things like a title and image, Google built a handy tool that helps webmasters tag basic fields on sets of pages throughout the site… without ever having to touch the code.

This neat little tool is called Data Highlighter.

You can use it to markup:

Articles

Events

Local Businesses

Movies

Products

Restaurants

Software Applications

TV episodes

It’s free and you can start using it right now. We’ll walk you through the Data Highlighter tool step-by-step below.

Benefits of Using Structured Data

By tagging certain data fields on your site’s pages, you can potentially improve the look of your site’s listings in the search engine results pages.

In the context of a search results page, snippets help break up search listings by providing contrast. This can help draw user attention and increase click through rates and traffic, as we’ve covered previously in several posts about the authorship tag.

How to Use the Structured Data Highlighter

Step 1

Login to Google Webmaster Tools and look for the Data Highlighter, found under the Search Appearance section on the left sidebar.

Step 2

Click the “Start Highlighting” button to begin tagging pages on your site. A screen will pop-up and will prompt you to enter a URL of a page typically found on your site. Start with groups of pages that have similar layouts, such as an individual blog post.

Step 3

Using the drop down menu, select the type of information you want to highlight. In this example, I’m going to add tags to a blog post, so I would choose “Articles” from the menu.

Then you have the option to tag only the page of the URL you entered, or that page and others like it. If these pages are similar in nature, it makes sense to tag multiple pages at once.

Step 4

Now it’s time to start highlighting and tagging! All you have to do is take your cursor and select or hover over areas of the page, and a list of tags will appear. Select the tag that corresponds with the piece of data that you’re highlighting.

This will now appear in the right sidebar to show you a list of the data items you’ve added tags to.

If you accidentally tagged something incorrectly, you can remove a tag by clicking the “X” to the right of the data item. Continue doing this for the page. Once you’ve added all of the tags, hit “Done.” Now you can create a page set for similar pages. Again, we chose to add tags to the individual blog post, so all of our blog posts will have the same data fields: title, author, blog category, date, image, and so forth.

Once you’ve created the page set, the Data Highlighter will ask you to review the suggested tags and fix any mistakes. Go through your pages, and if anything is incorrect, remove the tag on the right side, and re-tag appropriately.

Here’s an example of when the Data Highlighter got it wrong:

I removed all of the suggested tags and re-tagged the page:

You may have to review several pages to help Google detect the correct pattern for the pages on your site.

Tips

If the page doesn’t fit in the page set that you’ve created, you can opt to remove the page

If there is a warning symbol next to the data item, but the item is correctly tagged, you can remove the warning

Step 5

Once you’ve finished tagging sample pages, you’re ready for the final review of the data.

Data Highlighter will present you with a random sample of pages for you to look over and make sure the tags correspond to the correct data fields.

Once you’ve done that, hit “Publish!”

The published data set now appears on the dashboard.

You can create multiple page sets for other content on your site. Just hit the “Start Highlighting” button again and repeat the process.

Conclusion

It may take a few days for data to start appearing in your Webmaster Tools account, but you should start seeing data populate in the dashboard of Google Webmaster Tools once Google crawls your site.

Remember, the Data Highlighter doesn’t actually add any code to your pages. The tool is simply to help Google interpret the data. If you have the resources to add schema tags to your pages, that’s probably your best option for implementing structured data properly. You can always start with the Data Highlighter and work your way toward modifying code once you’ve had a chance to collect data and test different scenarios.

For a full list of available HTML schema tags, head over to Schema.org.

Overall, the Data Highlighter is very intuitive and easy to use. It can be a little clunky at first while Google tries to figure out the data fields in your page sets, but with a little patience, you can markup your articles, events, products, and more in no time. Have you used the data highlighter tool yet? Tell us about your experiences in the comments below.

Cypress North

We are a small group of developers, marketers and designers who are experts in their field. We work hard to surpass our clients’ goals; word-of-mouth is our best friend. Our unique expertise in both internet marketing and development allows us to accomplish projects that others simply can’t. If you are looking to choose the steak over the sizzle, you’re in the right place.

each type of structured data gets displayed differently I assume. So for reviews of restaurants, it display it like your screenshots. But for event listings it is a bit different. I’m wondering if you know of how each type of structured data might appear in the results. Events, Products, Software Applications etc