O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Fazer anotações em e-mails na guia "Promoções"

As anotações de e-mail dão vida às mensagens na guia "Promoções" do Gmail com recursos como imagens, ofertas e datas de validade.

Ao anotar e-mails, os usuários do Gmail podem visualizar e interagir com suas promoções diretamente na caixa de entrada. Na guia "Promoções", os usuários podem clicar no texto ou na imagem anotada para saber mais sobre a promoção sem precisar abrir o e-mail.

Esta página explica como anotar e-mails usando JSON-LD e microdados. Para saber mais sobre a marcação de e-mails, consulte o Guia de introdução guide. Para conferir uma lista de campos de marcação que podem ser usados em anotações de e-mail, acesse a documentação de referência.

Criar anotações de e-mail

É possível anotar e-mails para mostrar os seguintes recursos na guia "Promoções":

Criar um carrossel de produtos
Criar uma prévia de imagem única
Criar uma anotação de oferta
Criar um card de oferta

As seções a seguir explicam como criar cada tipo de anotação de e-mail.

Criar um carrossel de produtos

Os carrosséis de produtos mostram várias prévias de imagens para uma promoção, como as seguintes:

Um e-mail promocional que mostra um carrossel com três prévias de imagens de ofertas de meias.

É possível incluir até 10 prévias de imagens em um carrossel, e cada imagem precisa ser exclusiva.

Para criar um carrossel de produtos:

Na plataforma de e-mail de marketing, crie um e-mail e abra o editor de HTML.

Na seção head, adicione uma tag script. Para cada imagem no carrossel de produtos, adicione um PromotionCard objeto:

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>

Microdados

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

Para cada objeto PromotionCard, substitua os valores a seguir. Para as propriedades opcionais, é possível incluir um valor ou omitir a propriedade do código.

IMAGE_URL: o URL da imagem no formato PNG ou JPEG, como https://www.example.com/image.png. As proporções aceitas são 4:5, 1:1 e 1, 91:1. Para carrosséis de produtos, cada imagem precisa ter um URL exclusivo e usar a mesma proporção.
PROMO_URL: o URL da promoção. Quando os usuários clicam na imagem na guia "Promoções", eles acessam esse URL.
HEADLINE (opcional): uma descrição de uma ou duas linhas da promoção que aparece abaixo da imagem de prévia.
PRICE (opcional): o preço da promoção.
PRICE_CURRENCY (opcional): a moeda do preço no formato ISO 4217 de três letras, como USD. Determina o símbolo da moeda exibido com o price.
DISCOUNT_VALUE (opcional): o valor subtraído do price para mostrar um preço ajustado. O preço ajustado é mostrado ao lado do preço original.

Por exemplo, se o discountValue for 25, o price for 100, e o priceCurrency for USD, o preço ajustado será mostrado como $75.
POSITION (opcional): a posição do card no carrossel.

Na tag body, escreva a mensagem do e-mail.

Criar uma prévia de imagem única

As anotações de prévia de imagem única mostram uma imagem para destacar um produto importante na guia "Promoções" do Gmail, como a seguinte:

Um e-mail promocional que mostra sapatos, um selo de oferta de 20% e o código promocional 20TODAY.

É possível usar esse recurso para uma única imagem. Todos os destinatários precisam receber a mesma imagem e o mesmo URL. Para mais informações, consulte as Perguntas frequentes.

Para criar uma prévia de imagem única:

Na plataforma de e-mail de marketing, crie um e-mail e abra o editor de HTML.

Na seção head, adicione uma tag script que inclua o tipo de dados 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>

Microdados

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    // Build the single image preview:
    <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>

Substitua os valores a seguir. Para as propriedades opcionais, é possível incluir um valor ou omitir a propriedade do código.

IMAGE_URL: o URL da imagem de prévia no formato PNG ou JPEG, como https://www.example.com/image.png. A proporção aceita é 1,91:1.
PROMO_URL: quando os usuários clicam na image, o URL que direciona para a promoção.
HEADLINE (opcional): uma descrição de uma ou duas linhas da promoção que aparece abaixo da imagem de prévia.
PRICE (opcional): o preço da promoção.
PRICE_CURRENCY (opcional): a moeda do preço no formato ISO 4217 de três letras, como USD. Determina o símbolo da moeda exibido com o price.
DISCOUNT_VALUE (opcional): o valor subtraído do price para mostrar um preço ajustado. O preço ajustado é mostrado ao lado do preço original.

