AMP for Email Format

Important: this documentation is not applicable to your currently selected format stories!

AMP is a technology known for developing super fast web pages on mobile clients. AMP is a set of HTML tags backed by JavaScript that easily enables functionality with an added focus on performance and security. There are AMP components for everything from carousels, to responsive form elements, to retrieving fresh content from remote endpoints.

The AMP for Email format provides a subset of AMP components that you can use in email messages. Recipients of AMP emails can view and interact with the AMP components directly in the email.

Required markup

The following code represents the minimum amount of markup that makes up a valid AMP email message:

<!DOCTYPE html>
<html ⚡4email>
  <head>
    <meta charset="utf-8" />
    <style amp4email-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    Hello, world.
  </body>
</html>

An AMP email message MUST

start with the doctype <!doctype html>. 🔗
contain a top-level <html ⚡4email> tag (<html amp4email> is accepted as well). 🔗
contain <head> and <body> tags (They are optional in HTML). 🔗
contain a <meta charset="utf-8"> tag as the first child of their head tag. 🔗
contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag inside their head tag. 🔗
contain amp4email boilerplate (<style amp4email-boilerplate>body{visibility:hidden}</style>) inside their head tag to initially hide the content until AMP JS is loaded. 🔗

The entire AMPHTML markup must not exceed 200,000 bytes.

Structure and rendering

AMP for Email relies on the standard multipart/alternative MIME subtype, as defined in RFC 1521, section 7.2.3.

For more information, see Structure and rendering of AMP emails.

Supported AMP components

See AMP for Email Supported Components.

HTML requirements

See Supported HTML in AMP for Email.

CSS requirements

Supported selectors and properties

See Supported CSS in AMP for Email.

Specifying CSS in an AMP document

All CSS in any AMP document must be included in a <style amp-custom> tag within the header or as inline style attributes.

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
  amp-img.grey-placeholder {
    background-color: grey;
  }
</style>
...
</head>

The entire <style> tag cannot exceed 50,000 bytes. The validator will check for this.

Document dimensions

Optimal width: 800px or less (any wider and content may be unexpectedly truncated on some clients).
Height: variable, the client allows the user to scroll through the content.

Validation

To ensure your email messages meet the strict criteria for the AMP for Email format, you can use AMP's existing validation tools.

See Validate AMP Email for more information.

Privacy and Security

Tracking email opens and interaction

AMPHTML allows tracking email opens with pixel tracking techniques, same as regular HTML emails. Any user-initiated requests for data from external services will also indicate the user is interacting with the message. Email clients may offer their users the ability to disable loading remote images, and other external requests.

AMP-specific analytics

The following AMP-specific analytic techniques are not supported:

Component-specific considerations

Requests for images inside <amp-carousel> or <amp-accordion> can indicate to the sender that the user is interacting with the message.

Redirects in <amp-form> are disallowed at runtime.

Feedback & Support

For support and feedback on AMP for Email, please use the following channel: ongoing-participation