מתחילים

תגי עיצוב של אימייל מסתמכים על נתונים מובְנים באימיילים. ‫Gmail תומך ב-JSON-LD וב-Microdata. אפשר להשתמש בכל אחד מהפורמטים כדי לתייג מידע באימייל. כך Google יכולה להבין את השדות ולספק למשתמשים תוצאות חיפוש, פעולות וכרטיסים רלוונטיים. לדוגמה, אם האימייל הוא על הזמנה לאירוע, אפשר להוסיף הערות לגבי שעת ההתחלה, המקום, מספר הכרטיסים וכל פרט אחר שמגדיר את ההזמנה.

תגי העיצוב הראשונים

נניח שאתם אחראים לשליחת כרטיסים ל-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>

אפשר להוסיף מידע מובנה בכל מקום בתוך רכיב <body> של ה-HTML של האימייל, בכל אחד מהפורמטים הנתמכים. בלוקי הקוד הבאים מראים איך נראית הודעת האימייל עם התגיות:

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>

מיקרו נתונים

<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>

מיקרו נתונים (בתוך השורה)

<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>

האימייל שלמעלה מכיל את המידע המינימלי שנדרש כדי להגדיר הזמנה לאירוע. אפשר להוסיף תגי עיצוב לפרטים אחרים באימיילים כדי לשפר את חוויית המשתמש. לדוגמה, המאפיין ticketToken של האובייקט FlightReservation מאפשר להוסיף תמונה של ברקוד, כמו קוד QR, שאפשר לכלול בכרטיס עלייה למטוס.

מידע על כל הסוגים הנתמכים והמאפיינים שלהם זמין במאמר בנושא סוגי תגי עיצוב.