AMP Stories: Everything You Need To Know

Either you are a B2C or B2B marketing professional, a freelancer or a blogger – you cannot ignore the possibilities delivered by the new feature from Google: AMP Stories.

• Do you want to boost exposure in search results?
• Are you already using Facebook stories or similar?
• Do you use content to convert visitors into customers?

After reading this complete guide:

• You will understand what an AMP Story is and what are the differences with other stories format
• Why you have to start now and how to improve your traffic and SEO with Google Stories
• You will get some inspirations thanks to the use cases and examples ( L’Oréal did something great with this format)
• And how to start today creating your first story either with code or with a story builder.

Let’s start a story first approach.

What is AMP Stories

AMP stands for Accelerated Mobile Page and is an open technology supported by Google. It delivers a way to make web experience on mobile better and faster.

AMP websites were around since the beginning of 2016. You might have already an AMP version of your mobile site. Or at least you have visited an AMP Website from your mobile. They are identified by the little icon in the search result.

Indeed, AMP pages are at the top of the SERP. Because they load fast – very fast.

Google rewards fast websites as they deliver a better customer experience. And this really matters for Google – the experience of the users of its search engine.

And now, please welcome the AMP Stories.

AMP Stories is an extension of the AMP framework. AMP Stories provides an engaging and visual way to consume content in a full-screen experience.

Indeed, a story can bring together images, video, and text in a beautiful and animated visual flow.

With a story, you can inform your audience or promote your products or services in a format tailored for mobile. Also, an AMP Story works perfectly on desktop.

AMP stories offer tappable interaction for your reader. You can insert call-to-action to display more information or even redirect to your website.

AMP Stories is an open source technology. You can create a story with few lines of HTML and Javascript, and display it on your website. No need for a native application or a private and closed network to host it. AMP Stories are made for the open web.

And another critical point, as Google mentions on its blog: “At a later point, Google plans to bring AMP stories to more products across Google, and expand the ways they appear in Google Search.“

It was officially announced during the AMP conference in Tokyo in February 2019: Google Search starts embedding stories in its search engine.

It still the beginning, and only for a certain kind of content. More and more content will be soon available in your favorite search engine.

The story is just beginning.

AMP Stories vs Facebook Stories vs Instagram Stories

At first sight, you could think that AMP Stories are just a copycat of what already exists for Snapchat, Facebook, Instagram, and other social networks.

What are the main differences between Google AMP Stories and the stories of social networks?

• Social Networks Stories have a clear advantage when it comes about the creation. In a few clicks, you can publish an engaging story with your network.
• AMP Stories give you a full control of the flow and enable additional interactions with your audience such has CTA, embedded content or related articles.
• The striking advantage for AMP Stories is the possibility to be displayed in the Google Search Engine and to be shared with anyone on the open web.

The point is not to defined a winner between the different formats. All format of stories could be considered in an omnichannel approach.

And definitely, AMP Stories must be part of your content marketing strategy.

Why AMP Stories must be part of your content marketing strategy

Do you love stories? We all love stories, especially when they are good.

If you are a B2C company or an online publisher, you might already have embraced a storytelling telling approach to engage with your audience.

Don’t miss the AMP Stories train and repurpose your content for this specific format. Right now!

This new format should not be ignored by B2B companies either.

Content Marketing is more and more popular within B2B industries. A relationship is built between the potential buyer and company using educational content such as blog posts or create videos.

If you already attract prospects and engage with your audience with excellent content marketing. Here some tactics where you could use AMP Stories.

Get your customers’ attention

Google defines the AMP Stories as a “snackable format for everyone.” The visual flow delivered can be used to tease the consumer of your content and to invite him to continue the experience on your website, and discover your products or services.

Use interactions to guide the readers

Call-to-action within a story can be used to redirect to a product page or landing page to capture more information about your visitor.

Link stories and top content

See an AMP Story as a piece of content loosely coupled with your main content. For instance, you have a long-form content such as a “definitive” guide. You could create a short story containing the essence of your article in a few slides.

Then, share the story via your social network or in your newsletter. If your audience likes it, they might continue reading the complete article. Use wisely the final slide called the “bookend“, as it let you offer links to related articles, call to action links, text, and more.

