Jon Fletcher 2020-07-22

What are AMP Web Stories?



  • AMP web stories can be source of ultra-engaged search traffic
  • Building and designing web stories requires knowledge of HTML and CSS 
  • Web stories can be monetized but on Google's terms. 

By now, we're all familiar with the visual grammar of an online Story. 
Fullscreen, swipeable content with tappable actions, and rich visuals. Thanks to their popularity on Instagram and Facebook, stories have become part of everyday mobile life. 

So, when Google sees something that users love interacting with, but is hidden in the closed world of a native app, they have to get in on the action. 

Released in 2018, AMP web stories are a way for publishers to get app-like levels of interaction on content, but with the power of search traffic. Google Search Console includes AMP story traffic from both Search and Discover. 

AMP web stories combine the immersive and digestible content that works so well on mobile and uses the lightness of the AMP framework to make it accessible from search results. 

Early publisher results suggest that readers are responding to the new format. The fintech company Boost saw the time spent on their site increase from 20 seconds with blog posts to almost 4 minutes with AMP Stories— with 87% of their readers clicking through to the very end of their stories. 

What's the difference between AMP web stories and Instagram stories? 

Effectively, AMP web stories are no different from Instagram stories in how they look and work. But, as AMP web stories are served from search results, rather than an in-app content feed, there are some fundamental differences

The formats of AMP web stories are the same as social media stories. They can contain: Text, image, audio, animated gifs, and video. 

The biggest difference is the potential audience. AMP web stories are public on the open web, rather than limited to a network of followers. And, in addition to displaying in Google search results, AMP web stories can also be embedded in websites and optimized for full-screen desktop mode. 

There are no lifespans or expirations to AMP web stories, and where social media stories are created via the platform interface, web stories have to be created by marking up content with HTML or by using a third party tool. 

This process does give publishers more control over things like animation within the story and the level of detail that can be measured. Most social media stories have limited analytics that will tell you views and taps whereas web stories can be measured using Google Analytics to see more granular interaction data. 

Here you can see how CNN’s web story content appears in the ‘Visual Stories’ category in Google Search Results.

For publishers looking to gain more traffic from SERPs, and get higher engagement on their content, creating AMP web stories is a low effort/high reward strategy that can have a major impact on traffic, reader engagement, and revenue. 

Building AMP web stories 

For Google to generate an AMP version of your article, you have to add an AMP code to your article page. An AMP web story is represented by the amp-story component, which serves as a container for all the pages in a story and is responsible for handling gestures and navigation.

Google offers a downloadable tutorial that guides you through creating a test environment and all the stages that go into making an AMP story. 

You will see how each story is broken down into components, composed of layers that contain basic HTML and AMP elements. Adding content to each layer builds your AMP story in a logical progression. 

  • Story 
  • Pages 
  • Layers 
  • Elements 

You can see here, when these layers are translated into AMP components how light the framework is. 

You simply switch the content in this basic UI shell. Each page of a story is made from layers, stacked on top of one another. You specify layer, type of content, where it appears on the page, and then compile them into a single visual experience. 

You can see this page contains 3 layers. 

Layer 1: Implements the fill template, and contains a responsive image (lighthouse.jpg). 

Layer 2: Implements the vertical template and contains one element in the upper third grid area: A element with the title: Score 100 in Lighthouse 

Layer 3: Implements the vertical template and contains one element in the lower third grid: A element that contains the subtitle. 

This web story can be also enhanced by adding preset AMP animations to the HTML but by limiting the content, and giving publishers a framework, it allows for creative storytelling that doesn’t outweigh the AMP mission to keep pages ultralight and fast. 

Designing for AMP web stories 

Like any rigid framework, what works and what doesn’t soon becomes obvious. Google knows exactly what readers respond to and have a series of best practices to make sure your stories connect. 

Make each story digestible 

Stories need to be easily understood while people are flicking through their phones. This means short and to the point. A Web Story should be a minimum of 4 pages and ideally less than 30. 

Stand out on the magazine rack 

More than any other content, stories need to make an instant visual impact in order to win traffic. Cover pages need bold, eye-catching imagery and short, powerful headlines to get them noticed. 

Add a brand, and author, and a date 

Knowing who wrote a story and when is important for readers to know how relevant the story is going to be for them. Don’t make your readers dig into the story to find this info. 

Add videos for how people watch videos 

No matter how good your content, people skim everything. Make this work to your advantage by making videos shorter than 15 seconds, add captions at the bottom, make them portrait mode and ensure the quality is high with a minimum of 480p and 24 frames per second. 

Say no to landscape 

The beauty of AMP web stories is that you know how readers are going to consume, in portrait, and on mobile. Use full screen, portrait images with 828 x 1,792 resolution for immersive content. 

Help your Web Story rank 

For the story to be discovered in search engine results, metadata has to be added to the amp-story tag. There are some basic attributes that are required in order to publish the story. 
  • Standalone: This Identifies that the AMP document is a web story
  • Title: The title of the story
  • Publisher: The name of the story's publisher
  • Publisher logo: A URL to the story publisher's logo in 96x96 square format px logo
  • Poster portrait: A URL to the story poster in portrait format (3x4 aspect ratio)

There are then optional attributes that will help your content register with your users and will also likely affect its search ranking if you choose not to include them. 
  • Poster-square: A URL to the story poster in square format. 
  • Poster-landscape: A URL to the story poster in landscape format  
  • Supports-landscape: Enables landscape orientation support on mobile devices and a full-bleed landscape experience on desktop. 
  • Background-audio: A URL to an audio file that plays throughout the story. 

While the ranking of AMP stories will follow Google’s familiar patterns of E-A-T, the richer you are able to make the experience, the better chance you will have of appearing in the visual stories. 

Monetizing AMP Web Stories 

After the difficulty publishers had with monetizing regular AMP pages, Google knows it needs to give publishers a viable revenue source in order to get the product adopted by premium publishers. Story Ads are full screen, single page ads that appear within Web Stories. 

These stories have a one-click pathway to other websites, AMP pages, or Apps and allow images, videos, animations or a combination. Story ads are supported by Google Ad Manager. Ads are served using the amp-story-auto-ads extension, a wrapper around the normal amp-ad component that inserts one or more ads as the user reads the story. 

These ads are pre-rendered by the AMP Stories runtime to make sure that users never see a blank screen. The density is ensured with a strict content to ad ratio that gives a balance between story and ads. These ads can be navigated in the same way as a normal stage but they will also include a call to action(CTA) button and an ad label displayed as a text disclaimer at the top of the page. 

If you’d like to learn more about converting your content into reader-ready, monetized AMP pages, try a live demo of our dedicated AMP service today.

Latest Articles

‹ Back to Blog Home

Get the headlines

Sign up to get the best headlines direct to your inbox

Your name
Your email