Learn how to create your first AMP Story in this tutorial by AMP.dev, we’ll introduce you to the
amp-story component, which you can use to create visually engaging stories in AMP. By the end of this tutorial, you’ll have created a story about “The Joy of Pets” that provides bite-sized information and visuals to entertain and engage readers.
Before starting this tutorial, you’ll need the following:
To test our sample story, we need to access the files from a web server. There are several ways to create a temporary local web server for the purposes of testing. Here are some options, choose the one that works best for you:
After setting up your local web server, have a look at what our completed story will look like by the end of this tutorial by accessing the following URL:
IMPORTANT – Make sure the URL serves from
localhost otherwise the AMP story might not load correctly, and you may encounter errors like
"source" "must start with "https://" or "//" or be relative and served from either https or from localhost.
Click through the completed story and get a sense of what we’ll be creating.
An AMP story is a full-screen visual storytelling experience that conveys information with images, videos, graphics, audio, and more. It’s perfect for users who want bite-sized, visually-rich content.
The basic ingredients that go into an AMP story are individual pages. These pages, in turn, are composed of individual layers that contain basic HTML and AMP elements.
Each of those ingredients are translated into AMP components, where the story is represented by
amp-story, the page is represented by
amp-story-page, and the layers are represented by
Let’s start creating our story with the
An entire story is represented by the
amp-story component, which serves as a container for all the pages in a story. The
amp-story component is also responsible for creating the UI shell, including handling gestures and navigation.
amp-story component is a custom AMP component, and like all custom components, you must add the associated script for the component to the AMP document.
pets.html file in your text editor, and in the
<head> section, add the following script:
<head> <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script> </head>
<amp-story> element to the
<body> of your document, and specify the mandatory
standalone attribute, like so:
<body> <amp-story standalone> </amp-story> </body>
For stories to be discovered in the AMP stories ecosystem, certain metadata is required to provide mini details of the story, like:
titleattribute (e.g., “Joy of Pets”).
publisherattribute (e.g., “AMP tutorials”).
publisher-logo-srcattribute. This is a URL for a logo image, in square format with a 1×1 aspect ratio.
poster-portrait-srcattribute. This is a URL for the poster, and the image must be in portrait format with a 3×4 aspect ratio.
Let’s add these attributes to our
<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">
NOTE – These metadata attributes supplement and do not replace any Structured Data (e.g. JSON-LD) on the page. To ensure your AMP pages are discovered across all platforms, you should add Structured Data to all your AMP pages, including AMP stories.
At this point, we have a shell of a story without any content. Let’s create that page.
A page within an AMP story is represented by the
<amp-story-page> component. Within an
amp-story, you can have one or more
components, containing each of the individual screens of a story. The
first page you specify in the document order is the first page that
displays in the story.
To create a page, add the
<amp-story-page> element as a child of
amp-story. Assign a unique id to the page. For our first page, which is the cover page, let’s assign a unique id of
<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-page> </amp-story>
Now we have the shell for our cover page. However, our story still isn’t valid. Within our page, we need to specify at least one layer.
Like layers in graphics, you can use layers in AMP story pages to create visual effects. Layers are stacked on top of one another, so, the first layer is the bottom layer and the next layer is on top of that, and so on.
Our cover page is actually comprised of two layers:
Let’s add our first layer to our cover page. The layer contains an image that fills the screen.
Create the layer by adding the
<amp-story-grid-layer> element as a child of
<amp-story-page>. As we want the image to fill the screen, specify the
template="fill" attribute for the
amp-story-grid-layer. Inside the layer, add an
amp-img element for the
cover.jpg file, and make sure it’s responsive (i.e.,
layout="responsive") with the image’s dimensions of 720 x 1280 px. Here’s what our layer looks like:
<amp-story-page id="cover"> <amp-story-grid-layer template="fill"> <amp-img src="assets/cover.jpg" width="720" height="1280" layout="responsive"> </amp-img> </amp-story-grid-layer> </amp-story-page>
Let’s see how the page displays. Open the page in your browser: http://localhost:8000/pets.html.
Here’s what it should look like:
Continue Reading this article here: Creating AMP Stories | AMP.dev
Would like us to create AMP Stories for you? Get in touch here.