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?
With AMP Stories, Google is offering a beautiful place at the top of the Search Engine Result Page (SERP) for your best pieces of content.
This new format will give you more possibilities to promote your brand, content, product or services.
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.
Table of Contents
What is Google 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.
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 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.
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.”
If you are producing great content, you might have the chance to get a prominent exposure at the top of the Google SERP.
Google Discover will as well promote 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 and Google Discover.
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.
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
Analyze pages on your site that are already generating traffic. Create an associated AMP Story containing the essence of the page, and link the page and the story.
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
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.
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.
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.
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-aftermust 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.
<link rel="canonical" href="$STORY_URL"> in the head of your HTML document.
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
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.
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.
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 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.
To deliver a better experience, it is recommended to make a beautiful clickable image representing the cover image of your story. Like this, readers will be more likely to look at your stories and share them.
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.
Best AMP Stories builder
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.
Ztorie is an easy to use platform to create, share, and monetize Stories across social media and the web. They offer a large set of templates and an analytics tool to see how your stories perform.
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 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.
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 (beta version)|
|Wix||Yes (blog only)||No|
|Squarespace||Yes (blog only)||No|
|Adobe AEM||Yes (via a third party module)||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 beta and will be soon 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.
The next 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.)
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.