- AMP-specific metadata
Make your Web Stories discoverable
Ensure your Web Stories are reaching your intended audience by including necessary metadata and markup.
Web Stories with missing or incorrect AMP-specific metadata may not surface in search engines or third party platforms.
Required <amp-story> attributes
Web Stories must include the following
<body> <amp-story standalone title="Web Story Title" publisher="Web Story Publisher" publisher-logo-src="https://example.com/logo/1x1.png" poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"> ... </amp-story-standalone> </body>
The title of the Web Story.
The name of the Web Story publisher.
A URL to the Web Story publisher's logo image. The logo image should be larger than or equal to 96x96px and maintain a 1:1 aspect ratio. This logo appears in the right corner on the top of the poster image on platforms currently (October 2020) supporting Web Stories.
A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x853px and maintain a 3:4 aspect ratio.
A URL to an image used as the Web Story poster in landscape format. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 853x640px and maintain a 4:3 aspect ratio.
A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x640px and maintain a 1:1 aspect ratio.
Platforms that surface Web Stories rely on metadata to correctly index and display them. Include the following recommended information to give users a delightful Web Story experience.
Include the following recommended HTML markup in your Web Stories for the best user experience.
All Web Stories must include a canonical URL that points to the Web Story itself.
<link rel="canonical" href="https://www.example.com/url/to/Web/Story.html">
Include a favicon to display as the icon in the browser tab.
Maximize accessibility and indexability by including meaningful alt-text for images.
Video subtitles and captions
Maximize accessibility and indexability by including video subtitles and/or captions.
Use page attachments to present additional information in “classic article form” alongside your Web Story. This can be useful to provide extra detail, deep dives, or onward journeys for the content presented in your Story.
Including schema.org structured data vocabulary defines important information about your Web Story that allows third-party platforms, such as search engines, to display and index them.
OGP Facebook metadata
Including Open Graph protocol enables Web Stories sharing on Facebook.
Twitter card data
Including Twitter card data allows you to attach photos, videos and media experiences to a Tweet sharing your Web Story.
Written by @CrystalOnScript