Table of contents

Web Story technical details

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

This guide explains all the technical details and best practice you should know to successfully create Web Stories with AMP.

AMP Valid

A Web Story is technically a single web page built with AMP and adheres to AMP specifications:

Start with the doctype.
Contain a top-level or tag.
Contain and tags.
Contain a tag as the first child of the tag.
Contain a tag inside their tag. As a best practice, you should include the script as early as possible in the .
Contain a tag inside their with the href pointing to the Web Story URL.
Contain a tag inside the tag. It's also recommended to include initial-scale=1.
Contain the AMP boilerplate code in the tag.

The difference between an AMP webpage and a Web Story built with AMP is the amp-story component. It is the only direct child of the document and must contain the standalone attribute. All Web Story pages, layers, and elements are defined within the tags.


<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Joy of Petstitle>
    <link rel="canonical" href="pets.html">
    <meta name="viewport" content="width=device-width">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}style>noscript>
    <script async src="https://cdn.ampproject.org/v0.js">script>
    <script async custom-element="amp-video"
        src="https://cdn.ampproject.org/v0/amp-video-0.1.js">script>
    <script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-1.0.js">script>
    <style amp-custom>
    ...
    style>
  head>
  <body>
    
    <amp-story standalone
        title="Joy of Pets"
        publisher="AMP tutorials"
        publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
        poster-portrait-src="assets/cover.jpg">
      <amp-story-page id="cover">
        <amp-story-grid-layer template="fill">
          <amp-img src="assets/cover.jpg"
              width="720" height="1280"
              layout="responsive"
              alt="...">
          amp-img>
        amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The Joy of Petsh1>
          <p>By AMP Tutorialsp>
        amp-story-grid-layer>
      amp-story-page>

      
      <amp-story-page id="page1">
        <amp-story-grid-layer template="vertical">
          <h1>Catsh1>
          <amp-img src="assets/cat.jpg"
              width="720" height="1280"
              layout="responsive"
              alt="...">
          amp-img>
          <q>Dogs come when they're called. Cats take a message and get back to you. --Mary Blyq>
        amp-story-grid-layer>
      amp-story-page>
      ...
    amp-story>
  body>
html>

Follow the Create your first Web Story tutorial and read the amp-story reference documentation to learn more.

Peak performance and user experience

Users may be viewing Web Stories in areas with low network connection or older devices. Ensure they enjoy their experience by following these best practices.

Background color

Specify a background color for each Web Story page. Having a background color provides a good fallback if the user’s conditions prevent them from downloading images or video assets. Choose a color that is representative of the dominant color of the page’s intended background asset, or use a consistent color theme for all story pages. For readability, ensure the background color has sufficient color contrast with the foreground text. Ideally, aim for a color contrast ratio of 4.5:1. If this is not possible, consider adding an additional background behind the text itself instead that does result in a sufficient contrast.

Define the background color for pages within the