Por exemplo, se o discountValue for 25, o price for 100, e o priceCurrency for USD, o preço ajustado será mostrado como $75.

Na tag body, escreva a mensagem do e-mail.

Criar uma anotação de oferta

Destaque seu e-mail com uma anotação de oferta. Esse recurso adiciona um selo promocional diretamente ao e-mail na caixa de entrada, destacando informações importantes, como um código de desconto ou detalhes da oferta, ao lado da linha de assunto.

Um e-mail promocional que mostra um selo de oferta com 20% de desconto e o código promocional 20TODAY.

Para ativar as anotações de oferta, siga estas etapas:

Adicione o esquema ao HTML do e-mail: na plataforma de e-mail de marketing, abra o editor de HTML da campanha. Na seção head, adicione uma script tag que inclua o tipo de dados DiscountOffer com a seguinte estrutura:

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>

Microdados

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

Personalize as propriedades da anotação de oferta: atualize os valores no script para corresponder à sua promoção específica.

Valores obrigatórios:no exemplo de código, substitua pelo menos uma das variáveis a seguir para gerar uma anotação de oferta.
- DESCRIPTION: um resumo curto e atraente da sua oferta.
  - Exemplo: "20% de desconto em todo o site" ou "Compre um e ganhe outro sem custo financeiro".
- DISCOUNT_CODE: o código promocional que um usuário precisa aplicar na finalização da compra.
  - Exemplo: 20TODAY.
- END_DATE_TIME: a data e hora de término da promoção no formato ISO 8601.
  - Exemplo: 2025-09-23T18:44:37-07:00.
Propriedades altamente recomendadas :
- START_DATE_TIME: a data e hora de início da promoção no formato ISO 8601.
  - Exemplo: 2025-08-24T18:44:37-07:00.
Escreva a mensagem do e-mail: na tag <body>, escreva a mensagem e crie o layout do e-mail como de costume.
Valide e visualize a anotação de oferta: antes de enviar a campanha, valide o código e confira uma prévia da anotação de oferta.

Criar um card de oferta

Os cards de oferta são resumos visuais das suas promoções gerados pelo Gmail. Eles podem aparecer na guia "Promoções" e no próprio e-mail, às suas ofertas a máxima visibilidade.

Um e-mail promocional que mostra um card de oferta com 25% de desconto e o código promocional MAY2024.

Para ativar os cards de oferta, siga estas etapas:

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>

Microdados

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

Personalize as propriedades do card de oferta: atualize os valores no script para corresponder à sua promoção específica.

Valores obrigatórios :
- DESCRIPTION: um resumo curto e atraente da sua oferta.
  - Exemplo: "20% de desconto em todo o site" ou "Compre um e ganhe outro sem custo financeiro".
- Pelo menos um dos URLs a seguir:forneça um URL da página de ofertas, se disponível.
  - OFFER_PAGE_URL: o URL da página de destino dessa oferta específica. Isso cria um botão "Compre agora" (ou semelhante) no card de oferta. Se fornecido, o Gmail prefere o URL da página de ofertas.
  - MERCHANT_HOMEPAGE_URL: use essa opção apenas se uma página de ofertas específica não estiver disponível. Isso cria um link para sua página inicial principal.
Valores altamente recomendados :
- DISCOUNT_CODE: o código promocional que um usuário precisa aplicar na finalização da compra.
  - Exemplo: 20TODAY.
- START_DATE_TIME: a data e hora de início da promoção no formato ISO 8601.
  - Exemplo: 2025-08-24T18:44:37-07:00.
- END_DATE_TIME: a data e hora de término da promoção no formato ISO 8601.
  - Exemplo: 2025-09-23T18:44:37-07:00.
Escreva a mensagem do e-mail: na tag <body>, escreva a mensagem e crie o layout do e-mail como de costume.
Valide e visualize o card de oferta: antes de enviar a campanha, valide o código e confira uma prévia do card de oferta.

Próximas etapas

Consulte a documentação de referência para saber mais sobre os campos de marcação de e-mail disponíveis.
Saiba mais sobre as práticas recomendadas para anotações de e-mail.

Fazer anotações em e-mails na guia "Promoções" Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Criar anotações de e-mail

Criar um carrossel de produtos

JSON-LD

Microdados

Criar uma prévia de imagem única

JSON-LD

Microdados

Criar uma anotação de oferta

JSON-LD

Microdados

Criar um card de oferta

JSON-LD

Microdados

Próximas etapas

Fazer anotações em e-mails na guia "Promoções"