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").
- If you have complex date strings, or are having trouble tagging your dates, see Advanced date tagging.
- If you need to add information that is not visible in your page, see Add missing data.
- 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:
- For JSON-LD: Copy and paste the generated code into the body of your existing page.
- 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").
- If you have complex date strings, or are having trouble tagging your dates, see Advanced date tagging.
- If you need to add information that is not visible in your email, see Add missing data.
- 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 (
- 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.
- For JSON-LD: Copy and paste the generated code into the body of your email.
- 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.
) shows next to a tagged element, select the data next to the icon, review the tagging, and do one of the following:
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.
You can undo some or all of the tags Structured Data Markup Helper has created.
To clear a specific tag:
- Select on the tag in the example page or email.
- From the pop-up menu that displays after you select the tag, select Clear tag.
To clear all tags:
- Be careful: you cannot undo a clear all tags request. Instead, you'll need to start tagging again from scratch. If your content already has markup, Markup Helper will not remove the existing markup. Clearing all tags will only remove the tags that Markup Helper has added.
- Select the gear icon
.
- Select Clear all tags from this page.
.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.
- 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
- 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.
If your example content is missing data, such as the year of an event, you can specify a value. Structured Data Markup Helper will add markup for the value.
You can add missing data at any time, and you can change or delete it if needed.
To add, change, or delete missing data:
- Select Add missing tags at the bottom of the My Data Items column.
- Do any of the following:
- Add a value by selecting a tag from the Select a tag list. Then type the value in the text box. For example, select Category and type Irish Traditional Music.
- Delete existing data by selecting the X in a text box.
- Edit existing data by changing the value in the text box.
- Select Save.
Markup Helper displays the specified value under My Data Items.
Change the page language
Structured Data Markup Helper automatically detects the language of your example content so it can better understand the data on your page. If the markup that Markup Helper creates is incorrect, you can explicitly tell Markup Helper about the language you're using.
To manually specify the language:
-
Select the gear icon and select Settings.
- In the Settings popup, select a language from the Site language list.
- Select Save
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.
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.
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.
