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:
Story Quality
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.
See Web Story examples from the Washington Post, Mic.com and FIFA (shown above).
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.
Looking for more resources?
- Intro to Building Web Stories
- Web Story best practices
- AMP requirements for Google Search
- Revised AMP Story Extension Spec
Posted by Lisa Lehman, Web Story Partnerships, Google