Structured Data Markup Helper

The Structured Data Markup Helper helps you mark up elements on your web page so that Google can understand the data on the page. Once Google understands your page data more clearly, it can be presented more attractively and in new ways in Google Search. In addition if you send HTML-formatted email to your customers, Markup Helper can show you how to change your email templates so that Gmail can present the data to the user in new and useful ways.

Open the Structured Data Markup Helper

Examples:

Event: 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.
Email: If an email about your flight contains markup about your flight reservations, Gmail can display this information in your desktop client or your personal feed.

If you don't feel comfortable adding code to your website, you can try out the Data Highlighter instead.

If you're technically minded, learn about structured data and add markup to your site manually.

Mark up a web page or email

You can mark up elements in either an HTML web page or an HTML email.

Mark up a web page

Here is how to mark up elements in a web page.

Open the Structured Data Markup Helper.
Select the Website tab.
Choose the type of page that you are marking up. For example, a movie page or an event page. You can have multiple items on a single page, but we recommend that all items are of the same type (for example, all movies or all events)
Enter either the URL of an existing page or the raw page HTML. For a URL, be sure that the page is available to anyone without logging in. (You can test page access by opening an incognito window in Chrome and trying to visit your page. If you can reach it, you're fine.)
Select Start Tagging.
Highlight parts of the page with important information (for example, the start time on an event page), then identify the type of information in the dropdown that appears ("Start time").
1. If you have complex date strings, or are having trouble tagging your dates, see Advanced date tagging.
2. If you need to add information that is not visible in your page, see Add missing data.
3. If you need to remove a tag that Structured Data Markup Helper generated, see Remove tags.
Be sure to provide all information required for your specific data type. In the My Data Items pane you will see a list of all possible values for each item, with the required values labeled. For example, for an event you must provide an event name, location, and start date.
When you've finished tagging all the appropriate data on the page, select Create HTML to generate the page code. Choose an output format: the default is JSON-LD (preferred by Google), but you can also choose Microdata. Either copy and paste the code from the output window or select Download. How you use the code depends on the format:
1. For JSON-LD: Copy and paste the generated code into the body of your existing page.
2. For Microdata: Replace your page with the generated HTML.
To test your code, copy and paste the generated code into the Rich Result test. This testing tool will tell you about any missing fields that you must provide to help Google understand the page, and for some data types it can provide a preview of how your page might look like in Google Search Results.
It can take a few weeks for Google to find your new page code. If your data is crawled, complete, and correct, it can appear as rich results. If rich results aren't appearing for your site, see possible reasons why

Mark up an email

Here is how to mark up an HTML-formatted email:

Open the Structured Data Markup Helper.
Select the Email tab.
Choose the type of information you will mark up. For example, a bus reservation or product order.
Enter the HTML of your email.
Select Start Tagging.
Highlight parts of the email with important information (for example, the reservation number for a bus reservation), then select the information type in the dropdown that appears ("Reservation number").
1. If you have complex date strings, or are having trouble tagging your dates, see Advanced date tagging.
2. If you need to add information that is not visible in your email, see Add missing data.
3. If you need to remove a tag that Structured Data Markup Helper generated, see Remove tags.
Be sure to provide all information required for your specific data type. In the My Data Items pane you will see a list of all possible values, with the required values marked. If you do not provide all required values, Google will not be able to process the email.
If the alert icon () shows next to a tagged element, select the data next to the icon, review the tagging, and do one of the following:
- If the tagging is incorrect, select the X next to the data. Then re-tag the data.
- If the tagging is correct, select the alert icon itself () and select Clear warning.
When you've finished tagging, select Create HTML to generate the HTML that you should use for the email. The default is JSON-LD, because Google prefers JSON-LD, but you can also choose Microdata. Select Download or just copy and paste the generated HTML.
1. For JSON-LD: Copy and paste the generated code into the body of your email.
2. For Microdata: Replace your email with the generated HTML.
To test your code, send an email to a Gmail account or use the email schema validator.

Save and resume editing a page or email

To save your markup in the current state, bookmark the page in your browser. Structured Data Markup Helper will save your state for a month, including all markup values.

Remove tags

Advanced date tagging

Structured Data Markup Helper understands dates in many formats as long as the dates include month, day, and year. You can supply any missing data (such as the year) by adding missing data to the page set.

If your sample content displays dates in one piece (for example, June 4, 2012), it's recommended that you tag dates in one piece. The fewer tags you create, the faster your tagging will be and the more accurate Markup Helper will be.

Tag dates in one piece:

Start tagging data as described in Tag a page or Tag an email.
On the Tagger page, use the mouse to select a date. For example, select the following: June 4, 2012
Select Date > Date/time or range from the context menu that displays.
Markup Helper adds the date to the My Data Items column.
Finish tagging the page as described in Tag a page or Tag an email.

Tagging dates in separate pieces

Some content displays date information in separate pieces or uses labels to identify the separate date components. For example, a page that lists multiple events might display the month and year once at the top, and display specific days next to each event. If your content displays dates in separate pieces, you'll need to tag dates in separate pieces.

Note that Markup Helper does not understand dates that are both tagged in separate pieces and that specify a range (such as June 4-5 and 2012).

Tag dates in separate pieces:

Start tagging data as described in Tag a page or Tag an email.
On the Tagger page, use the mouse to select part of a date. For example, select the following: June
Select Date > Advanced > date piece from the context menu that displays. For example, select Date > Advanced > Month.
Markup Helper adds the date to the My Data Items column.
Continue tagging pieces of the date until you've tagged all of the data that's available for the date.
Finish tagging as described in Tag a page or Tag an email.

Examples of date tags

Here are some examples of dates you can tag:

A single date. For example, you can tag any of the following:
- June 4, 2012
- 4 June 2012
- 6/4/12 - Your tags can include other delimiters and four-digit years as well, such as 6-4-2012. When numerical dates are ambiguous, Google assumes that the first number is the month. For example, 6/4/12 is intrepreted as June 4, 2012, while 13/4/12 would be interpreted as April 13, 2012.
You can tag multiple dates on a page. For example, if you tag June 4, 2012 and June 6, 2012, the event will be intepreted as occuring twice: once on June 4th and once on June 6th.
A range of days. For example, June 4-7 2012
Note that delimiter between the beginning and ending days needs to be a dash (-).

Dates with times. For example, you can tag any of the following:
- June 4, 2012 3pm - a time followed by am or pm. Google uses normal business hours to interpet times not followed by am or pm. For example, 11 would be interpreted as 11am and 2 would be interpreted as 2pm.
- June 4, 2012 15:00 - military time
- June 4, 2012 3pm EST or June 4, 2012 3pm -5:00 - Times with a time zone or with a UTC/GMT offset.
- June 4, 2012 2-3pm or June 4-5, 2012 2-3pm - Time ranges with or without a date range.
Dates in separate pieces.You can use the advanced tagging option to tag the following separate pieces of text as a single date:
- Day: Tuesday, June 4 Year: 2013
- June 4 | Time: 7:30pm-9:30pm and 2012
Google does not recognize date ranges that have been split into multiple tags. For example, the following tags are not valid date tags:
- June 4-5 and 2012

Manually specify the date format

Markup Helper assumes that the dates in your content follow the formatting rules associated with the content's language. For example, if a page's language is en-US, Markup Helper assumes that 12-06-12 means December 6th, 2012. If a page's language is en-GB, Helper assumes that 12-06-12 means June 12th, 2012. Markup Helper automatically determines the page's language and therefore the date's formatting rules.

To override Markup Helper and specify a different date format:

Select the gear icon and select Settings.
In the Settings popup, select a format from the Date format list.
Select Save.

Add missing data

Change the page language

What is schema.org?

What are JSON-LD and microdata ?

JSON-LD and microdata are two different ways to mark up your data using the schema.org vocabulary. Google prefers JSON-LD for web content.

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>

When adding JSON-LD, Markup Helper prefers to add markup to existing HTML elements. For example, if you highlight an event coded as <h4>My Event</h4>, Markup Helper adds JSON-LD like this to your example:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "My event"
}
</script>

See JSON-LD for more information.

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.

What about my existing markup?

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

Choose a section to give feedback on

Was this helpful?

How can we improve it?

Structured Data Markup Helper

Mark up a web page or email

Mark up a web page

Mark up an email

Save and resume editing a page or email

Tagging dates in separate pieces

Examples of date tags

Manually specify the date format

Change the page language

Was this helpful?

Need more help?

Try these next steps:

What is the issue with this selection?

Share additional info or suggestions