Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Make your Web Stories discoverable

Ensure your Web Stories are reaching your intended audience by including necessary metadata and markup.

AMP-specific metadata

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 <amp-story> attributes.

<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>

title

The title of the Web Story.

publisher

The name of the Web Story publisher.

publisher-logo-src

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.

poster-portrait-src

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.

poster-landscape-src

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.

poster-square-src

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.

Metadata

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">

favicon

Include a favicon to display as the icon in the browser tab.

Document title

Give your Web Story document a title by including a tag.

Image alt-text

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.

Page attachments

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.

Schema.org metadata

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.

Validate your schema.org data using Google's AMP Test.

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.

Read more about SEO for Web Stories in the AMP Blog.