About Structured Data Markup Helper

Structured Data Markup Helper shows you how to update your site so that Google—and potentially other companies' products—can understand the data it contains. Once Google understands the data on your site, your data can be presented more attractively and in new ways. In addition if you send HTML-formatted email to your customers, Markup Helper can show you how to change your email templates so GMail can present the data in your email in new and useful ways.

For example:

  • If you mark up the events on your site, the next time Google crawls your site the event data will be available for rich snippets on search results pages:

    Rich snippet for a page with multiple events.

  • If an airline marks up an email about flight reservations, GMail can display a rich snippet for the reserved flights:

    Gmail snippet for a flight reservation.

How do I tell Google about my data?

There are just a few steps needed to tell Google about the data on your site:

  1. Show Markup Helper an example of a page on your site.
  2. Use your mouse to tag the data on the page. For example, you can tag the name, date, and location of a concert that a page describes.
  3. When you've finished tagging, Markup Helper shows schema.org markup for the data you tagged.
  4. Add schema.org markup to the pages on your site. Use Markup Helper's markup as an example to follow.

The next time Google crawls your site, Google uses your markup to understand the data on your site. 

The process for HTML-formatted email is similar:

  1. Paste an email template into Markup Helper.
  2. Tag the data in Markup Helper.
  3. Use Markup Helper's markup as an example for marking up your own email templates.
  4. When a user receives a marked-up email in GMail, GMail can present the data in new and useful ways.

What is schema.org?

schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a common vocabulary for describing the data on the web. If you add schema.org markup to your HTML pages, many companies and products—including Google search—will understand the data on your site. Likewise, if you add schema.org markup to your HTML-formatted email, other email products in addition to GMail might understand the data.

You can use different types of markup to describe your data with the schema.org vocabulary. Markup Helper can show you how to use microdata and JSON-LD.

For more information about schema.org, see schema.org FAQ.

What is microdata and JSON-LD markup?

Microdata and JSON-LD are two different ways to mark up your data using the schema.org vocabulary. It's best to choose either microdata or JSON-LD and avoid using both types on a single page or email. Google prefers microdata for web content.

Microdata

Microdata uses HTML tags and attributes to define data. For example, here's some HTML that describes an event:

<div> 
  Come hear the Tiny Tim Tribute Band, live in concert on 
  July 6, 2013 at the beautiful Regency Theater!
</div>
    

And here's the same HTML with microdata markup:

<div itemscope itemtype="http://schema.org/Event"> 
  Come hear the 
  <span itemprop="name">Tiny Tim Tribute Band</span>, 
  live in concert on 
  <span itemprop="startDate" 
  content="2013-07-06>July 6, 2013</span> 
  at the beautiful
  <span itemprop="location" itemscope 
    itemtype="http://schema.org/Place"> 
    <span itemprop="name">Regency Theater</span>!
  </span>
</div>
    

See About microdata for more information.

JSON-LD

JSON-LD uses a JavaScript object in your HTML page to define data. For example, here's JSON-LD that describes an event:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "Slim Whitman Tribute",
  "startDate" : "2013-07-06",
  "location" : {
    "@type" : "Place",
    "name" : "Hollywood Bowl"
  }
}
</script>
    

See JSON-LD for more information.

What about my existing markup?

Markup Helper ignores any existing markup in the example page or email that you tag. So if you tag some text that is already identified by markup, Markup Helper will go ahead and add additional markup for the tag.

Details about Markup Helper's markup.

When adding microdata, Markup Helper's preference is to add markup to existing HTML elements. For example, if you tag <h4>My Event</h4>, Markup Helper adds microdata like this to your example:
<h4 itemprop="name">My Event</h4>

When needed, Markup Helper will wrap your tagged text in a <span> element and add microdata to the span. If adding a span element would break the DOM, Markup Helper will add microdata to the page's <head> element.

Google keeps your marked up example for a month after your last access, so if you bookmark your example, you can come back to Structured Data Markup Helper and change or add to it. If you don't revisit the example for more than a month, Google will eventually delete it.

Do you have feedback about Structured Data Markup Helper? Tell us your thoughts on the Webmaster Tools forum for structured data.