在“推广”标签页中为电子邮件添加注释

电子邮件注释通过图片、优惠和到期日期等功能，让“推广”标签页中的电子邮件消息更加生动。

当您为电子邮件添加注释后，Gmail 用户可以直接从收件箱中查看您的促销活动并与之互动。在“推广”标签页中，用户可以点击带注释的文本或图片，详细了解促销活动，而无需打开电子邮件。

本页介绍了如何使用 JSON-LD 和微数据为电子邮件添加注释。如需详细了解电子邮件标记，请查看入门指南。如需查看可在电子邮件注释中使用的标记字段列表，请访问参考文档。

构建电子邮件注释

您可以为电子邮件添加注释，以便在“推广”标签页中显示以下功能：

创建商品轮播
创建单张图片预览
创建优惠注释
创建优惠卡片

以下部分介绍了如何创建每种类型的电子邮件注释。

创建商品轮播

商品轮播会显示促销活动的多个图片预览，例如：

一封促销电子邮件，其中显示了一个轮播界面，包含三张袜子优惠的图片预览。

您可以在轮播中添加最多 10 张图片预览，并且每张图片都必须是唯一的。

如需创建商品轮播，请执行以下操作：

在您的营销邮件平台中，创建一封电子邮件并打开该电子邮件的 HTML 编辑器。

在 head 部分中，添加 script 标记。对于商品轮播中的每张图片，添加一个 PromotionCard 对象：

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [
        // Build the first image preview in your product carousel:
        {
          "@context": "http://schema.org/",
          "@type": "PromotionCard",
          "image": "IMAGE_URL1",
          "url": "PROMO_URL1",

          // Optionally, include the following PromotionCard properties:
          "headline": "HEADLINE1",
          "price": PRICE1,
          "priceCurrency": "PRICE_CURRENCY1",
          "discountValue": DISCOUNT_VALUE1,
          "position": POSITION
        },

        // Build the second image preview in your product carousel:
        {
          "@context": "http://schema.org/",
          "@type": "PromotionCard",
          "image": "IMAGE_URL2",
          "url": "PROMO_URL2",

          // Optionally, include the following PromotionCard properties:
          "headline": "HEADLINE2",
          "price": PRICE2,
          "priceCurrency": "PRICE_CURRENCY2",
          "discountValue": DISCOUNT_VALUE2,
          "position": POSITION
        }

        // To include more image previews, add additional PromotionCard objects.
        // You can include up to 10 image previews in a product carousel.

      ]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

微数据

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    // Build the first image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL1"/>
      <meta itemprop="url" content="PROMO_URL1"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE1"/>
      <meta itemprop="price" content="PRICE1"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY1"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE1"/>
      <meta itemprop="position" content="POSITION"/>
    </div>

    // Build the second image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL2"/>
      <meta itemprop="url" content="PROMO_URL2"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE2"/>
      <meta itemprop="price" content="PRICE2"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY2"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE2"/>
      <meta itemprop="position" content="POSITION"/>
    </div>

    // To include more image previews, add additional PromotionCard objects.
    // You can include up to 10 image previews in a product carousel.
  </head>

  <body>
    // The message of your email
  </body>
</html>

对于每个 PromotionCard 对象，替换以下值。对于可选属性，您可以添加值，也可以从代码中省略该属性。

IMAGE_URL：PNG 或 JPEG 格式的图片网址，例如 https://www.example.com/image.png。支持的宽高比为 4:5、1:1、1.91:1。对于商品轮播，每张图片都必须具有唯一的网址，并且使用相同的宽高比。
PROMO_URL：促销活动的网址。当用户从“推广”标签页点击图片时，系统会将其带到此网址。
HEADLINE （可选）：促销活动的 1-2 行说明，显示在预览图片下方。
PRICE（可选）：促销活动的价格。
PRICE_CURRENCY（可选）：价格的币种，采用由 3 个字母表示的 ISO 4217 格式，例如 USD。决定与 price 一起显示的币种符号。
DISCOUNT_VALUE （可选）：从 price 中减去的金额，用于显示调整后的价格。调整后的价格显示在原价旁边。

