Given this expanding universe of creators and consumers, it is time to transition the stories name from AMP (which continues to be the underlying technology for a fast, consistent and reliable user experience) to the web, where creators and users will experience stories. Moving forward, we’ll refer to the format simply as Web Stories. Web Stories live on the web, and continue to allow publishers or creators to control their content- just like any other web page.
The AMP team broadly, folks at Google and publishers we’ve spoken to are excited about the future of the Web Stories format. Over the coming months, we will share many more highlights of publishers using the Web Story format, as well as guides to easily creating stories with new tools coming online.
Now is a great time to give crafting Web Stories a shot. You can try one of these easy to use drag and drop authoring tools, or dive deeper into more technical documentation at amp.dev. And, of course, if you have had a great experience with Web Stories, please share with us! We are always eager to hear your feedback as creators and readers.
Posted by Varun Rao, Web Stories Product Manager, Google
Web Stories are a new, exciting medium for storytelling on the web powered by AMP. The format is based on the same concept as familiar Stories features in popular social networking apps but intended for more general purpose content from “how to apply lip gloss the right way” to a “travel guide through the Himalayas”. Importantly, Web Stories are just web pages. They have a URL on your web server, they are linkable, they can link out to other web pages, and they can appear in search results. With that the biggest takeaway for SEO of Stories is:
Do all the SEO things you would do for any other page on your website. If it helps rank your non-Story pages, it’ll probably help the Stories as well.
In particular, just like other pages on your site, make sure your Stories are linked from within your website so that your users and bots can actually discover them. If you are using a sitemap, make sure to include your Stories in that sitemap. If you are posting your regular web pages to social media, post your Stories as well. We could go on here, but the gist really comes down to: Follow the best practices you’re already applying to the rest of your website.
Stories specific SEO tactics
Given the relative newness of this format on the web and its unique characteristics, there are SEO tactics specific to Stories. These tactics aren’t comprehensive and should be augmented with all the standard SEO work being done for your web pages that’s described above.
Web Stories have a built-in mechanism to attach metadata to a Story. Make sure all your Stories follow these metadata guidelines. This ensures maximum compatibility with search engines and discovery features that take advantage of that metadata.
We recommend deeply integrating Stories into your website such as linking them from your homepage or category pages where applicable. E.g. if your Story is about a travel destination and you have a page that lists all your travel articles, then also link the Stories on that category page. An additional special landing page like www.example.com/stories (which would then be linked from key pages like your homepage) might also make sense.
Links from within your site and to other websites are a critical component of how the web works and optimizing for discoverability. As Stories are web pages themselves, this is also true for them.
There is no need to indicate in the URL of a Story that it is using the Web Stories format or AMP Stories technology. Ideally your Stories are integrated into a wider URL strategy. For example, if your “New York Travel” articles are using a format like “/new-york/travel/title-of-article.html” then consider using the exact same directory structure and URL format for your Stories.
Page attachments can be used to present additional information in “classic article form” alongside your Story. This can be useful to provide extra detail, deep dives, or onward journeys for the content presented in your Story.
While this best practice technically applies to all web pages, we have seen folks omit “alt” text for images in Stories. We strongly recommend adding meaningful “alt” text where appropriate to optimize for accessibility and indexability of your content.
We recommend that you take full advantage of semantic HTML to build up your story. However, some tools designed for the social media use case may instead export a story such that each slide is represented as a video file that bakes in all the text into the video. In this case it is recommended to add the precise text displayed inside of the video as a “title” attribute on the amp-video element. Again, only do this if you absolutely cannot use semantic markup in your Stories generation.
While the Stories format is traditionally associated with mobile consumption, Web Stories also work on desktop with optional support for landscape displays. This means that your Stories can also appear in desktop search results without any extra work.
AMP’s canonical-pairing is not supported
Although Web Stories are created using the AMP framework, Web Stories should be self-canonical. That is, the <link rel=”amphtml”..> pairing that is frequently used by AMP Pages is not available for Stories. A long form article (or standalone video) and a Web Story about the same topic are different stand-alone web experiences; one should not be canonical for the other. However, if you have a separate story webpage with the same content as a Web Story, you should consider making the Web Story canonical. Make sure to AMP-validate your Web Stories.
TheSecret of SEO
As a final reminder: Content is king! Like any web page, providing high quality content that is useful and interesting to your users is and will always be the most important “SEO tactic” that cannot be ignored and takes precedence above all else. Include a complete narrative and follow these best practices to take advantage of the unique characteristics of the format to keep the users engaged.
SEO for Stories is like SEO for any other web page. Your SEO skills should translate 1:1 to Stories. A limited number of Stories-specific SEO best practices exist and they are documented in this blog post. Finally, remember to include high quality content and good luck optimizing your Stories!
Posted by Flavio Palandri Antonelli, Software Engineer at Google
Updated March 24, 2020 to clarifyhow AMP’s canonical-pairing is not supported by Web Stories.
Updated May 20, 2020 add link to Web Stories on Google Search.
Editor’s Note: The following guest post was written by Pratik Ghela, Product Manager – MakeStories.
Visual storytelling helps businesses and organizations engage their audiences in immersive content experiences. And putting together compelling online and mobile stories doesn’t have to be difficult. That’s why we created MakeStories, an online drag/drop building tool for AMP Stories. We provide users with a library of royalty-free stock images, illustrations, and other graphics to bring their storytelling to life. With no coding knowledge required, our goal is to give even non-technical people the tools to quickly and easily build AMP Stories around their brand content.
To give some insight into the process of creating an AMP Story, we are sharing a conversation we recently had with one of our users, the United Nations Development Programme. We came to learn about their work with AMP Stories through Twitter, where our team would help them answer product questions they had. With some support from our team, they were able to create a powerful Story about the Sahel region in Africa to share with the world.
The UNDP’s Story combines dramatic photography and video of the region’s people and places, with captions and graphics describing the humanitarian, economic, and environmental challenges and opportunities in the area. Its click-through format is easy to view on both mobile and desktop devices, combining photos, videos, narrative, and graphics to create an immersive storytelling experience.
Here’s what UNDP’s Digital team had to say about how they created their Story:
How did you hear about AMP Stories? Why did you think Stories would be a good fit for the UNDP? We noticed a great story published by the Washington Post on the Hong Kong protests. We were impressed by the immersive experience and started researching the technology stack used for its production. We discovered that it was an open format called AMP Stories and decided to give it a try.
Tell us about the Story you made…
We wanted to highlight UNDP’s work in the Sahel region in a powerful visual format. The Story shows the potential of investing in the region’s youth and natural resources, which could help address the triple threat of poverty, exclusion, and climate change.
How did you choose your subject matter and what made it a good fit for Stories?
The timing was good because the Intergovernmental Panel on Climate Change (IPCC) had launched its new report on Africa. Also, the G7 Development Ministers’ meeting was focusing on the Sahel and made announcements about UNDP projects in the region, such as a youth entrepreneurship initiative. We had impactful photos and raw video footage from the Sahel region, so we thought that AMP Stories could be a good opportunity to explore a new storytelling format.
How did you decide to use MakeStories? Our own development resources were tied to other projects, and we wanted to see if such a Story could be produced by someone without a programming background. We had already experimented with other multimedia story platforms, but the AMP Stories format seemed like it wasn’t too complicated to produce, which made MakeStories a quick winner.
Can you tell about the process of making a Story?
The process was pleasant and smooth. MakeStories allowed our graphic designer and editors to build a Story from scratch without developer intervention. The challenges we faced at the beginning were understanding the tool and being able to generate templates to have a coherent look—and that took about 8 to 10 days to build. We worked with the MakeStories team throughout the journey, including when we had questions, which made the process even simpler.
What was your experience like hosting the Story once it was created? It was absolutely seamless. MakeStories offered a landscape view mode feature available on request that helped us to get an idea of the landscape version before uploading. Landscape mode required minimal customization thanks to the way the HTML/CSS is coded. We downloaded the exported package, added some customizations and after that, we just put it into the Github repository and published via Github pages.
How was your Story received by viewers?
We have received a lot of positive feedback from colleagues and partners who praised the creativity and engaging experience with this Story. The Story was posted prominently on our site in the top image slot and on social media. Additionally, the Story surfaced in Google Discover, which drove a significant amount of traffic.
How were people interacting with your Story? Did you see different behaviors on desktop and mobile?
We did not track the number of clicks. We saw that 75% of views of the English version were from mobile, but the average time on the page was longer for views from the desktop. This shows that while the format looks like mobile-first, it works on desktop as well.
Can you tell us the range and types of stories, campaigns, or initiatives you might use AMP Stories and MakeStories for in the future?
We might use AMP and MakeStories in the future to promote our multimedia pieces where we showcase our headline stories, with fresh visual and editorial content from around the world. MakeStories is a good fit for our storytelling efforts because it allows us to quickly create a Story from scratch without the need of a developer, where the designer can create slide templates and the editors quickly edit into different languages.
Have you produced additional Stories? If so, what MakeStories features did you use?
After our first experience with MakeStories, we created a second Story about how climate change will affect the way we eat and all the hidden costs of unsustainable food production. For this Story, we used illustrations (and animations in some slides) to explain, complement, and clarify some of the facts in the text to create a more engaging and appealing Story.
What would you tell other organizations about Stories and MakeStories?
Storytelling is essential for advocating for sustainable development. As an organization that constantly produces stories and digital experiences, having a platform that allows us to create appealing and intuitive content with low effort in the production process significantly improves our efficiency and experience we offer to our audience.
Storytelling is who we are. It’s how we connect with each other. Since the first humans carved out scenes on cave walls, people have used visual storytelling to share information and experiences. The tools for future storytelling are evolving, with engaging new ways of conveying information, and users now prefer tappable stories for consuming content on the web.
What stories could you be telling to inform your audiences and engage them in your mission? As the folks at UNDP describe, MakeStories makes it easy to create visually compelling stories and share them with the people you want to reach—in a mobile-friendly, easy-to-view, click-through format. Check out MakeStories and get started with your first Story today.
Written by Pratik Ghela, Product Manager – MakeStories
Tappable stories have become a major part of the way consumers engage with content — in fact, 60% of weekly mobile content users now consume tappable stories daily on social media. What are tappable stories? They are interactive experiences on mobile devices that allow users to interact with full-screen visuals like images, videos, and text. This popular format, however, has mostly been limited to the closed platforms it typically lives on. Publishers can benefit from tappable stories by providing consumers with innovative content experiences – not only on their social platforms, but on their mobile sites with Web Stories.
To better understand the potential results Web Stories can provide for publishers, Google commissioned Forrester Consulting, a leading global research and advisory firm, to evaluate consumer appetite for tappable stories on the mobile web. The study, titled “Publishers: Capture The Mobile Web Opportunity With Tappable Content”, was conducted September 2019.
To conduct the analysis, Forrester carried out an online survey of 2,062 US online consumers ages 18 to 65 who consume publisher content at least weekly from a mobile device, as well as 22 remote unmoderated user tests with the same audiences. Both studies had participants interact with real-world examples of tappable stories on the mobile web as well as scrolling article equivalents. Forrester found that 64% of respondents preferred the tappable mobile web story format over its scrolling article equivalent.
Some of the key results from the study:
74% of smartphone users read or view social stories at least weekly. The demand for consuming social stories is higher than consumers’ desire to share their own stories. Publishers have the opportunity to fill the supply and demand gap on their own mobile sites, which can yield advertising revenue and richer data insights.
84% of users felt tappable stories met or exceeded their expectations for ease of navigation. Consumers were also 1.4x more likely to find the method of navigating the tappable story appealing, compared to its scrolling equivalent.
Over 75% of users are at least somewhat interested in reading tappable stories in their most-read content categories. Data from the study also revealed consumers are highly interested in consuming evergreen lifestyle content from the following categories:
As the Forrester Study suggests, there is a unique opportunity for publishers to reach their audiences with a familiar tappable stories format. Web Stories bring that format to the open web and allow publishers to take control of their content without being confined to a single ecosystem. The technology behind Web Stories is still relatively new, but developers have a few options to get started.
You can read the full study here, detailing the opportunity for publishers and content creators to reach existing readers as well as new audiences with a unique, engaging format on the web. The Web Stories format lives online as a web page, and thus is indexable and a part of the open web, allowing anyone to try it on their own site. Web Stories advertising options are still nascent, but we are investing heavily in expanding this area. We are excited to see the results publishers achieve with this mobile-focused format for delivering information as a visually rich, tappable story.
Written by Alex Durán, AMP Project Marketing Lead at Google
Web Stories are a new way of telling stories on the open web. The stories are hosted on your domain, and the format allows you to add assets best suited for the job. Since the 2017 launch, we’ve seen many, many, many examples of engaging and informative stories published to the web.
Analytics capabilities of Web stories
Web Stories use amp-analytics, the same robust measurement tool behind billions of AMP pages. Publishers can instrument their stories using simple JSON configuration, and the component does the setup, collection and reporting of metrics. If you’re using one of the 75+ analytics vendors that are already integrated with AMP, you can start collecting insights with very minimal setup.
A typical user-journey for a website is very different from stories. On a website a user might read the headline, scroll to the bottom of the page, interact with a form before clicking on a link to the next page. Stories occupy the full viewport and users do not scroll but tap to move forward.
Many in the web analytics community would consider each new page in the story as a new pageview because the content from screen to screen is substantially different. However, as we just covered, the page is just a single element in a full story — and a user usually needs to see many pages to get a full sense of the story. Thus, the question of how we count something as simple as the pageview has enormous implications for our analytics approach. As you see from above, treating every new story page as a pageview could be perceived as inflated metrics.
A better default configuration
AMP Analytics makes it easy to implement the above using any analytics vendor. For instance, with Google Analytics’ Global Site Tag it looks like so –
This default config should give you a complete working configuration for your Web Stories.
If you’re interested in going beyond what the default config can give you, read on to find more advanced use cases with Google Analytics.
Insight #1: What’s my most visited page/slide for a given story?
Create a dashboard in Google Analytics’ web interface by going to Customization > Dashboard
Assuming you assign unique names to your Web Stories in “event_category”: “Title of my story”, we can see what pages were visited mostly by creating a bar graph in your custom dashboard picking dimensions “event_category”, “event_label” and metrics “Hits”.
Make sure to add a filter so that you are filtering “Event Action” to exactly match “story_progress”:
Insight #2 What’s my most visited story across the site?
Create a dashboard in Google Analytics’ web interface by going to Customization > Dashboard.
Assuming you assign unique names to your Web Stories inside your <title></title> tag pair, , we can see most commonly visited pages by creating a bar graph in your custom dashboard picking a grouped by dimension “Page Title”, and choosing the metrics “Pageviews”.
Insight #3 : For a given story, how far into the story users typically go
Since the story progresses from slide 1 to slide N, it is natural that slide 1 is seen by almost everyone, slide 2 a little less and the number progressively goes down. If there are any problematic slides, you will see a dramatic drop in slide viewership from the previous one. The following dashboard will help you visually capture any problematic pages.
You can use the dashboard that you created before ( Insight 1 : Most visited pages by story) to visually capture this
Insight #4: What’s the average number of pages my users see per story?
It is also possible to track events on an average. For instance, story progress can be used to track average story depth.
Navigate to Behavior > Events > Top Events.
With “Event Category” as the primary dimension, click on the pie chart icon.
Add a Secondary Dimension as“Event Action”.
Click on Advanced. Select “Event Action” and select “Story Progress” in the filter and apply.
Select “Avg. Value” from the drop down.
Insight #5: How long on average do users spend on my stories
Since we announced the developer preview of Web Stories formerly known as AMP Stories, we’ve been focused on ensuring the format is an easy and compelling way for publishers to create visual content on the web. It’s been exciting to see the experimentation and direction that some early testers have taken with the product.
Naturally we’ve also had a lot of people asking us to share early learnings about Web Stories – what works, what doesn’t – so we’ve tried to compile a quick run-down of best practices here:
1) Web Stories are just that – stories, intended to communicate a message, explain a situation, an event, a person, a concept. Publishers should be telling important stories worth reading that are both visually-rich and share relevant information in their text accompaniment. We’ve seen visual stories created in a variety of content categories, from sports to recipes to hard news to entertainment. Some things to avoid:
Web Stories which are just image slideshows or auto-generated are often lacking the core content that users are expecting and looking for when choosing what to read.
Web Stories should be complete, self-contained articles; they should make sense and be useful to the user without requiring the user to link out.
2) Asset Quality Matters: We see dramatically better user engagement when the right assets are selected and properly formatted for a Web Story so they feel native to the experience. Beyond relevance, that means the images and videos are high-resolution, portrait-oriented, and full-bleed as it makes the experience more immersive, beautiful, and engaging to users. While we know leveraging existing assets can expedite story creation, it’s critical that the assets selected feel native to the experience and are best-suited to the dimensions of the device they are being viewed on.
3) Go Beyond Still Images: Some of our most engaging Web Stories incorporate short videos or Ken Burns effects to deeply engage the user. When using video, check out our video documentation on AMPproject.org, including these tips:
Best practice is to use 720p, which at a 3:4 aspect ratio is 720px width by 960px height: Over-indexing on high-resolution video unnecessarily slows down the story load times for diminishing returns on quality.
If audio is used, it’s important that the Web Story can stand on its own with the audio turned off, given that a fair amount of consumption happens when users are on-the-go and may not want to turn audio on. For this reason the AMP framework supports captions, as well as the ability to specify whether a video contains audio via the `noaudio` attribute.
Building an Audience & Monetizing It
4) “If a great Web Story gets created but no one sees it, did it happen?” Because Web Stories are self-canonical, the quality and relevance (across the web) is derived from the Web Story itself. Like any other webpage, these signals are important in order to be served by platforms like Google Search. Publishers must promote their Web Stories to users on their own homepages and sites, via social channels, and any other standard mechanisms of promotion. News publishers should consider linking from a Google News sitemap.
5) Discoverability & Indexing: There are a number of things that publishers will want to do to ensure that Web Stories – while they may be visual-heavy – have the necessary metadata and text structure to ensure Google can discover and understand Web stories:
Make all text crawlable: Use text overlays, rather than baking titles or accompanying text into images or videos themselves.
Apply structured data markup: Like AMP, publishers should include the appropriate structured data in addition to the Web Story specific metadata. Note that there are unique sizing requirements for the primary thumbnail and publisher logo images specific to Web Story documents.
6) Experiment with monetization: While it’s just been a few months since we shared public documentation on github for Single Page Ads on Web Stories, we’ve begun to see early adoption of the format leveraging both image and video assets. We’ve also seen experimentation with ad real estate to run experiments for their own products and for their own podcasts, newsletters, etc.
Tooling & Development
7) Test early and often. There are self-service tools available (Google’s AMP Test site and AMP Validation Testing Site) so publishers can test out Web Stories prior to pushing them live and identify and solve for errors. Additionally, publishers can test structured data markup here. The Web Stories community will look to make these tools even more robust over time and would love feedback on how to make them more useful.
8) Make It Yours!: Web Stories is an open-source project and its success will depend on the contributions of publishers and partners around the globe contributing feedback, requests for functionality, and even code themselves. Captions and subtitles support was added to the project by an organization that wanted support for the feature, but needed it quickly. With a bit of guidance from the AMP team, they implemented the feature, making it available to all here. If you have questions or thoughts, don’t hesitate to reach out to us via the right channel here.
We’re excited to continue to work with partners to evolve the format and look forward to hearing – and seeing! – from you.