התחל בעבודה

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

תג העיצוב הראשון

נניח שאתם אחראים לשלוח כרטיסים ל-Google I/O 2013 למשתתפים, ואתם רוצים להשתמש במידע סמנטי של רכיבי Markup באימיילים האלה. לפחות, הודעת האישור באימייל על הכרטיס תכלול קוד 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>

מיקרו נתונים

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

מיקרו נתונים (inline)

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

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

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