Over the past few years, we’ve witnessed how the Story format quickly exploded in popularity.
Starting with Snapchat, Instagram, Facebook, Pinterest, TikTok, you name it.
Guess who is another addition to this Story family?
Two years ago, Google released a new format of Stories dedicated to the Web and named them Web Stories (previously known as AMP Stories).
This format (powered by AMP technology) is more than a response to the growing popularity of the addictive Story format as we see on social media.
It’s more like a new window of opportunity for businesses to provide the best mobile-friendly experience for customers and a flawless buying process with visual storytelling.
Why are Web Stories gaining so much popularity recently and how you can use that to your advantage?
Scroll down to find out.
Table of content
- What are Google Web Stories and how they work?
- How can Google Web Stories help your business?
- How Google Web Stories can benefit SEO?
- Web Stories as a sales funnel
- How Web Stories can benefit my Shopify store?
- 2 ways to start creating Web Stories for your Shopify Store
- Tool for creating Google Web Stories: ProductStories
What are Google Web Stories and how they work?
It’s pretty much the same as the Story formats that you are used to engaging with on your favorite social media.
There is only one major difference – this Web Stories format is developed for any website (and supported by Google).
Let’s say you are planning to buy a new hoodie for the upcoming autumn season.
Your internet connection is weak, you try to search on your mobile but usually feel hesitant to open pages that are not relevant or do not have an immediate call to action.
You type ‘’hoodie’’ on Google and voila – an immersive Story format is right in front of you, offering you fast and appealing user experience.
Say Hi to Web Stories, the new, creative, and visually rich way of storytelling.
A Web Story is a tap-through Story format consisting of fast-loading full-screen pages that contain text, video, sounds, and images. They are just like web pages. They have a URL on your web server, are linkable, and can link to other websites.
Like most of the Google features, the Web Story format is free and part of the open web, so everyone can try it out on their websites.
Web Stories uses the AMP technology to deliver the best possible mobile experience to its users and get information to the end-user as fast as possible. Thus, it offers a powerfully built set of opportunities both for advertisers or publishers.
In a world where we are all swimming in content, this seems to be a great way to grab and hold the attention of readers, particularly on mobile devices.
In the words of Google:
We want webpages with rich content like video, animations, and graphics to work alongside smart ads and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet, or mobile device you’re using.
If you are interested to learn more about how the AMP technology works, this official guide is a great place to start or watch the video to learn more on what is AMP:
How to make sure AMP technology will help your business reach a unique audience with an immersive Story experience?
You will find the answer below.
How Google Web Stories help businesses?
See the image on your left side and the image on your right.
Which of these two images is more tempting to click on?
The right one?
The Story format is more personal and natural. You can never know what you are expecting unless you continue to swipe up. The vertical video feels real and honest in a way that images aren’t.
Yap. The Stories format isn’t just a way to connect with friends and family, but a useful format for helping customers make more informed buying decisions, especially when you have an online store.
There being said, here are the benefits that Google Web Stories can provide for your businesses:
- Creative and engaging content that can be created easily
- A modern way to reach readers with a familiar Story format
- Flexible Story layout templates, standardized UI controls, components for sharing and adding follow-on content
- A sharable and linkable format that can be embedded across websites (no need to be confined to a single ecosystem)
- Faster loading content (customers hate to wait for search results to show, who does?!)
- Supports analytics and bookend capabilities for viral sharing and monetization
- Many options for monetization for publishers with immersive story ads and affiliate links
As you can see, we are talking about something really neat that is making its headway to the eCommerce industry.
Sounds exciting, right?
How Google Web Stories benefit SEO?
Let’s check the other side of the buying process.
Let’s say that you have a Shopify store selling some cool autumn hoodies. It won’t hurt if your content loads quickly and as a result of that, show up on the top of the Google search results page, right?
Speed is essential!
A quick, nimble web page will always triumph over a slow site. And both users and search engines know that.
You may be wondering: My site loads fast, so why does this affect me?
That is a legitimate question.
But, why don’t you wanna risk it?
Check out these website load time statistics and facts:
- 1-second delay reduces page views by 11%.
- 1-second delay decreases customer satisfaction by 16%.
- 1-second delay eats away 7% of the coveted conversion rate.
- 1-3 seconds in loading time see a very low bounce rate probability – only 32%.
- Add 1 second more to that and the chance for users to bounce triples, reaching 90%.
Why risk loading time? Is it worth it?
Luckily, the AMP technology can do exactly that for you!
According to Google, the average loading time for an AMP page is less than one second!
Please note that AMP itself isn’t a ranking factor, but speed is.
Speed is always followed by its best friends that all together provide a more optimized user experience such as:
- Lower bounce rates
- Higher time spent on site
- Higher conversion rates
To achieve all of the above with Web Stories, they are some specific SEO tactics you should follow:
Please note that the tactics mentioned below are more technical, so I included some additional links where if interested, you can explore more.
Follow metadata guidelines
Web Stories have a built-in mechanism to attach metadata to a Story, so to ensure maximum compatibility with search engines, don’t forget to include title, description, schema.org, Open Graph protocol (OGP), etc. For more info, follow these metadata guidelines.
And if you need more advanced Google-specific guidelines, here are the developer documents on Web Stories.
Link your Web Stories
As Stories are web pages themselves, using the right internal strategy to boost your SEO applies here too. So link your Web Stories from your homepage or category pages.
For example, if your Web Story is about a new collection of hoodies, and you have a page that lists all the new hoodies, link the Stories with that page.
Remain with the same URL format
Preferably, use the exact same directory structure and URL format for your Web Stories. There is absolutely no need to point out that a Web Story URL is using the AMP technology or Web Stories format.
Add additional info with page attachments
Story page attachments provide extra details and inspire action. You can notice them in the form of a link or inline AMP HTML content to specific pages. Users can find this content by swiping up to the next page or tap an action button.
Add image descriptions
To optimize for accessibility and indexability of your content, don’t forget to add meaningful ‘alt’ text to your images for Stories.
Add video subtitles
Go ahead and add captions on your videos and if it applies – provide subtitles, too.
Modify the Video Format
Although the AMP Stories format is primarily focused for mobile consumption, don’t be discouraged – Web Stories can also work for desktop users, effortlessly.
Check out the desktop and landscape mode support guide.
Feel free to take full advantage of the semantic HTML to craft your Story. And in case you can’t use semantic markup in your Stories generation, follow this guide with detailed instructions on how AMP video components work.
Create self-canonical Stories
Web Stories are created thanks to the AMP firework, they should be self-canonical. The thing is that the <link rel=”amphtml”..> pairing used by AMP Pages is not available for Stories. Here you have stand-alone web experiences and one should not be canonical for the other.
Thus, in case you have a separate story webpage with the same content as a Web Story, make the Web Story canonical. Follow this AMP Page Validator guide to make sure to AMP-validate your Web Stories.
Web Stories as a sales funnel
When developing Web Stories, Google was definitely considering a wider audience of users (like always).
Thus, the company created a way to monetize using Web Stories and named it Story Ads.
It’s a single page Story ad that appears within Web Stories.
Similar to Instagram Story ads, the Web Story has a flexible canvas, so you can add images, videos, animations, or a combination of them.
I won’t dive that deep into Story Ads, but if you are interested to get started with Story Ads, check out this variety of templates that Google gives you at your disposal.
How Web Stories can benefit Shopify stores?
The benefits that AMP technology has to offer the news services are crystal clear – faster article loading and a boost in engagement rate.
The real question is: what AMP can do for online stores?
Can AMP improve the customer’s experience, and drive more engagement and sales, too?
In this guide, we will set our focus on Shopify as an eCommerce platform.
Naturally, as Shopify is becoming a leading e-commerce platform, online retailers are looking for new ways to easily set up, run online stores and exceed customers’ expectations.
And as most of the online shopping is now happening on mobile devices, it is more important than ever for retailers to deliver faster and more engaging shopping experiences optimized for mobile users.
Due to AMP technology providing fast-loading content, no doubt this framework is expanding within the eCommerce industry.
Seems like many online retailers are coming on board using mobile-optimized AMP versions of their stores that users love.
And as the number of Shopify merchants that convert their Shopify stores into speedy AMP format is getting larger, don’t be the last to jump on the train!
Okay, it is not a secret that Page Speed and SEO are incredibly important for any Shopify business. Both of which relate directly to the probability of a visitor converting into a customer.
AMP Stories are just a cherry on the top.
Not convinced enough?
Here are the main reasons (backed up with numbers by Shopify) why you should hurry up and convert your store into the fast-loading AMP format:
- Website’s bounce rate gets worse for every second it takes a page to load
- Improving e-commerce site performance & speed can achieve 2X conversions
- 79% of customers “dissatisfied” with a site’s performance are less likely to buy from them again
Bottom line – the more potential shoppers leave your website due to reasons mentioned above, Google’s SEO algorithms will signal that your page is not giving value to your customer, and you will drop in your search engine rankings.
The ugly part?
Your competitors will not lose a minute to outrank you!
2 ways to start creating Web Stories for your Shopify Store
Okay, now that you are familiar with all the benefits that the AMP format can have on your Shopify store, we will proceed on how you should jump into action and create your first Web Story.
There are 2 ways:
- Manually (without plugin)
- Automatically (using an app)
Let’s start with the manual part.
Shopify made creating your own custom AMP pages a considerable option.
Here is an overview of the process:
- Create an AMP template for products, collections, blogs, etc.
- Create the initial HTML and custom helper snippets (especially for the header)
- Stick to the Google specifications for AMP pages
- Add a small piece of code that will add a <link rel=”amphtml”…> in your pages <head> tag, and <link> tag will point to the AMP version of your page
If it may sound confusing, it is because this is a real technical challenge for sure, but it doesn’t mean it is unachievable!
If you don’t feel discouraged, here are the official steps by Shopify on how you can proceed.
For more info, here is the official Google guide on how to create your first Web Story.
Now, let’s move to the fun part.
Yes, it is certainly possible to create your own AMP pages. But, we guess that you don’t have time and energy to run a Shopify store, provide the best experience for your customers and explore the whole AMP documentation at the same time.
So, we encourage you to experiment with Shopify apps like ProductStories to do the job instead of you, automatically.
How does it work?
Shopify apps that are built to support AMP provide you with an easy way to launch a lightning-fast, mobile-optimized AMP version of your store.
The AMP apps for Shopify are designed to efficiently convert your pages into modern AMP Story formats that are rich and interactive. You can create many page types like product pages, home, collections, blog pages, announcements, etc.
These generated pages are cached and served instantly when accessed using Google Search.
Most of them are free or come at a low cost.
These are just some of the huge advantages of using AMP apps like ProductStories for Shopify.
Scroll down for the steps on how you can start using Product Stories today.
Tools for creating Google Web Stories
Below are a few tools that you can start using immediately to convert your product or blog pages in the Google Web Stories format.
ProductStories for eCommerce
We developed ProductStories as an all-in-one eCommerce tool for Shopify that will help you create fast-loading AMP product pages in Story formats that will stand out in Google search results.
And we didn’t stop here. To create a faster buying experience for customers, we added an option that allows your customer to shop directly from the Web Story.
Again, that was not all.
We went another step further to help you showcase your product not as a Web Story only, but on your website too. Thus, we developed an eye-catching AMP Story widget, unique for each product page that it looks like this:
Feel free to test it out and let us know how you like it. 🙂
WordPress AMP plugin for blog content
This WordPress plugin is as easy as it gets. It is developed by the AMP Project an initiative by enthusiasts who aim to make the web better.
It is an official AMP plugin for WordPress.org that you can install now and start converting your WordPress pages into AMP format.
To do this just go to your WordPress admin dashboard and click Plugins > Add New. Search for AMP and just click Install Now.
Makestories.io for marketing content
If you want to have full control over the AMP stories, we urge you to try MakeStorie. It is in public beta mode and offers tons of editing tools for making appealing web stories.
You can use the stories editor with WYSIWYG and drag and drop editor functionality that will make the process of creating Google web stories very easy, without any coding.
AMPing up for the future
Although the AMP framework is still young, it already started to expand internationally becoming the driving force behind many successful websites.
Now that you are equipped with knowledge on Web Stories, jump on board, and start creating the best experience possible for your customers! They will thank you later. :