People share what they love

As for the videos, with AMP Stories you will have a higher engagement. They will be more likely shared that other piece of content and will drive more result at a lower cost.

Indeed, it might be easier and cheaper to create a ten slides story from your content than a 3 minutes video.

Be the first

As AMP Stories is new, you might be the first in your niche embracing this new way of reaching out to your audience.

Any businesses with a content marketing strategy will find how to incorporate AMP stories into their plans:

• How-to and tutorials
• Key features of your product
• Review of your services
• Top questions and answers about your industry

Being first you will give a competitive advantage when we speak about Search Engine Optimization (SEO).

AMP Stories and SEO to boost your traffic from mobile

It won’t be a surprise if I tell you that content is getting more and more consumed on mobile. As as well searched from mobile!

You might be right now reading this article from your mobile.

More than 60 percent of Google organic search traffic is coming from mobile devices. More people are searching from their mobile than from their desktop.

Google started its mobile-first index in 2016. And they announced in December 2018 that they now use mobile-first indexing for over half of the pages shown in search results globally.

What does it mean? When you search for something on Google, it is more likely that you will find a page that was crawled and indexed as the mobile version of that page.

If you didn’t start a mobile-first approach yet or even consider mobile in your strategy, then, start now.

Remember AMP stands for Accelerated Mobile Page. It was thought to deliver a fast content experience to mobile users. It is true as well for AMP Stories.

Google SERP featuring AMP Stories

So far AMP Stories are displayed on Google Result Pages at the following place:

• On mobile, under a section called Visual Stories
• On mobile, in the image search with Swipe to Visit
• On desktop, in the organic page result displaying the AMP Story cover image.

Visual Stories

During the last AMPConf in Tokyo, Google announced that the stories would have a prominent place on Google Search for Mobile under a section called “Visual Stories.”

Organic Page Listing

If you are producing great content, you might have the chance to get a prominent exposure at the top of the Google SERP.

Google organic page listing is displaying as well AMP Stories. The story cover is displayed next to the description.

You can try from your your mobile by clicking here (you will be redirect to Google search with the query “amp story is it worth starting”).

Swipe to Visit AMP Stories

AMP Stories (and any AMP websites) are also promoted in Google Search Image.

It will be now easier and faster to visit an AMP Story starting from an image search thanks to the Google Search feature: Swipe to Visit.

⚠️Breaking News ⚠️ @Google just launched something cool! #AMPStories are promoted in Images search! So get your Image SEO on point and link straight to your Story! Thanks @amphtml! pic.twitter.com/Alp4XoClyZ

— TappableHQ (@TappableHQ) July 26, 2019

Find more AMP Stories in Google Discover

Google Discover is as well promoting your Stories. If you don’t know Google Discover yet, it is a service accessible via the Google mobile app, and it delivers a fresh feed of content based on your search habits and preferences sprinkled with Artificial Intelligence.

Google Discover has already more than 800 millions users monthly and promotes videos and fresh visual content, as well as evergreen content.

The two main channels to look at for AMP Stories will be Google Search Mobile and Google Discover.

Search Console has been updated to include AMP story traffic from both Search and Discover. Learn more about AMP stories at https://t.co/t3lKqDgI3k

— Google Webmasters (@googlewmc) April 10, 2019

And now your question should be…

How to rank first on Google with AMP Stories

There is no magic recipe. However, we could assume that tactics used already now, will work as well with AMP Stories.

Google sees AMP Stories as normal pages in search and they should be linked to like normal pages on a site.

However, Google might have more difficulty to rank your stories because of the lightweight nature of a story: it usually has less content and text.

Develop evergreen content for AMP Stories

Google likes evergreen content. Such content is already featured in the search engine via the featured snippet. And also appreciated by Google Discovery.

Find popular search queries within your industry. The “What / How / Why” and create stories around them. How-to and tutorials are as well “evergreen” content.

Link performing web pages and stories

You should identify pages on your site that are already generating traffic. And then create an associated AMP Story containing the “essence” of that page, and link the page and the story together.

Internal link building helps Google to understand what your content is all about. Also by using performing pages, you will share a bit of its “power” with the story and might help to rank better.

An excellent user experience is key

You have to build great stories with beautiful visuals and smooth animations.

Time spent on page is an important SEO factor. Time spend on Stories will be as well crucial for their ranking on Google.

But be careful. Don’t be too long, or you risk to annoy the viewer, and he will bounce back.

Keep in mind that the story is a snackable content; the goal is to generate interest in the viewer’s mind and drive him to your website, products or services.

Overall, this format provides a new way to reach your target audience organically.

We will have very soon more insights and feedback on the experiment done around AMP Stories. Stay tuned.

Great examples of AMP Stories

AMP Stories for Media Companies

It is not a surprise that media and news companies were the first trying the AMP Stories.

The development of this new technology began with eight publisher partners, including CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media, and The Washington Post.

The Washington Post has a story that works full screen on desktop and obviously on mobile.

Transform an article into a Story

The Swiss newspaper Blick is following an interesting process to create AMP Stories from its best articles, and it involves Slack.

The process is described here, and it could be summarised in a few steps:

1. The editor picks an article with an image gallery.
2. The URL of the article and some information are provided to a custom Slackbot.
3. The Slackbot extracts the URLs of each images from the gallery and generates the AMP Story code in HTML.
4. The HTML code is published on their website manually.

The result is an AMP Story made from the gallery. Each image from the gallery is displayed as a page of the AMP Story.

AMP Stories to enable offline-to-online experience

L’Oreal, for their product La Roche Posay, delivered a great offline-to-online experience for its customers.

By scanning a QR code in a physical shop, you are sent to the AMP Story and receive additional information about the product in the format of a story. You can then start an immersive product experience from your phone, in the store.

AMP Stories to engage with your audience in a mobile-friendly way

Boost is a Fintech company helping their customers finding, comparing, and buying mobile airtime bundles in Kenya.

Their target audience is young people consuming most of their online content through mobile.

Boost wanted to make content more attractive and easy to consume for their users. They realized that blog posts didn’t have the level of engagements expected.

Once they switched to the AMP Stories format, they saw their conversion going up and their content was finally read.

The time spent on site went from 20 seconds with blog posts to almost 4 minutes with AMP Stories. And 87% of their readers click through the very end of their stories.

(Have a look at their presentation at the AMP Conference 2019 for more detail)

How to create and publish your first AMP Story

To make your first story, you will need at least a basic understanding of HTML and CSS.

Google recommends having as well a basic understanding of AMP’s core concepts. But you can already do something without knowing the technology behind.

Key AMP Stories concept to understand first

What you should know at least is the structure of an AMP Story and its main elements. An AMP story is made of:

• Several pages
• Each page uses layers to organize the content (e.g. vertically, horizontally, in columns)
• A layer contain HTML elements and other AMP components
• The last page is called “bookend” and let you display credits and related content

The HTML and CSS code must follow the convention of the AMP framework.

Google has a detailed tutorial, and in an hour you will be able to create your first story. Look what I’ve done for my first try #catlovers.

I highly recommend that you try by yourself the tutorial. Even if later you planned to use a Story Editor, it is always welcome to understand the fundamental concept of an AMP Story.

Also when you create your first stories, keep in mind the following best practices.

Best practices for AMP Stories

• Provide a background color matching the dominant color of your story
• Choose a font color with enough contrast
• Don’t put too much text – stay short
• Vertical image ratio is 9/16 and the recommended image sizes are
  • 720 x 1280
  • 540 x 960
  • 360 x 480
• Video size must be less than 4MB and in MP4 format
• If your video is too long, cut it in smaller pieces and display a piece per page

Advanced tips for AMP Stories

Automatically progress to the next page when the video finishes

Once you decide to use a video in your story, it is advised to move automatically to the next page and not play the video in a loop (unless you want to make a funny “boomerang-style” effect).

Indeed moving automatically provide a smooth flow to your story and deliver a better user experience to the reader.

The official AMP documentation indicates the following:

• Specifies when to auto-advance to the next page. If omitted, the page will not automatically advance. The value for auto-advance-after must be either:
  • A positive amount of time to wait before automatically advancing to the next page
  • An ID of an HTMLMediaElement or video-interface video whose completion will trigger the auto-advance

Basically what you have to do is to set on the page containing the video the parameter auto-advance-after with the id of the video.

Canonical link of AMP Story

Google suggests that the AMP Stories must be a standalone content and must have enough information to exist on its own to be displayed in the mobile SERP.

Web pages and AMP Story can be related as part of your content strategy. But in the “eyes” of Google search engine, it is two separated elements.

Therefore, the canonical link present in the head of the HTML document has to point to the story itself, identifying the story as the canonical document.

Set <link rel="canonical" href="$STORY_URL"> in the head of your HTML document.

Landscape mode

AMP Stories was designed for a mobile experience. Anyway, you can as well create immersive desktop experience in a full-screen mode.

To do this, you have to define the attribute supports-landscape on the main and only amp-story element.

The framework will do the rest and deliver a perfect rendering of your story on mobile and desktop.

If the focus point of your image is not centered, it won’t be displayed well vertically on mobile. To fix this you can add the attribute object-position on an image.

AMP Story and Google Analytics

It might be tempting to add directly in the AMP Story the Google Analytics snippet code.

Basically it works, but you will see very soon Google Search Engine complaining and telling you that “Custom JavaScript is not allowed” for your AMP Stories.

To configure analytics for your AMP Stories follow the next steps.

Please note, that I’ve tested several integrations of Google Analytics, and I found two configurations working, a simple on and a more advanced one.

Step 1: Include amp-analytics script

Add the following code in the <head> of your document.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Step 2: Add configuration code

Add the amp-analytics components at the end of the body tag but still inside the amp-story component.

If you don’t add the component inside the amp-story component, you will have the following issue: “Tag ‘amp-story’ is not allowed to have any sibling tags (‘body’ should only have 1 child) ”

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXXX-X"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

In the above example, you have to replace the variable “account” with your Google Analytics Tracking ID.

This configuration is extracted from the official document, you can get more detail here.

Alternative: Advanced configuration with Google Analytics Measurement Protocol.

For this configuration, you have to do the step 1 defined previously, and then do the following.

Add the amp-analytics components at the end of the body tag but still inside the amp-story component.

<amp-analytics type="googleanalytics">
        <script type="application/json">
        {
          "vars": {
            "clientId": "CLIENT_ID(_ga)",
            "random": "RANDOM",
            "uri": "the-uri-of-your-story.html",
            "trackingPropertyId": "UA-XXXXXX-X",
            "hitTypes": "pageview"
          },
          "requests": {
            "googleanalytics": "https://www.google-analytics.com/collect?v=1&tid=${trackingPropertyId}&cid=${clientId}&t=${hitTypes}&dp=%2F${uri}&z=${random}"
          },
          "triggers": {
            "Google Analytics track": {
              "on": "story-page-visible",
              "request": "googleanalytics"
            }
          },
          "transport": {
            "beacon": 0,
            "xhrpost": 0,
            "image": 1
          }
        }
        </script>
</amp-analytics>

In the above example, you have to replace the variable “trackingPropertyId” with your Google Analytics Tracking ID, and the variable “uri” with the URL of your story.

Each time the story is visible, it will trigger a call to Google Analytics and send the defined information as a page view.

This approach is sending data to Google Analytics using the Measurement Protocol.

If you are familiar with this protocol, you might be to extend this example and send additional information to Google Analytics by adding more parameters to the request URL and by adding additional triggers.

Test and Validate your AMP Story

Before Google Search Engine tells you that something is wrong with your AMP code, you could validate this one.

Either go to the AMP Validator website and copy paste your code (before publication).

Or you can as well install the Chrome extension. The AMP Validator will check the current page to see if it is an AMP page and then run it through the AMP validator and report if the page passes (green) or fails (red) via the extension icon.

Coming soon more tips

AMP Stories is constantly improving and introducing new features. Very soon, you will be able to embed rich media from Twitter, Google Map and Youtube in a “nice and visual way“. The user could interact with the embed content without breaking the navigational flow.

