Gmail annotations let you add discount badges, product images, and offer details that appear before your email is opened. These visual elements help your campaigns stand out in Gmail's Promotions tab on mobile devices.

Before you start

Things you need to know:

Gmail annotations only appear in the Promotions tab on mobile Gmail apps.
You must apply to Gmail for approval before annotations appear. Learn more in Google's Promotions annotations documentation.
Annotations don't appear in test sends, only in live campaigns.
Gmail determines when and how to display annotations based on user engagement and other factors.
Desktop Gmail and other email clients don't display annotations.
In some cases, automatic annotation extraction can happen even if you don’t include the code listed below. This process is at Google’s discretion and cannot be controlled by the sender.

Types of Gmail annotations

You can add three types of annotations to your email campaigns:

Deals

Highlight special offers with discount badges that show the percentage or amount off. You can also include discount codes and expiry dates.

Single image

Display a single product image or promotional banner alongside your email preview.

Image carousel

Showcase multiple products with a scrollable carousel of up to 10 images. Each image can include product details like name, price, and discount information.

Add annotation code to your email campaign

Annotations use microdata markup that you add directly to your campaign HTML. The code must be included in your email before you send it.

Create a new email campaign or edit an existing campaign.
In EasyEditor, drag a text block onto your campaign canvas. Position it below the preheader. The preheader is the top block in your campaign.
Select the text block, then select the Edit the HTML icon on the text edit toolbar.
Paste your microdata annotation code into the text block.
Select SAVE.

Your annotation code is now embedded in the campaign.

Annotation code structure

Gmail annotations use schema.org microdata markup. Each annotation type requires specific properties:

Field	Description
image	URL of the hosted image (must be 1:1 aspect ratio for carousels)
url	Landing page URL for the product or offer
headline	Product or offer name
price	Price without currency symbols
priceCurrency	Three-letter currency code, for example, GBP or USD
discountValue	Discount amount (optional)
position	Image position in carousel (for carousels only)

Image carousels

For image carousels, create multiple div blocks and increment the position value for each block, 1, 2, 3, and so on.

Example annotation code

<div itemscope itemtype="http://schema.org/PromotionCard">
  <meta itemprop="image" content="https://example.com/product-image.jpg" />
  <meta itemprop="url" content="https://example.com/product-page" />
  <meta itemprop="headline" content="Summer Sale T-Shirt" />
  <meta itemprop="price" content="19.99" />
  <meta itemprop="priceCurrency" content="GBP" />
  <meta itemprop="discountValue" content="10" />
  <meta itemprop="position" content="1" />
</div>

Example annotation code for image carousels

<div itemscope itemtype="http://schema.org/PromotionCard">
  <meta itemprop="image" content="https://example.com/product-image.jpg" />
  <meta itemprop="url" content="https://example.com/product-page" />
  <meta itemprop="headline" content="Summer Sale T-Shirt" />
  <meta itemprop="price" content="19.99" />
  <meta itemprop="priceCurrency" content="GBP" />
  <meta itemprop="discountValue" content="10" />
  <meta itemprop="position" content="1" />
</div>

<div itemscope itemtype="http://schema.org/PromotionCard">
  <meta itemprop="image" content="https://example.com/product-image-2.jpg" />
  <meta itemprop="url" content="https://example.com/product-page-2" />
  <meta itemprop="headline" content="Summer Sale T-Shirt 2" />
  <meta itemprop="price" content="15.99" />
  <meta itemprop="priceCurrency" content="GBP" />
  <meta itemprop="discountValue" content="10" />
  <meta itemprop="position" content="2" />
</div>

Test your annotation code

Before sending your email campaign, you can validate your annotation code using Gmail's preview tool.

Copy your complete campaign source code.
Go to Gmail's Promotions Annotations Preview Tool.
Paste your campaign code into the preview tool.
Review how your annotations appear.

If your annotations don't display correctly, check that your code follows the required format and includes all necessary properties.

Image requirements

For best results with Gmail annotations, follow these guidelines:

Use a 1:1 aspect ratio (square images) for carousel images.
Images must be high-quality and relevant to your offer.
You can use Dotdigital's image manager to host your images, or use images from your product catalog.

Dotdigital image manager

To get the URL for images hosted in the Dotdigital image manager:

Go to Content > Images.
Select the image you want to use.
Select Copy image URL.

When annotations don't appear

Gmail controls when annotations display based on several factors, including recipient engagement history and email content quality. Even with correctly formatted code and Gmail approval, annotations might not appear for all recipients or campaigns.

If your annotations aren't appearing: