Starting our story
An entire web 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>
Providing meta information
For stories to be discovered on the web, certain metadata is required to provide mini details of the story, like:
- The title of the story, represented by the
titleattribute (e.g., "Joy of Pets").
- The name of the publisher, represented by the
publisherattribute (e.g., "AMP tutorials").
- The publisher's logo, represented by the
publisher-logo-srcattribute. This is a URL for a logo image, in square format with a 1x1 aspect ratio.
- A poster image of the story, represented by the
poster-portrait-srcattribute. This is a URL for the poster, and the image must be in portrait format with a 3x4 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 web stories 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.
Written by @bpaduch