Other features will follow such as the sidebar. The sidebar will display a hamburger menu and give to the user the option to access other part of your site from the stories.

Editors will be able to update their stories in real time with Live Stories. The benefits for the readers is that they won’t need to refresh the story to see the new content.

Also, you will be able to add attachment. This is helpful if you want to add additional information.

As soon new features will be available, I will experiment them, and published them on this page. Stay tuned!

Publish your AMP Story on your website

Technically, an AMP Story is an HTML file. It can be hosted on your website (if it supports standalone HTML page) or on your web server.

There is no convention, but a good practice could be to locate your stories under the same path within your website, such as http://www.example.com/amp-story/my-first-story.

Once available, the story could be embedded in any page of your site with a simple link pointing to it or within an iframe.

To deliver a better experience, it is recommended to make a beautiful clickable image representing the cover image of your story.

Also you can embed your AMP Story in a beautiful and engaging landing page. Like this, readers will be more likely to look at your stories and share them.

Best AMP Stories builders

If you don’t like to code or don’t want to code, new tools started to pop up and facilitate the creation of AMP Stories.

All these tools have standard features in common:

• They facilitate the creative flow by drag-and-dropping image and text into a story builder.
• They offer hosting services for the stories created.

The differentiation factors come from the integration with stock photo libraries, default templates, and the user experience of the tool.

For this last one, I let you judge by looking into the detail of the following AMP Stories builder.

MakeStories

MakeStories was featured at AMPConf 2019 by Google.
The tool is a drag-drop, zero code AMP Stories builder with 75+ features. Once the story is created, you can publish to your WordPress or Drupal site, host it on their platform or download the code. And You can start for free.

Visual Stories

Visual Stories is a website builder that supports the creation of both AMP pages and AMP Stories. The platform lets you create content in the immersive AMP Stories format and submit your work on multiple websites from a single place. You can create beautiful AMP Stories in minutes, using their one-of-a-kind Story Builder tool.

Easy Stories

Easy Stories is a visual, drag and drop tool to create AMP Stories for your website or your mobile app. The tool is free for 15 days. Then for $49/month, you could enjoy an inbound marketing solution delivering on top of the stories editor: Landing page, lead capture, smart ebook, contact management, and email marketing.

Issuu Story Cloud

Issuu, the world’s largest digital discovery and publishing platform, has developed a solution called the Issuu Story Cloud, which includes an integration with Adobe InDesign.

It enables publishers to create sleek, design-forward stories from their brand content automatically by transforming the text and image assets into Story formats adaptable for all social platforms and including AMP Stories.

Tappable

Tappable is a story building tool that allows users to build responsive mini-websites—optimized for mobile—in a couple of hours. No coding required. Tappable positioning themselves as a tool for SME to enterprise in media and marketing.

Newsroom Studio

The Newsroom Studio let you create tappable content in the AMP Story format without coding, development or infrastructure investments required. It includes analytics and you can build interactive elements such as quizzes or pools.

Cutnut

The Cutnut Story Editor offers the perfect set of easy to use features to get started into this vertical world with professional stories from day one. Templates and drag & drop make creating your slides a bliss and even beginners can quickly publish compelling stories. 

Ampstor

Ampstor is a free graphic design templates and no-code editor to easily create your visual AMP stories. You can start from a template and design a story for mobile and desktop while using a drag and drop editor.

Viqeo

Viqeo Stories Studio simplifies omnichannel stories creation by using customizable templates and both horizontal/vertical previews to make a story for all social networks & AMP Stories at once.

Flash Stories

With Flash Stories, a company can build its branding site and unlimited AMP Stories within a few clicks:

• The website and stories are created with a drag and drop builder.
• SEO features help you to optimize the content for search engine.

Minutly

Minute.ly is startup developing a platform that uses Artificial Intelligence to enhance video content. Minute.ly team developed a feature called Stories allowing publishers to use their existing video assets to reach new audiences across all platforms, such as mobile, desktop and app in a AMP Story format (and other story format).

Stapp

