เริ่มต้น

มาร์กอัปอีเมลใช้ Structured Data ในอีเมลเพื่อทํางาน 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>

การกำกับเนื้อหาอีเมลนี้เป็นเรื่องง่าย คุณสามารถเพิ่มข้อมูลที่เกี่ยวข้องในเนื้อหาอีเมลได้ทุกที่ภายใน body ของ HTML ของอีเมลในรูปแบบที่มีโครงสร้างซึ่งสอดคล้องกับรูปแบบที่รองรับ บล็อกโค้ดต่อไปนี้แสดงลักษณะของอีเมลที่มีการทำเครื่องหมาย

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>

อีเมลข้างต้นมีชุดข้อมูลขั้นต่ำในการกำหนดการจองกิจกรรม คุณมาร์กอัปข้อมูลอื่นๆ ในอีเมลเพื่อปรับปรุงประสบการณ์ของผู้ใช้ได้ ตัวอย่างเช่น พร็อพเพอร์ตี้ ticketToken ของออบเจ็กต์ FlightReservation ช่วยให้คุณเพิ่มรูปภาพบาร์โค้ด เช่น คิวอาร์โค้ด ซึ่งรวมอยู่ในการ์ดบอร์ดดิ้งพาสได้

ดูข้อมูลเกี่ยวกับประเภทและพร็อพเพอร์ตี้ที่รองรับทั้งหมดได้ที่คู่มืออ้างอิง