假设您负责向参与者发送 2013 年 Google I/O 大会门票,并且您想在这些电子邮件中使用标记语义信息。您的机票确认电子邮件至少会包含如下 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 内的任何位置,并采用支持的格式之一。以下代码块展示了标记后的电子邮件:
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2025-08-29。"],[],[],null,["# Get Started\n\nEmail markup uses structured data in emails to work. Gmail supports both [JSON-LD](/workspace/gmail/markup/reference/formats/json-ld) and [Microdata](/workspace/gmail/markup/reference/formats/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.\n\nYour first markup\n-----------------\n\nLet'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: \n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Order for: John Smith\u003cbr/\u003e\n Event: Google I/O 2013\u003cbr/\u003e\n When: May 15th 2013 8:30am PST\u003cbr/\u003e\n Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103\u003cbr/\u003e\n Reservation number: IO12345\u003cbr/\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nMarking 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: \n\n### JSON-LD\n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cscript type=\"application/ld+json\"\u003e\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"EventReservation\",\n \"reservationNumber\": \"IO12345\",\n \"underName\": {\n \"@type\": \"Person\",\n \"name\": \"John Smith\"\n },\n \"reservationFor\": {\n \"@type\": \"Event\",\n \"name\": \"Google I/O 2013\",\n \"startDate\": \"2013-05-15T08:30:00-08:00\",\n \"location\": {\n \"@type\": \"Place\",\n \"name\": \"Moscone Center\",\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"streetAddress\": \"800 Howard St.\",\n \"addressLocality\": \"San Francisco\",\n \"addressRegion\": \"CA\",\n \"postalCode\": \"94103\",\n \"addressCountry\": \"US\"\n }\n }\n }\n }\n \u003c/script\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Reservation number: IO12345\u003cbr/\u003e\n Order for: John Smith\u003cbr/\u003e\n Event: Google I/O 2013\u003cbr/\u003e\n Start time: May 15th 2013 8:00am PST\u003cbr/\u003e\n Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103\u003cbr/\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\n### Microdata\n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cdiv itemscope itemtype=\"http://schema.org/EventReservation\"\u003e\n \u003cmeta itemprop=\"reservationNumber\" content=\"IO12345\"/\u003e\n \u003cdiv itemprop=\"underName\" itemscope itemtype=\"http://schema.org/Person\"\u003e\n \u003cmeta itemprop=\"name\" content=\"John Smith\"/\u003e\n \u003c/div\u003e\n \u003cdiv itemprop=\"reservationFor\" itemscope itemtype=\"http://schema.org/Event\"\u003e\n \u003cmeta itemprop=\"name\" content=\"Google I/O 2013\"/\u003e\n \u003ctime itemprop=\"startDate\" datetime=\"2013-05-15T08:30:00-08:00\"/\u003e\n \u003cdiv itemprop=\"location\" itemscope itemtype=\"http://schema.org/Place\"\u003e\n \u003cmeta itemprop=\"name\" content=\"Moscone Center\"/\u003e\n \u003cdiv itemprop=\"address\" itemscope itemtype=\"http://schema.org/PostalAddress\"\u003e\n \u003cmeta itemprop=\"streetAddress\" content=\"800 Howard St.\"/\u003e\n \u003cmeta itemprop=\"addressLocality\" content=\"San Francisco\"/\u003e\n \u003cmeta itemprop=\"addressRegion\" content=\"CA\"/\u003e\n \u003cmeta itemprop=\"postalCode\" content=\"94103\"/\u003e\n \u003cmeta itemprop=\"addressCountry\" content=\"US\"/\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Reservation number: IO12345\u003cbr/\u003e\n Order for: John Smith\u003cbr/\u003e\n Event: Google I/O 2013\u003cbr/\u003e\n Start time: May 15th 2013 8:00am PST\u003cbr/\u003e\n Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103\u003cbr/\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\n### Microdata (inline)\n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp itemscope itemtype=\"http://schema.org/EventReservation\"\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Reservation number: \u003cspan itemprop=\"reservationNumber\"\u003eIO12345\u003c/span\u003e\u003cbr/\u003e\n Order for: \u003cspan itemprop=\"underName\" itemscope itemtype=\"http://schema.org/Person\"\u003e\n \u003cspan itemprop=\"name\"\u003eJohn Smith\u003c/span\u003e\n \u003c/span\u003e\u003cbr/\u003e\n \u003cdiv itemprop=\"reservationFor\" itemscope itemtype=\"http://schema.org/Event\"\u003e\n Event: \u003cspan itemprop=\"name\"\u003eGoogle I/O 2013\u003c/span\u003e\u003cbr/\u003e\n \u003ctime itemprop=\"startDate\" datetime=\"2013-05-15T08:30:00-08:00\"\u003eStart time: May 15th 2013 8:00am PST\u003c/time\u003e\u003cbr/\u003e\n Venue: \u003cspan itemprop=\"location\" itemscope itemtype=\"http://schema.org/Place\"\u003e\n \u003cspan itemprop=\"name\"\u003eMoscone Center\u003c/span\u003e\n \u003cspan itemprop=\"address\" itemscope itemtype=\"http://schema.org/PostalAddress\"\u003e\n \u003cspan itemprop=\"streetAddress\"\u003e800 Howard St.\u003c/span\u003e,\n \u003cspan itemprop=\"addressLocality\"\u003eSan Francisco\u003c/span\u003e,\n \u003cspan itemprop=\"addressRegion\"\u003eCA\u003c/span\u003e,\n \u003cspan itemprop=\"postalCode\"\u003e94103\u003c/span\u003e,\n \u003cspan itemprop=\"addressCountry\"\u003eUS\u003c/span\u003e\n \u003c/span\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nThe 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`](/workspace/gmail/markup/reference/flight-reservation) object lets you add a barcode image, such as a QR code, that can be included in a boarding pass card.\n\nTo learn about all of the supported types and their properties, see the [Reference guide](/workspace/gmail/markup/reference).\n| **Note:** Some of the schemas used by Google are still going through the standardization process of [schema.org](http://schema.org), and therefore, may change in the future. [Learn More](/workspace/gmail/markup/reference/schema-org-proposals)."]]