With one-click, Stapp makes your Insta posts look their best. With AMP Stories your site Stories drive customer engagement and retention.

Once

Web Stories created by Once are specifically designed for interactions (polls, free text inputs, sliders…). With Once you can deliver an immersive mobile-first experience to your audience.

How to manage AMP Stories with your CMS

You might already have a website and might be wondering if your CMS support AMP natively, and especially AMP Stories.

Indeed. Does your website handle properly the AMP technology?

I did some research and analyzed a few solutions on the market. I looked if they can handle AMP (pages) and AMP Stories. (If your solution is not in the table below, drop me a message and I will add it.)

CMS	AMP (pages)	AMP Stories
WordPress	Yes	Yes
Wix	Yes (blog only)	No
Squarespace	Yes (blog only)	No
Adobe AEM	Yes (via a third party module)	No
Drupal	Yes	No
SiteCore	No	No
Magnolia	Yes (via a third party module)	No

The most famous website builder (Wix and Squarespace) offer to their customers the capability to “switch on” the AMP capabilities for blog posts. Unfortunately for the AMP Stories, there is no way to create or even host them under your site.

From the Enterprise Content Management Systems (Adobe, Drupal, Sitecore, and Magnolia) only Drupal has native integration with AMP. In the best case, the other CMSs offer some pre-built templates to start with.

On the AMP Stories side, the option Enterprise CMS offer is to create a dedicated template for stories and host the page in a specific node of the website tree. DIY.

The winner is WordPress. They work closely in collaboration with the AMP developer team to deliver a plugin enabling AMP technology within WordPress. Let’s have a look in detail.

Integrate stories in WordPress

With the official AMP plugin

The official AMP plugin is developed by Google and offers native integration with WordPress. The plugin helps site owners creating AMP-first website while automating most of the process.

The AMP Stories Editors for WordPress has been released in 2019 and is available with the version 1.2 of the plugin.

Gutenberg, the new content editor of WordPress, has been leverage to take full advantage of its capabilities and allow a horizontal flow for stories creation.

This new release of the AMP plugin will let you:

• Creating and reordering AMP Story pages
• Dragging and dropping blocks
• Managing your content overall as part of WordPress
• Creating new elements, such as text, videos, images
• Changing the background color and opacity, and adding a gradient
• Animating the text, rotating it, and selecting a Google font

WordPress will let you create immersive and engaging stories within the CMS editor interface.

However, if you prefer to code your own stories or use another tool to create them, there is a way to embed stories in WordPress.

Stories as a standalone HTML page

The plugin WP Custom HTML Page does what it says: it creates custom HTML documents in WordPress and provides a link to them.

And remember AMP Stories is a regular Web Pages. You could then host them as HTML document.

Simply create a new HTML document, and copy paste the AMP Story code. Take care to define properly the permalink of the Story. (This is how I did it for this article.)

Amp Stories for WordPress plugin

Amp Stories for WordPress is a third-party plugin that creates AMP Stories by filling a simple form on a post or page.

Once it is installed you will get a simple form at the bottom of your posts or pages to create a AMP Story from the information available on your page.

To recap

Google AMP Stories are here and more and more businesses will start using them in their content strategy.

With AMP Stories, you are in control, you own the content and define the story flow.

AMP Stories have features that are unique to the web. You can link them to other sites and they can be discovered by search engine.

And finally they are fast and immersive. You reader will be delighted by the the great stories you have to tell.

You can’t ignore this new format, and you should at least experiment it. Soon your industry content will be featured in the Visual Stories, and you should not miss this spot.

Keep in mind all the the benefits of the AMP Stories:

• Create beautiful and engaging content easily
• Flexible editorial and branding capabilities
• Sharable and linkable on the open web
• Analytics and measurement
• Fast loading time
• Monetization capability
• Stories are a way to reach your audience within a new storytelling experience

Are you ready to start a story first approach?

Don’t hesitate to contact me if you have great stories to share. I would love to see what you are doing and how they increased your traffic and boost your customer engagement.

I’m in the somewhere between France, Switzerland and German, in the area of Basel City. If you are around, we could also grab a coffee and discuss how AMP Stories could help your business.