이메일 마크업은 이메일에 구조화된 데이터를 사용합니다. Gmail은 JSON-LD와 마이크로데이터를 모두 지원하며, 둘 중 하나를 사용하여 이메일의 정보를 마크업할 수 있습니다. 이렇게 하면 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>
마이크로데이터
<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>
마이크로데이터 (인라인)
<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 코드)를 추가할 수 있습니다.
지원되는 모든 유형과 그 속성에 대한 자세한 내용은 참조 가이드를 확인하세요.