How To Master The New Google AMP Stories (Free Guide)

Google AMP stories are here!

The tech giant recently announced the arrival of Google AMP stories – Google’s play on the popular story format created by Snapchat. Ready to learn how to master them?

Below, I’ll cover everything you need to know about AMP stories, how to set them up, and if they’re right for your business.

Google AMP Background

What does it stand for? Accelerated Mobile Pages,

What does it do? Exactly what it says it does.

It’s designed to make mobile web pages load instantaneously, eliminating the load times that usually occur between a click and a full page appearing.

In its official debut in 2015, Google had this to say in its official blog post

“Every time a webpage takes too long to load, they lose a reader—and the opportunity to earn revenue through advertising or subscriptions…(AMP) aims to dramatically improve the performance of the mobile web. We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously.”

It’s such a big deal because user’s increasingly want a faster load time, and have become increasingly unforgiving of any page that tests their patience.

So much so that 47% of consumers expect a web page to load in 2 seconds or less, and 40% of people abandon a website that takes more than 3 seconds to load.

Google’s response? AMP, which helps them – and brands – deliver the customer experience user’s want to see.

What Are Google AMP Stories

If you’ve spent any time on Facebook or Instagram, you’re likely familiar with the Stories feature.

Now, Google’s cashing in on the popular format by offering Google AMP Stories, a new function announced last week at its AMP Conference.

Google calls the new stories “a visual storytelling format for the open web…AMP Stories immerse readers in tappable, full-screen content.”

While traditional AMP content is text-heavy, the new format relies on images, videos, and animation to fully immerse the user in the story experience.

For publishers, stories allow you to:

• Create a fully immersive experience for your readers through storytelling and flexible design
• Share and embed your stories across sites and apps
• Access on mobile and desktop devices
• Free for anyone to try
• Tell complex, visual stories with minimal technical knowledge
• More easily catch user’s attention through visuals and keep them engaged with the easy tappable interface

What Can Users Expect From Google AMP Stories

Primarily, convenience.

The new stories combine the power AMP with the popularity of visual content. Roughly translated, that means a good user experience.

Say you have some downtime to kill, either waiting for a dentist appointment or riding in your Uber. Naturally, you turn to your mobile device to search for something like the best looks from the Grammys.

Chances are, you don’t care to read a full article about this or wait for a slideshow to load on a webpage. And thanks to AMP Stories, you don’t have to.

Instead, you get this: a visual story sitting right at the top of your search results, which launches instantly and eliminates any lag time.

Stories appear in mobile search results right at the top, under “Top Stories” feature.

Right now, if a user were to type “Mashable” on their mobile device, results appear in this order:

• Homepage Link
• Top Stories
• Top Visual Stories

The last one’s the one want here, and users will be able to scroll through all Mashable’s latest stories.

Once an AMP story is clicked on, it will expand to full page, where users can click through the different images and videos. The last card in the story generally features a link to the website’s homepage and social media buttons to make sharing easy.

Examples of Google AMP Stories

In addition to Mashable and People, Google partnered with CNN, Conde Nast, Hearst, Meredith, Mic, Vox Media, and The Washington Post for the initial launch.

Each has used the format to suit its strengths.

The aforementioned Mashable – a source for trendy news and entertainment – capitalized on the Black Panther movie hype by rolling out a visual “essential guide to Marvel’s Black Panther” story, as well as a look into “Instagram’s most absurd beauty trends.”

Vox Media, a similar news and opinion site, has used the Stories primarily for explainer videos, like “How College Football Playoffs Really Work.”

The Washington Post, on the other hand, used the format to tell the story of the “evolution of Trump’s wall,” and brought the Olympics to life with a timeline of North Korea’s participation in the games.

Yet another media company, Meredith rolled out a guide to Prince Harry and Meghan Markle’s romance, again capitalizing on current trends to bring viewers an emotionally engaging, easy to follow story.

Each of the Stories do what a traditional text story can’t – rely on rich media to immerse the reader in the story, with limited explainer text.

Because of that, publishers like The Washington Post are reportedly very enthusiastic about the new format, and predict AMP Stories will be “a primary driver engagement” for users.  

Now, you may have noticed a trend here: most of these examples are media and news organizations. Which may leave you wondering if the story format is the best one for your business.

How to Set-Up Your Google AMP Story

Building your own story does require a bit of coding. But Google has done a lot of the work for you, and supplies a boilerplate (sample file) for you to copy and edit when creating your own story. To find it, go to this page and save the code with an .html extension.   

Before beginning your own story, Google recommends running through their in-depth tutorial which teaches you how to create multi-page stories, add visual effects, etc. First, you will need:

• A basic knowledge of HTML, CSS, and JavaScript
• A basic understanding of AMP’s core concepts (“Convert your HTML to AMP” tutorial)
• A browser of your choice
• A text editor of your choice

With those bases covered, access the tutorial by downloading the code from this URL (https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip) and run the sample page.

Full directions are for the tutorial are listed here.

Parts of a Google AMP Story

The first part of completing an AMP story is mastering its components.

Each AMP story is made up of individual pages, and each page is composed of individual layers that are made up of HTML code and AMP elements.

For coding purposes, you’ll see the components laid out like this:

