Le balisage d'e-mails repose sur des données structurées dans les e-mails. Gmail est compatible avec les formats JSON-LD et microdonnées. Vous pouvez utiliser l'un ou l'autre format pour baliser les informations dans un e-mail. Cela permet à Google de comprendre les champs et de fournir aux utilisateurs des résultats de recherche, des actions et des fiches pertinents. Par exemple, si l'e-mail concerne une réservation d'événement, vous pouvez annoter l'heure de début, le lieu, le nombre de billets et tout autre détail définissant la réservation.
Votre premier balisage
Supposons que vous soyez responsable de l'envoi des billets Google I/O aux participants et que vous souhaitiez baliser les informations sémantiques dans ces e-mails. Au minimum, votre e-mail de confirmation de billet contient du code HTML semblable à ce qui suit :
<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>
Vous pouvez ajouter des informations structurées n'importe où dans l'élément <body> du code HTML de l'e-mail, dans l'un des formats acceptés. Les blocs de code suivants montrent à quoi ressemble l'e-mail balisé :
JSON-LD
<html>
<body>
<script type="application/ld+json">
{
"@context": "https://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>
Dear John, thanks for booking your Google I/O ticket with us.
</p>
<p>
BOOKING DETAILS<br/>
Reservation number: IO12345<br/>
Order for: John Smith<br/>
Event: Google I/O 2013<br/>
Start time: May 15th 2013 8:00am PST<br/>
Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103<br/>
</p>
</body>
</html>
Microdonnées
<html>
<body>
<div itemscope itemtype="https://schema.org/EventReservation">
<meta itemprop="reservationNumber" content="IO12345"/>
<div itemprop="underName" itemscope itemtype="https://schema.org/Person">
<meta itemprop="name" content="John Smith"/>
</div>
<div itemprop="reservationFor" itemscope itemtype="https://schema.org/Event">
<meta itemprop="name" content="Google I/O 2013"/>
<time itemprop="startDate" datetime="2013-05-15T08:30:00-08:00"/>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<meta itemprop="name" content="Moscone Center"/>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="800 Howard St."/>
<meta itemprop="addressLocality" content="San Francisco"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="postalCode" content="94103"/>
<meta itemprop="addressCountry" content="US"/>
</div>
</div>
</div>
</div>
<p>
Dear John, thanks for booking your Google I/O ticket with us.
</p>
<p>
BOOKING DETAILS<br/>
Reservation number: IO12345<br/>
Order for: John Smith<br/>
Event: Google I/O 2013<br/>
Start time: May 15th 2013 8:00am PST<br/>
Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103<br/>
</p>
</body>
</html>
Microdonnées (intégrées)
<html>
<body>
<p>
Dear John, thanks for booking your Google I/O ticket with us.
</p>
<p itemscope itemtype="https://schema.org/EventReservation">
BOOKING DETAILS<br/>
Reservation number: <span itemprop="reservationNumber">IO12345</span><br/>
Order for: <span itemprop="underName" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">John Smith</span>
</span><br/>
<div itemprop="reservationFor" itemscope itemtype="https://schema.org/Event">
Event: <span itemprop="name">Google I/O 2013</span><br/>
<time itemprop="startDate" datetime="2013-05-15T08:30:00-08:00">Start time: May 15th 2013 8:00am PST</time><br/>
Venue: <span itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="name">Moscone Center</span>
<span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">800 Howard St.</span>,
<span itemprop="addressLocality">San Francisco</span>,
<span itemprop="addressRegion">CA</span>,
<span itemprop="postalCode">94103</span>,
<span itemprop="addressCountry">US</span>
</span>
</span>
</div>
</p>
</body>
</html>
L'e-mail précédent contient l'ensemble minimal d'informations permettant de définir une réservation d'événement. Vous pouvez baliser d'autres détails dans vos e-mails pour améliorer l'expérience utilisateur. Par exemple, la propriété ticketToken de l'objet FlightReservation vous permet d'ajouter une image de code-barres, comme un code QR, qui peut être incluse dans une carte d'embarquement.
Pour en savoir plus sur tous les types acceptés et leurs propriétés, consultez la documentation de référence sur les types de balisage.