Get Started

Email markup uses structured data in emails to work. Gmail supports both JSON-LD and Microdata and you can use either of them to markup information in email. This lets Google understand the fields and provide the user with relevant search results, actions, and cards. For example, if the email is about an event reservation, you might want to annotate the start time, venue, number of tickets, and all other information that defines the reservation.

Your first markup

Let's say you are responsible for sending out Google I/O 2013 tickets to participants and you want to use markup semantic information in these emails. At the very least, your ticket confirmation email will contain HTML like the following:

<html>
 <body>
 <p>
 Dear John, thanks for booking your Google I/O ticket with us.
 </p>
 <p>
 BOOKING DETAILS<br/>
 Order for: John Smith<br/>
 Event: Google I/O 2013<br/>
 When: May 15th 2013 8:30am PST<br/>
 Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103<br/>
 Reservation number: IO12345<br/>
 </p>
 </body>
</html>

Marking up this email is very easy. Relevant pieces of information in the email body can be added anywhere inside the body of the email's HTML in a structured form corresponding to one of the supported formats. The following code block shows what the marked-up email looks like:

JSON-LD

<html>
<body>
<scripttype="application/ld+json">
{
"@context":"http://schema.org",
"@type":"EventReservation",
"reservationNumber":"IO12345",
"underName":{
"@type":"Person",
"name":"John Smith"
},
"reservationFor":{
"@type":"Event",
"name":"Google I/O 2013",
"startDate":"2013-05-15T08:30:00-08:00",
"location":{
"@type":"Place",
"name":"Moscone Center",
"address":{
"@type":"PostalAddress",
"streetAddress":"800 Howard St.",
"addressLocality":"San Francisco",
"addressRegion":"CA",
"postalCode":"94103",
"addressCountry":"US"
}
}
}
}
</script>
<p>
DearJohn,thanksforbookingyourGoogleI/Oticketwithus.
</p>
<p>
BOOKINGDETAILS<br/>
Reservationnumber:IO12345<br/>
Orderfor:JohnSmith<br/>
Event:GoogleI/O2013<br/>
Starttime:May15th20138:00amPST<br/>
Venue:MosconeCenter,800HowardSt.,SanFrancisco,CA94103<br/>
</p>
</body>
</html>

Microdata

<html>
<body>
<divitemscopeitemtype="http://schema.org/EventReservation">
<metaitemprop="reservationNumber"content="IO12345"/>
<divitemprop="underName"itemscopeitemtype="http://schema.org/Person">
<metaitemprop="name"content="John Smith"/>
</div>
<divitemprop="reservationFor"itemscopeitemtype="http://schema.org/Event">
<metaitemprop="name"content="Google I/O 2013"/>
<timeitemprop="startDate"datetime="2013-05-15T08:30:00-08:00"/>
<divitemprop="location"itemscopeitemtype="http://schema.org/Place">
<metaitemprop="name"content="Moscone Center"/>
<divitemprop="address"itemscopeitemtype="http://schema.org/PostalAddress">
<metaitemprop="streetAddress"content="800 Howard St."/>
<metaitemprop="addressLocality"content="San Francisco"/>
<metaitemprop="addressRegion"content="CA"/>
<metaitemprop="postalCode"content="94103"/>
<metaitemprop="addressCountry"content="US"/>
</div>
</div>
</div>
</div>
<p>
DearJohn,thanksforbookingyourGoogleI/Oticketwithus.
</p>
<p>
BOOKINGDETAILS<br/>
Reservationnumber:IO12345<br/>
Orderfor:JohnSmith<br/>
Event:GoogleI/O2013<br/>
Starttime:May15th20138:00amPST<br/>
Venue:MosconeCenter,800HowardSt.,SanFrancisco,CA94103<br/>
</p>
</body>
</html>

Microdata (inline)

<html>
<body>
<p>
DearJohn,thanksforbookingyourGoogleI/Oticketwithus.
</p>
<pitemscopeitemtype="http://schema.org/EventReservation">
BOOKINGDETAILS<br/>
Reservationnumber:<spanitemprop="reservationNumber">IO12345</span><br/>
Orderfor:<spanitemprop="underName"itemscopeitemtype="http://schema.org/Person">
<spanitemprop="name">JohnSmith</span>
</span><br/>
<divitemprop="reservationFor"itemscopeitemtype="http://schema.org/Event">
Event:<spanitemprop="name">GoogleI/O2013</span><br/>
<timeitemprop="startDate"datetime="2013-05-15T08:30:00-08:00">Starttime:May15th20138:00amPST</time><br/>
Venue:<spanitemprop="location"itemscopeitemtype="http://schema.org/Place">
<spanitemprop="name">MosconeCenter</span>
<spanitemprop="address"itemscopeitemtype="http://schema.org/PostalAddress">
<spanitemprop="streetAddress">800HowardSt.</span>,
<spanitemprop="addressLocality">SanFrancisco</span>,
<spanitemprop="addressRegion">CA</span>,
<spanitemprop="postalCode">94103</span>,
<spanitemprop="addressCountry">US</span>
</span>
</span>
</div>
</p>
</body>
</html>

The above email contains the minimal set of information to define an event reservation. You can markup other pieces of information in your emails to improve the user experience. For instance, the ticketToken property of the FlightReservation object lets you add a barcode image, such as a QR code, that can be included in a boarding pass card.

To learn about all of the supported types and their properties, see the Reference guide.