• Story = amp-story
• Page = amp-story-page
• Layers = amp-story-grid-layer

The amp-story is the overarching component of your story, and to create it you’ll use the file downloaded in your tutorial to add the following scripts:

Create a Google AMP Story Page

Now that you have the story set up, you need to fill it with pages.

The first one you add – which will be the first one your users see – is called your cover page.

To create it, you’ll “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 cover:”

Next, you’ll add in your page layers (each page must have at least one.)

Layers are stacked on top of each other, so you may have one layer that’s a background image, and another layer on top of it with a text overlay.

Each layer can be designed using different templates. You can choose between:

• Fill template: fills the entire screen; best used for backgrounds, including images and videos
• Vertical template: laid vertically across the screen; can have multiple layers from the top to bottom of the screen
• Horizontal template: elements are laid out horizontally; can be used to stack multiple layers horizontally
• Thirds template: divides the screen into equal rows by thirds, allowing you to place content in each area

So, if you’re creating page made up of a background image with a headline, you’d create your first layer with a fill template and add your image.

Your next layer will contain the text, and likely use either a vertical or thirds temp

Each additional page will be created following the same format.

For full instructions on how to code your pages and layers in your amp-story file, click here.

Add Animation to Your Google AMP Story

To capitalize on its visual appeal, Google lets you add animation to the elements in your pages.

You can choose to add any of the following:

• Drop
• Fade-in
• Fly-in-bottom
• Fly-in-left
• Fly-in-right
• Fly-in-top
• Pulse
• Rotate-in-left
• Rotate-in-right
• Twirl-in
• Whoosh-in-left
• Whoosh-in-right

For example, if you wanted to use a fade-in animation to the text on your second layer, you would add the code <animate-in=”fade-in”> in the correct layer.

You can also customize the timing of your animation, by:

• Delay: the amount of time before an animation enters the page
• Duration: the amount of time during which the animation occurs

You’ll enter your timing parameters under the animation code:

You can use a standalone animation, combine multiple animations, or create an animation chain.

Creating the Bookend Page of Your Google AMP Story

The last page of your story, called the bookend, works a little differently.

This page generally includes links to related stories and social sharing buttons so users can share your story.

The information here will come from a JSON file that should include the social media channels you wish to include as well as any related articles, with the image, title, and URL specified.  

Last Step – Validating Your AMP HTML

The hard part’s almost over; all that’s left is to check that your AMP HTML is working correctly.

There are several ways to do this, which are explained in-depth in this video.

The reason you need to go through the validation process is to ensure that your story can be discovered an access not only through Google, but any site that integrates AMP pages into their search results.

Additionally, it will check that your AMP stories meet the technical requirements and best practices.

Google AMP Stories Technical Requirements and Best Practices

To help you out, Google provides a full list of best practices, separated by elements.

A few of the highlights are:

• Background
  • Always specify a background color for each page, even those with background images; if for some reason our image or video doesn’t load, you’ll still have a background
  • It should allow a smooth transition to the image or page
• Text
  • Make sure text is always readable over the background by choosing a contrasting color
  • Add a bit gradient overlay between the image and text to contrast the text and image
  • Limit text to no more than 1-2 sentences
• Video
  • Always specify a poster image that displays until your video loads
  • Recommended poster dimensions are 720w x 1280h
  • Videos should be no larger than 4MB; consider splitting longer ones over multiple pages
  • Each segment should be no more than 10 seconds
  • If possible, use HLS video, with MP4 as a backup (note: HLS is not supported by Chrome for desktop, so use MP4 backup for desktop traffic)
  • Videos are always vertical, with an expected aspect ratio of 16:9

How Google AMP Stories Work With SEO

AMP stories have the potential for positive impact on your SEO.

Google has long adopted a mobile-first initiative, meaning they will primarily use a company’s mobile site to index and rank pages.

Additionally, Google recently announced that starting in July 2018 page loading speed will be a ranking factor for mobile searches. Previously, it had only counted as a factor for desktop searches.

If you combine that knowledge with what we know about AMP stories – that a.) they’re designed primarily for mobile use, and b.) they’re AMP, which is all about fast load times – then I think it’s safe to say that stories have the potential to perform very well in Google searches.

Do note that as of now each story requires its own separate XML sitemap for Google to crawl and index.

Are Google AMP Stories Right For My Business?

In theory, they very well could be.

Any business with a content marketing strategy could likely find a way to incorporate AMP stories into their plans – through quick tutorials, product reviews, top lists, etc.

That being said, AMP stories are still in the beginning stages.

So far, feedback appears to be good from existing publishers like The Washington Post, who told Search Engine Land that the format is best suited for content that easily translates to “a highly compelling and visual story that you can tell in a few slides.”

Do keep in mind that because the story format is still classified as experimental, there could be unforeseen bugs or glitches in the future.

So, bottom line? AMP stories are an exciting new feature that has the potential to improve both the user’s experience and a brand’s ability to deliver captivating content.

And If you’re already using AMP and have a compelling story to tell, why not give it a try?

We’ll have a lot more information concerning the development of AMP stories and their effect on overall search engine rankings and traffic in the coming months.

So stay tuned – and keep a running list of story ideas.