What is Gmail Markup and How to Use It?

Gmail Markup uses schema.org structured data to enhance emails by enabling quick actions and highlighting important information directly in the inbox. This allows users to interact with emails such as checking into a flight, confirming an event, or tracking an order without opening the email fully or clicking external links..

Example Use Case:

If you send a flight booking confirmation email, Gmail Markup can display a “Check-In” button inside the email, allowing users to check in directly from their inbox.

Types of Actions & Interactive Cards

Gmail supports various actions and interactive cards, which allow different types of user interactions:

For a full list of supported actions, refer to Gmail Markup Documentation.

Using JSON-LD and Microdata in Gmail Markup

1. JSON-LD Format (Recommended) -

JSON-LD is the preferred format as it allows structured data to be included in a <script> tag inside the email - <script type="application/ld+json">

This format supports multiple predefined structures that help you customize the JSON object to display the data as required.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "John Doe",
  "jobTitle": "Graduate research assistant",
  "affiliation": "University of Dreams",
  "additionalName": "Johnny",
  "url": "http://www.example.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Peach Drive",
    "addressLocality": "Wonderland",
    "addressRegion": "Georgia"
  }
}
</script>

2. Microdata

Microdata consists of name-value pairs, called items, which are defined according to a specific vocabulary. These pairs help organize and structure the data within the email to make it easier for Gmail to display key information.

<section itemscope itemtype="http://schema.org/Person">
    Hello, my name is
    <span itemprop="name">John Doe</span>, I am a
    <span itemprop="jobTitle">Graduate research assistant</span>
    at the
    <span itemprop="affiliation">University of Dreams</span>
    My friends call me
    <span itemprop="additionalName">Johnny</span>
    You can visit my homepage at
    <a href="http://www.example.com.com" itemprop="url">www.example.com</a>
    <section
      itemprop="address"
      itemscope
      itemtype="http://schema.org/PostalAddress">
      I live at
      <span itemprop="streetAddress">1234 Peach Drive</span>
      <span itemprop="addressLocality">Warner Robins</span>
      <span itemprop="addressRegion">Georgia</span>.
    </section>
  </section>

Both formats require DateTime values to be in the ISO 8601 format, like this: '2013-02-14T13:15:03-08:00' (YYYY-MM-DDTHH:mm:ssZ).

Testing Gmail Markup

1. To ensure proper functionality, test your markup using the following methods:

   1. Send a Test Email:

      • Send an email from your Gmail account to the same Gmail account.

      • Refer to the Google Developers Guide for step-by-step testing.

      • Use the Google Markup Tester to check your structured data: Google Markup Tester.

   Whitelisting Process

   There is a whitelisting process, similar to AMP Emails, where Google verifies the schema we send. Once the schema is verified and whitelisted, the highlights and actions will be visible in the email.
   

   For more details on the whitelisting process, refer to this link
   

   By following this simple step, you can easily design your interactive email template using Gmail markup.