例如，如果 discountValue 为 25，price 为 100，并且 priceCurrency 为 USD，则调整后的价格显示为 $75。
POSITION （可选）：卡片在轮播中的位置。

在 body 标记中，撰写电子邮件的消息。

创建单张图片预览

单张图片预览注释会显示一张图片，以在 Gmail“推广”标签页中展示重要商品，例如：

一封促销电子邮件，其中显示了鞋子的图片、20% 的优惠徽章和促销代码 20TODAY

您可以将此功能用于单张图片。所有收件人都必须收到相同的图片和图片网址。如需了解详情，请参阅我们的常见问题解答文档。

如需创建单张图片预览，请执行以下操作：

在您的营销邮件平台中，创建一封电子邮件并打开该电子邮件的 HTML 编辑器。

在 head 部分中，添加一个 script 标记，其中包含数据类型 PromotionCard：

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "PromotionCard",
        "image": "IMAGE_URL",
        "url": "PROMO_URL",

        // Optionally, include the following PromotionCard properties:
        "headline": "HEADLINE",
        "price": PRICE,
        "priceCurrency": "PRICE_CURRENCY",
        "discountValue": DISCOUNT_VALUE
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

微数据

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    // Build the first image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL"/>
      <meta itemprop="url" content="PROMO_URL"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE"/>
      <meta itemprop="price" content="PRICE"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE"/>
    </div>

  </head>

  <body>
    // The message of your email
  </body>
</html>

替换以下值。对于可选属性，您可以添加值，也可以从代码中省略该属性。

IMAGE_URL：PNG 或 JPEG 格式的预览图片网址，例如 https://www.example.com/image.png。支持的宽高比为 1.91:1。
PROMO_URL：当用户点击 image 时，系统会将其带到促销活动的网址。
HEADLINE （可选）：促销活动的 1-2 行说明，显示在预览图片下方。
PRICE（可选）：促销活动的价格。
PRICE_CURRENCY（可选）：价格的币种，采用由 3 个字母表示的 ISO 4217 格式，例如 USD。决定与 price 一起显示的币种符号。
DISCOUNT_VALUE （可选）：从 price 中减去的金额，用于显示调整后的价格。调整后的价格显示在原价旁边。

例如，如果 discountValue 为 25，price 为 100，并且 priceCurrency 为 USD，则调整后的价格显示为 $75。

在 body 标记中，撰写电子邮件的消息。

创建优惠注释

借助优惠注释，让您的电子邮件脱颖而出。此功能可直接在收件箱中将促销徽章添加到您的电子邮件中，并在主题行旁边突出显示关键信息，例如折扣代码或优惠详情。

一封促销电子邮件，其中预览了 8 折优惠的特惠徽章和促销代码 20TODAY。

如需启用优惠注释，请按以下步骤操作：

将架构添加到营销邮件的 HTML：在您的营销电子邮件平台中，打开广告系列的 HTML 编辑器。在 head 部分中，添加一个 script 标记，其中包含数据类型 DiscountOffer，其结构如下：

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "DiscountOffer",
        "description": "DESCRIPTION",
        "discountCode": "DISCOUNT_CODE",
        "availabilityStarts": "START_DATE_TIME",
        "availabilityEnds": "END_DATE_TIME"
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

微数据

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <div itemscope itemtype="http://schema.org/DiscountOffer">
      <meta itemprop="description" content="DESCRIPTION"/>
      <meta itemprop="discountCode" content="DISCOUNT_CODE"/>
      <meta itemprop="availabilityStarts" content="START_DATE_TIME"/>
      <meta itemprop="availabilityEnds" content="END_DATE_TIME"/>
    </div>
  </head>

  <body>
    // The message of your email.
  </body>
</html>

自定义优惠注释属性：更新脚本中的值，使其与您的具体促销活动相符。

