メールのマークアップは、メール内の構造化データを使用して機能します。Gmail は JSON-LD と microdata の両方をサポートしており、どちらもメールの情報をマークアップできます。これにより、Google がフィールドを理解し、関連性の高い検索結果、アクション、カードをユーザーに提供できます。たとえば、イベントの予約に関するメールであれば、開始時間、会場、チケット数など、予約を定義するすべての情報にアノテーションを付けることができます。
最初のマークアップ
たとえば、Google I/O 2013 のチケットを参加者に送信する責任があり、メールにマークアップ セマンティック情報を使用するとします。少なくとも、チケット確認メールに次のような HTML が含まれています。
<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>
このメールアドレスは簡単にマークアップできます。メール本文の関連する情報は、メールの HTML の body 内の任意の場所に、サポートされている形式のいずれかに対応する構造化された形式で追加できます。次のコードブロックは、マークアップされたメールアドレスを示しています。
JSON-LD
<html>
<body>
<script type="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>
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>
microdata
<html>
<body>
<div itemscope itemtype="http://schema.org/EventReservation">
<meta itemprop="reservationNumber" content="IO12345"/>
<div itemprop="underName" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="John Smith"/>
</div>
<div itemprop="reservationFor" itemscope itemtype="http://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="http://schema.org/Place">
<meta itemprop="name" content="Moscone Center"/>
<div itemprop="address" itemscope itemtype="http://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>
microdata（インライン）
<html>
<body>
<p>
Dear John, thanks for booking your Google I/O ticket with us.
</p>
<p itemscope itemtype="http://schema.org/EventReservation">
BOOKING DETAILS<br/>
Reservation number: <span itemprop="reservationNumber">IO12345</span><br/>
Order for: <span itemprop="underName" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Smith</span>
</span><br/>
<div itemprop="reservationFor" itemscope itemtype="http://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="http://schema.org/Place">
<span itemprop="name">Moscone Center</span>
<span itemprop="address" itemscope itemtype="http://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>
上記のメールには、イベントの予約を定義するために必要な最小限の情報が含まれています。メール内のその他の情報をマークアップすることで、ユーザー エクスペリエンスを改善できます。たとえば、FlightReservation オブジェクトの ticketToken プロパティを使用すると、搭乗券カードに含めることができる QR コードなどのバーコード画像を追加できます。
サポートされているすべてのタイプとそのプロパティについては、リファレンス ガイドをご覧ください。