SEO

Structured Data & Schema Markup for Newbies

Several months ago, Wil wrote a blog post that highlighted (pun intended – I’m witty like that) the benefits of incorporating structured data on SERPs via the Google Highlighter Tool. Wil articulated some great reasons on why implementing structured data can be tremendously beneficial to users (and to the businesses they end up patronizing), but I wanted to post a follow up article that went one step further and supply a step-by-step guide to implementing this schema markup.

The Data Highlighter Tool is great for Google, but because it does not actually change the HTML of a site it will not render any additional information in Yahoo! or  Bing SERPs. Some time after Wil’s post was published those geniuses at Google came out with a user friendly schema markup tool that allows users to create the markup and download the code so it can be easily added to a site. This bad boy is called the Structured Data Markup Helper. All the search engines recognize schema, so any markup you add to the code on a page will appear in all SERPs, regardless of search engine.

Here’s a step-by-step guide on how to use this tool.

Step One

Start by entering a data type and the url or HTML of the page you want to mark up. Choose what type of markup you’d like to implement (i.e. products, events, articles, etc). In this example, I’ll be using SEER’s “Breaking Down Silos” event we hosted in May.

step one

Step Two

After you click “Start Tagging” it will take you to a page that is divided into two parts. On the left you’ll see a rendering of the url you entered on the previous page, and on the right you’ll see the available tags you can use to mark up the data. Google also includes a handy instruction bubble telling you to highlight the data on the left to add it to the schema markup.

step two

Step Three

On the left side of the page, start highlighting the first part of data you want to include in the markup. For example, the event name. Once you highlight some content, a drop down box will appear with all of the schema markup that’s available for use.

step three

Step Four

Click on “Name” and it will appear under “My Data Items.”

step 4

Step Five

Highlight the date, and you can either enter it manually or choose the “Auto Detect” feature that Google has so thoughtfully included. If you elect to add the date and time manually you’ll find that option under “Advanced.”

step six

Step Six

Continue highlighting all the data that you would like to include on your schema markup, and it will appear under “My Data Items” on the right side of the page.

Step Seven

Google also gives you the option to “Add Missing Tags” under the “My Data Items” on the right hand side of the page. This allows you to add any additional data that is not included as content on the page. (Although as a best practice for optimal user interface you should probably include all data relevant to the event on the page, url aside.) If the price is not listed on the page and you have multiple prices, simply list them as a range when adding missing tags, because at this point Google does not allow you to add more than one price (for events anyway).

step 7

Step Eight

Once you have finished tagging all the data you want to include on the markup, click on the “Create HTML” in the upper right hand corner of “My Data Items.”

step nine

Step Nine

This will give you a rendering of the HTML code for your page with the schema markup included and highlighted. You can then download the entire document or manually add the markup to the individual pages.

step ten

Step Ten

If you would like to test your site to see how it looks, click on “Finish” and an option to “Test your structured data” will appear. This popup window also gives you the option to learn more about all possible schema markups that can be used (many of which the Structured Data Markup Helper does not offer as an option).

step11

Step Eleven

Click on the “Structured Data Testing Tool” link and it will bring you to a page that gives you the option of entering a url or the HTML. If you have not edited the HTML yet, the HTML option is a great way to check for bugs before making the code live. Sometimes it will give you a preview of how your site will look on the SERP, but it depends on the search query people use. TL;DR: this tool is best for ensuring that your data is correctly marked up.

step12

I hope this guide was helpful to you. Feel free to spend 15 minutes marking up pages and proceed to tell your boss you spent hours slaving over this meticulous process so you can take the rest of the day off.

true story meme

 

If anyone has other tools related to schema markup and structured data please post them in the comments below. After all, who doesn’t love new tools that make our lives easier?