必填值 ：在示例代码中，替换至少一个 以下变量以生成优惠注释。
- DESCRIPTION：对优惠的简短而引人注目的摘要。
  - 示例：“全场八折”或“买一送一”。
- DISCOUNT_CODE：用户需要在结账时应用的促销代码。
  - 示例：20TODAY。
- END_DATE_TIME：促销活动的结束日期和时间，采用ISO 8601 格式。
  - 示例：2025-09-23T18:44:37-07:00。
强烈建议提供的属性 ：
- START_DATE_TIME：促销活动的开始日期和时间，采用 ISO 8601 格式。
  - 示例：2025-08-24T18:44:37-07:00。
撰写电子邮件消息：在 <body> 标记中，撰写电子邮件的消息并像平常一样设计布局。
验证并预览卡片：在发送广告系列之前，请验证您的代码并查看预览，了解您的优惠注释的显示效果。

创建优惠卡片

优惠卡片是 Gmail 生成的促销活动的可视化摘要。它们可以显示在“推广”标签页和电子邮件本身中，让您的优惠获得最大限度的曝光。

一封促销电子邮件，其中预览了可享 25% 折扣的特惠汽车以及促销代码 MAY2024。

如需启用优惠卡片，请按以下步骤操作：

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "DiscountOffer",
        "description": "DESCRIPTION",
        "discountCode": "DISCOUNT_CODE",
        "availabilityStarts": "START_DATE_TIME",
        "availabilityEnds": "END_DATE_TIME",
        "offerPageUrl": "OFFER_PAGE_URL",
        "merchantHomepageUrl": "MERCHANT_HOMEPAGE_URL"
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

微数据

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <div itemscope itemtype="http://schema.org/DiscountOffer">
      <meta itemprop="description" content="DESCRIPTION"/>
      <meta itemprop="discountCode" content="DISCOUNT_CODE"/>
      <meta itemprop="availabilityStarts" content="START_DATE_TIME"/>
      <meta itemprop="availabilityEnds" content="END_DATE_TIME"/>
      <meta itemprop="offerpageurl" content="OFFER_PAGE_URL"/>
      <meta itemprop="merchantHomepageUrl" content="MERCHANT_HOMEPAGE_URL"/>
    </div>
  </head>

  <body>
    // The message of your email.
  </body>
</html>

自定义优惠卡片属性：更新脚本中的值，使其与您的具体促销活动相符。

必填值 ：
- DESCRIPTION：对优惠的简短而引人注目的摘要。
  - 示例：“全场八折”或“买一送一”。
- 以下网址中至少一个 ：我们建议您提供优惠页面网址。
  - OFFER_PAGE_URL：此特定优惠着陆页的网址。这会在优惠卡片上创建一个“立即购买”（或类似）按钮。如果提供了此网址，我们会优先使用优惠页面网址。
  - MERCHANT_HOMEPAGE_URL：仅当没有特定优惠页面时才使用此网址。这会将用户链接到您的主首页。
强烈建议提供的值 ：
- DISCOUNT_CODE：用户需要在结账时应用的促销代码。
  - 示例：20TODAY。
- START_DATE_TIME：促销活动的开始日期和时间，采用 ISO 8601 格式。
  - 示例：2025-08-24T18:44:37-07:00。
- END_DATE_TIME：促销活动的结束日期和时间，采用ISO 8601 格式。
  - 示例：2025-09-23T18:44:37-07:00。
撰写电子邮件消息：在 <body> 标记中，撰写电子邮件的消息并像平常一样设计布局。
验证并预览卡片：在发送广告系列之前，请验证您的代码并查看预览，了解您的优惠注释的显示效果。

后续步骤

查看参考文档，了解可用的电子邮件标记字段。
了解电子邮件注释的最佳实践。

在“推广”标签页中为电子邮件添加注释 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

构建电子邮件注释

创建商品轮播

JSON-LD

微数据

创建单张图片预览

JSON-LD

微数据

创建优惠注释

JSON-LD

微数据

创建优惠卡片

JSON-LD

微数据

后续步骤

在“推广”标签页中为电子邮件添加注释