Schema Markup for Emails: Using Structured Data with Gmail
While email marketers may have mixed feelings about campaigns that land in the Gmail Promotions tab, the senders who are using Schema markup know that it may give them an advantage.
What if you could get important campaigns to rise to the top of a subscriber’s inbox? Can you imagine sticking a clickable call to action (CTA) in the subject line? How about if you could showcase products in an interactive carousel before a customer even opens the email?
All of that and more is possible with structured data from Schema.org in Gmail – but only in the Promotions tab. Let’s take a closer look.
Table of content
What is Schema markup or structured data?
Back in 2011, Google partnered with Bing, Yahoo!, and Yandex to launch a community initiative that brought structured data to web pages. Structured data is standardized vocabulary that provides information concerning elements of a web page. Essentially, Schema markup is metadata about what’s found on the page. Social sites like Facebook and LinkedIn use Open Graph metatags in a similar way.
You’ve probably heard Schema markup mentioned in connection with Google search. It helps search engines understand the content of a web page. For example, structured data can identify the author of an article or define what type of an article you’re publishing (news article, government report, satirical story, sponsored content, etc.).
Schema structured data could also tell the search engine when the content is a recipe, an FAQ page, a job posting, or a video. That’s just to name a few possibilities. Those who practice SEO often add structured data to web pages to improve visibility on search engines. It helps brands get what are known as featured snippets in search results.
Schema markup works for emails too. And it has the potential to create a cohesive experience for Gmail users across other Google products.
How is structured data used in Gmail?
The structured data used to enhance emails in Gmail is actually linked data known as JSON-LD. Gmail says it supports JSON-LD data that’s embedded in HTML document based on the context of schema.org. Gmail can also use microdata to embed machine-readable data in HTML documents. Microdata specification also relies on the same, shared Schema vocabulary as JSON-LD.
Whatever method is chosen, the markup is used to enhance the recipient’s experience in the Promotions tab. So, the goal is to make the inbox more engaging – especially for customers. But it also makes email more efficient. Gmail users can get right to the action they need to take at the inbox level, meaning they don’t have to open the message.
Common ways to use Schema markup in Gmail
There are many different use cases for Schema structured data in Gmail. The way it benefits your email marketing efforts will depend on your industry, audience, and what you want to accomplish. Here are some basic explanations of structured data usage in Gmail.
Go-to actions: This makes it possible to add a clickable CTA in an email subject line. A Go-to action in Gmail could take a subscriber directly to a landing page, their shopping cart, to a page where they can track a package, or take many other actions outside the inbox.
Here’s sample markup in JSON-LD for a Go-to action that encourages contacts to click a CTA and watch a movie:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"url": "https://watch-movies.com/watch?movieId=abc123",
"name": "Watch movie"
},
"description": "Watch the 'Avengers' movie online"
}
</script>
One-click actions: Also known as In-app actions, these allow a Gmail user to take a specific action without leaving the inbox. Like Go-to actions, One-click actions also create a clickable element in the email subject line. They can be used for confirmations or approvals as well as saving things from the email, such as offer codes, or adding things to queues and playlists.
Here’s sample markup in JSON-LD for a One-click action to approve an expense report:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ConfirmAction",
"name": "Approve Expense",
"handler": {
"@type": "HttpActionHandler",
"url": "https://myexpenses.com/approve?expenseId=abc123"
}
},
"description": "Approval request for John's $10.13 expense for office supplies"
}
</script>
Orders: The basic markup for Orders helps Gmail understand the content, enabling it to prioritize order confirmations messages, potentially bringing them to the top. Schema markup in Gmail can also enhance transactional emails with Highlights. This helps surface important information before the message is opened. You can add a button/action to view the order as well as markup for billing information. Beyond that, there is markup for Parcel Delivery and shipping info as well as Invoice Schema markup.
Here’s sample markup for a basic order confirmation markup in JSON-LD:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Order",
"merchant": {
"@type": "Organization",
"name": "Amazon.com"
},
"orderNumber": "123-4567890-1234567",
"priceCurrency": "USD",
"price": "29.99",
"acceptedOffer": {
"@type": "Offer",
"itemOffered": {
"@type": "Product",
"name": "Google Chromecast"
},
"price": "29.99",
"priceCurrency": "USD",
"eligibleQuantity": {
"@type": "QuantitativeValue",
"value": "1"
}
}
}
</script>
Reservations: Schema markup for reservations are also shown as Highlights rather than Actions. Highlights put the focus on important, time-sensitive information such as flight departures, restaurant reservation times, and hotel check-ins. You can also use this type of structured data for Event Reservations that require tickets or virtual events like webinars. Reservation markup can also let your contacts add events to their Google calendars.
Here’s sample markup for a basic restaurant reservation in JSON-LD:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "FoodEstablishmentReservation",
"reservationNumber": "OT12345",
"reservationStatus": "http://schema.org/Confirmed",
"underName": {
"@type": "Person",
"name": "John Smith"
},
"reservationFor": {
"@type": "FoodEstablishment",
"name": "Wagamama",
"address": {
"@type": "PostalAddress",
"streetAddress": "1 Tavistock Street",
"addressLocality": "London",
"addressRegion": "Greater London",
"postalCode": "WC2E 7PG",
"addressCountry": "United Kingdom"
}
},
"startTime": "2027-04-10T08:00:00+00:00",
"partySize": "2"
}
</script>
Watch the video from Google below for more information and ideas around using structured data with Schema markup.
Registering and testing Schema markup for email
Before you dive right in and start adding Schema markup to email, you’ll need to let Google know about your plans. Senders are required to register with Google to get things approved and working.
There are some important requirements to consider. That includes having SPF and/or DKIM authentication set up. You’ll also need to have a history of sending at least 100 emails a day to Gmail accounts for a few weeks. And in general, you should have a good sender reputation with a low spam complaint rate.
Gmail also provides a few ways for you to test and validate whether your Schema markup is working as expected. For starters, you can send emails with structured data to your own Gmail address to yourself (From: you@gmail.com To: you@gmail.com) and it should work. Note: You’ll still need email authentication for this.
Google also offers tools to help you write and validate your Schema markup:
- Use the Structured Data Markup Helper for guidance formatting tags for different purposes.
- Use the Email Markup Tester to paste in your email HTML and validate that structured data is working.
How to annotate emails in the Gmail Promotions tab
We’re not done yet! When it comes to email promotions, there’s even more you can do to enhance your campaigns. Here, we are talking about email annotations for Gmail. This type of structured data markup lets you add imagery, badges, and promo codes at the inbox level.
Currently, there are two main ways to annotate emails in the Promotions tab: Deal Annotations and Product carousels. Both of these features get coded into the head section of an HTML email. Be aware that Google says a variety of factors may impact whether your annotations are visible to every Gmail user on your list.
A Deal Annotation, also called a deal badge, can display key promotional information such as the discount/offer, coupon code, and expiration date. Here’s an example from Google and one we whipped up for Email on Acid when this feature was announced.
As you can see, in addition to the discount, promo code, and expiration date, the inbox display also includes a cropped hero image. Check out Google’s best practices for email annotations to learn more about how to set these up effectively.
Here’s some sample JSON-LD for a deal badge:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="application/ld+json">
[{
"@context": "http://schema.org/",
"@type": "DiscountOffer",
"description": "DESCRIPTION"
"discountCode": "DISCOUNT_CODE",
"availabilityStarts": "START_DATE_TIME",
"availabilityEnds": "END_DATE_TIME"
}]
</script>
</head>
<body>
// The message of your email
</body>
</html>
Product carousels are the newest addition to Gmail annotations. They allow senders to display up to 10 images at the inbox level of the Promotions tab. Until recently, this feature was only available to a select subset of high-volume senders. However, Gmail has opened it up to anyone who is on Google’s Allowlist.
This is obviously a cool feature for ecommerce brands. But there could be other applications to experiment with here as well. Maybe you could feature newsletter content in a carousel or headshots of speakers at an event.
Here’s some sample JSON-LD for a product carousel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="application/ld+json">
[
// Build the first image preview in your product carousel:
{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "IMAGE_URL1",
"url": "PROMO_URL1",
// Optionally, include the following PromotionCard properties:
"headline": "HEADLINE1",
"price": PRICE1,
"priceCurrency": "PRICE_CURRENCY1",
"discountValue": DISCOUNT_VALUE1
},
// Build the second image preview in your product carousel:
{
"@context": "http://schema.org/",
"@type": "PromotionCard",
"image": "IMAGE_URL2",
"url": "PROMO_URL2"
// Optionally, include the following PromotionCard properties:
"headline": "HEADLINE2",
"price": PRICE2,
"priceCurrency": "PRICE_CURRENCY2",
"discountValue": DISCOUNT_VALUE2
},
// To include more image previews, add additional PromotionCard objects.
// You can include up to 10 image previews in a product carousel.
]
</script>
</head>
<body>
// The message of your email
</body>
</html>
Some of the tags above are optional. For example, you don’t have to include a price or discount value if you only wanted to display an image and headline with a link. That means you could try using the carousel for non-product purposes.
How do your campaigns look in Gmail?
For some senders, it may not be worth it to have an email developer use a ton Schema markup in promotional emails. But adding just a few of the basics could help you stand out. Take a look at your metrics and see how many contacts are opening emails in Gmail. If it’s not the top email client, it’s probably pretty close.
Will these sorts of additions be beneficial to your brand and subscribers? If so, Schema markup with structured data for the Promotions tab in Gmail may be a progressive enhancement you want to consider pursuing.
Of course, you still want to make sure your email campaigns look amazing when subscribers actually open them in Gmail or on Android devices. Email previews from Sinch Email on Acid let you see into the future. You’ll be able to test how your campaigns are rendered in more than 100 clients and devices, including Gmail in dark mode. Try us out free for seven days.
