Google Web Stories | Steps To Create, Validate, Verify & Index Posts

Generally, Google Web Stories are a web-based version of the popular Story format, allowing creators to host and own their content. People love watching stories unfold. That’s why tappable story experiences are so popular. Many platforms exist to create these tappable stories and now Google has its own version — Google Web Stories — you can add to a WordPress site.

Web Stories are a new content format on the web, so we’re all learning together what works and what doesn’t when it comes to creating them. For your information, Google Web Stories can appear on either Discover, Android, or even iOS. Particularly, through the latest Google app in the form of a carousel near the top of the feed. Some carousels are geared towards lifestyle.

Other examples of other carousel categories are Beauty, Fitness, Celebrities, Wellness, Entertainment, and Opinions. Web Stories can also appear as a single card that’s part of the Discover feed. This appearance is available in English in the US.  As per WordPress Statistics by Manaferra, the CMS is the go-to option for most looking to launch a business website.

The number of WordPress websites in 2022 is a staggering 835 million (a number they extracted by comparing user percentage and the total number of websites). 14.7% o the world’s top sites are powered by WordPress, counting the NFL, NBC, CNN, etc. So, for WordPress webmasters, this is a great thing to take advantage of, hence, this key guideline article.

What Are Google Web Stories?

Google Web Stories are a visually rich, full-screen content format for the web, which allows you to tap or swipe through stories. Technically, Google Web Stories are powered by AMP technology and are owned by Google. They are immersive, full-screen experiences that you can host on your own website.

The ability to post them on your own site is what makes them different from other story experiences, such as Instagram or Facebook stories. In addition, you can include links, calls to action, and Google AdWords in your Google Web Stories.

Using individual story panels with videos, graphics, and other features, you can share brand narratives that users can click through to experience the story you want to tell. In addition to viewing them on your website, people can also experience Google Web Stories in a Google search, in Google images, or through the Google Discover app, available on Apple and Android.

Owning your Google Web Stories content gives you the full advantage to leverage SEO opportunities and make the most of this immersive storytelling option. That said, every brand has a story to tell — and Google Web Stories helps you tell yours. Do you need some inspiration to get started? Well, you can check this guide for some examples.

Google Web Stories Key Features

Surprisingly, this tool is made for all Web Creators. Through Google Web Stories, you’ll get visual stories that feel like yours, because they are. Hosting your own Web Story makes it all possible.

• Complete Control: Every decision, from how you monetize your story to how long it stays online, is up to you.
• On Brand: With the ability to command every pixel, each story can be designed to fit your brand.
• Immersive: Web Stories allow you to feature full-screen video, photos, and audio, seamlessly.
• Connected: Not only are stories easy to share and embed, but you can also link out to your other content (see how it works).

Equally important, you can also check out and subscribe to the Google Web Creators channel. In order to learn the ins and outs of Web Stories and be part of the growing community (watch video series).

The Key Benefits of Google Web Stories

Mostly, almost every brand has stories to tell. Sharing your stories via Google Web Stories with your followers helps you grow your online reputation and build trust with your customers. Your videos can cover everything, from your company’s culture to new product releases. It’s quite difficult to build the code to create your own Google Web Story.

Fortunately, there are many plug-ins that help you create them. The Web Stories format puts features and capabilities at your fingertips. Especially, in order to engage with your audience via the power of storytelling on the open web.

Specifically, you can:

• Create beautiful and engaging content easily: Web Stories make the production of stories as easy as possible from a technical perspective.
• Enjoy creative flexibility for editorial freedom and branding: The Web Stories format comes with preset but flexible layout templates, standardized UI controls, and components for sharing and adding follow-on content.
• Share and link your stories on the open web: Web Stories are part of the open web and can be shared and embedded across sites and apps without being confined to a single ecosystem.
• Track and measure your stories: Supports analytics and bookend capabilities for viral sharing and monetization.
• Capture the attention of your readers by offering fast loading times to your stories: Web Stories are lightning-fast so that your audience stays engaged and entertained.
• Engage with your readers via immersive storytelling: Web Stories are a new and modern way to reach existing readers.
• Monetize effectively the beautiful and engaging stories you create: Web Stories enable monetization capability for publishers using affiliate links. For advertisers, help them to reach potential users with new content experiences.

Google Web Stories Ad Opportunities

Historically, content creators make money by selling ad space. This is true for everyone from a print newspaper to an online news blog. Google Web Stories can utilize the same concept as programmatic ads.  You can create immersive, engaging stories that include ads designed to flow well with the rest of your story.

Depending on your reason for creating a story, you can add CTA boxes, links to landing pages, and links to product pages. To consume content, you can tap or swipe through Web Stories. When you’re on a Web Story, you can navigate between pages, pause the story, or go to a new story with a swipe.

• Navigate between pages:

  • To go forward: Tap the right side of the screen.
  • To go back: Tap the left side of the screen.
• Pause a story: Press and hold anywhere on the screen.

• Switch between stories:

  • To go to the next story: Swipe left.
  • To go to the previous story: Swipe right.

• Share a story:

  • On your Android phone or tablet: At the bottom, tap Share .
  • On your iPhone or iPad: At the bottom, tap Share

How Google Web Stories Technically Works

Remarkably, it’s just amazing what you can do with a story! Google Web Stories can take many forms. In fact, the best-in-class examples here provide just a taste of what’s possible in this engaging format. Go ahead, create stories you want to tell and the way you want to tell them (Get Started).

To consume content, you can tap or swipe through Web Stories. Google supports Web Stories, so you might find them across Google Search and Discover. And, to make Web Stories pages open faster, Google saves them in the Google cache. When you open a Web Stories page from a Google property, Google sends the cached page to you.

When you use the Google Web Stories Player:

• Google and the publishers & creators who create Web Stories pages sometimes collect data about you.
• Data that publishers collect when you visit their Web Stories page is the same data collected on their original website.
• Publishers may use cookies on their pages. To unlink your activity, you can delete your publisher and Google cookies.

With that in mind, you can learn how to clear your cache and cookies in detail. You should know that Google’s privacy policy governs data collected by Google. The publisher’s privacy policy governs data collected by the publisher.

Publishers can create Web Stories that contain interactive experiences like quizzes or polls. The publisher can integrate these experiences with a backend service to collect user responses. Google offers publishers a backend service in accordance with Google’s API terms of service to make it easier for them to create interactive stories.

Get Started: Download Web Stories Editor WordPress Plugin

Web Stories that use Google’s services might store your responses so the Story can display how users respond. However, your individual response is not associated with your Google Account. Instead, it’s stored for up to one year on Google’s servers. The Story’s publisher can access your response. Google’s Terms of Service and privacy policy apply.

Web Stories are for everyone! Meaning, that if you are a site owner, content creator, or publisher on the web, embracing the Web Stories format would be great. In particular, as a way to enhance the quality of your content strategy. As well as the value you bring to your readers, and consequently your chances of achieving sustainable success.

Knowing that many of their creators would not be coding engineers themselves, Google offers a number of third-party suggestions for developing Google Web Stories. There are a few methods you can use to install your web stories’ key features:

#1: The Newsroom AI Method

Newsroom AI allows you to start creating Google Web Stories for free, with a lot of available features. Even with the free version, you can embed stories onto your website and start getting your stories out on Google. You can track how well your stories are doing with the analytics reporting feature.

Creating is simple. Just set up an account with your Google account and click “Create Story.” Newsroom AI provides a lot of different templates to choose from. Grab one to get started. Next, you’re taken to the “create” page where you can start designing. This is where the visual fun begins!

From here you can change up each page with the content you want, including text, photos, and videos. You can also change the template midway through or choose other layouts and presets. The design options are as limitless as your story ideas. If you find yourself wanting to get more out of the experience, you can upgrade to a paid account.

#2: Installation Within WordPress:

Because WordPress-built websites make up such a large share of websites, we will start there. This plug-in allows you to create Google Web Stories from within your WordPress website’s CMS.

And, since it’s integrated with your website, your WordPress media library is available to your Google Web Stories. The plug-in offers drag-and-drop creation and allows you to publish your story right to your website.

1. First, visit Plugins > Add New.
2. Secondly, search for Web Stories.
3. Then, install and activate the Web Stories plugin.

You also have access to templates to assist your design. If you have a WordPress website, this may be the most obvious and seamless option, especially if you’re already comfortable with the content manager.

#3: Manual Plugin Installation:

1. Upload the entire web-stories folder to the /wp-content/plugins/ directory.
2. Visit Plugins.
3. Activate the Web Stories Plugin.

The Web Stories Editor For WordPress brings together a robust set of story creation capabilities in a user-friendly, WYSIWYG creation tool. Whilst, allowing you to easily create visual narratives with engaging animations and tappable interactions. And, of course, immerse your readers in great and fast-loading full-screen experiences.

Some of the key features you can leverage out of the box are:

• A visually rich and intuitive dashboard, allowing you to easily navigate the story creation process
• Beautiful and expressive page templates to you get your story creation process started quickly and smoothly
• Easy drag-and-drop capabilities, making it easy to compose beautiful stories
• Convenient access to WordPress’ media library, enabling you to grab your media assets right from the plugin dashboard as you create your stories
• Customizable color and text style presets, making it easy to tailor the style of your stories to the needs of your content strategy, and much more!

As you can see, using the Web Stories Editor For WordPress, you can easily create visual narratives. More so, with tappable interactions and share freely across the web, or embed them on your existing content strategies. The Stories you create are yours in every way — they belong to the open web. Instead of being confined to any specific closed ecosystem or app.

Steps To Create Your Very Own Google Web Stories

First of all, before you create your first Google Web Story, think about your brand’s image. What stories should you be telling? Leveraging their power can be an engaging way to get people to care about your brand and what you have to say.

Don’t forget to take a few minutes to storyboard your story first, whether it’s on a whiteboard or the back of a napkin. Sketch out your plan and decide how many panels you need. Which visuals or videos need to be on each panel? Don’t forget your CTA or ads. Next, it’s time to actually start creating your Google Web Stories. Google stories are code-heavy.

Simply put, if you have a coding engineer on your team, they may be able to create the story for you. But, they need to be familiar and comfortable with the AMP framework. If you want to start exploring that route, AMP does have a lot of documentation to support creators. If you’re not a developer, there are a number of tools to create Google Web Stories yourself.

The two key ways to get started:

• Pick one of several Story editor tools to start creating stories without any coding involved.
• If you have engineering resources, you can get started with AMP. To ensure your Web Story renders appropriately, we suggest using Chrome Developer Tools to simulate different device sizes and formats.

Step #1: Tell stories that need to be seen

Web Stories are a visual medium. So when it comes to creating one, think about what people will want to see/hear.

Step #2: Bring your story to life

Using the method of your choice, edit and customize your story just how you like it.

Step #3: Publish and share

Once you’re happy with your story, you publish it to your own site, which generates a shareable link just like a blog post.

Step #4: Be found on Google surfaces

Your story is then surfaced in relevant users’ Google surfaces, like Search and Discover.

Unfortunately, the stories carousel is currently only available in US, India, and Brazil.

Step #5: Integrate on your site

You can showcase all your stories in one place to help drive traffic directly to your website.

Step #6: Monetize with ads

Web Stories support integration with ad networks, including both direct-sold and programmatic ads (learn more).

Step #7: Link out to content

Extend your story with links to videos, articles, products, and even monetizable affiliate links.

In other words, create stories you want to tell and the way you want to tell them (Get Started). To ensure a smooth process, review the Best practices for creating Web Stories. Web Stories are web pages under the hood and must follow the same guidelines and best practices that apply to publishing regular web pages.

Make Sure Your Web Story Is Valid AMP

After you’ve developed the story, make sure the Web Story is a valid AMP. A valid AMP story is one that adheres to various AMP specifications. This allows the Story to be served via the AMP cache and ensures performance and the best experience for your users. You can use the following tools to ensure that your Web Story is a valid AMP per Google Search terms:

• Web Stories Google Test Tool: Check that the Web Story is valid.
• URL Inspection Tool: Check that the Web Story is a valid AMP and the Google indexing status of a URL.
• AMP Linter: Validate Web Stories during development via the command line.

Verify Your Web Story Metadata

For your Web Stories to be eligible to appear on Google Search or Google Discover experiences, supply the necessary metadata to surface the Web Story in the preview.

1. Refer to the full list of metadata.
2. Verify that your Web Story preview appears correctly in the Web Stories Google Test Tool.

Remember that the following fields are required on every Web Story: publisher-logo-src, poster-portrait-src, title, and publisher.

Check If Your Web Story Is Indexed

On one hand, it’s always good to check to see if Google Search has indexed your Web Story. On the other hand, use the URL Inspection Tool to submit individual URLs or review status using Index Coverage Report or Sitemaps report.

If your Web Story isn’t indexed:

• To make it easier for Google to discover your Web Story, link to your Web Stories from your site or add your Web Story URL to your sitemap.
• All Web Stories must be canonical. Make sure that each Web Story has a link rel="canonical" to itself. For example: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">

Note: If there are multiple versions of the same story in different languages, make sure to tell Google about localized versions.

• Check to make sure the Web Story URL isn’t blocked to Googlebot via robot.txt or the noindex tag.

To keep your readers engaged, make sure that you follow the best practices for creating web stories as well. Eventually, I recommend focusing on the critical tasks first. Not forgetting, if you have more time, follow these recommended practices.

Critical Best Storytelling Practices:

Video first: Simply, because, video is more engaging than text or images. Use as much video as possible, and supplement with images and text.

Bring your perspective: Go beyond the facts. Share your opinions. Be the protagonist of your own story. Make it relatable.

Have a narrative arc: Create suspense in your story from one page to another. Bring the user along in the journey by providing context and narrative. Deliver payoff for sticking with you to the end.

Critical Best Design Practices:

Reduce your character count: Avoid including multiple pages with walls of text. Consider reducing text to approximately 280 characters per page (the length of a tweet).

Don’t block text: Make sure text is not blocked by other content on the page. Avoid burning in the text; by not using burned in text, you prevent text from being blocked when it gets resized to fit various device sizes.

Keep text within bounds: Ensure that all text in your Web Story is visible to the reader. Avoid burning in the text; by not using burned in text, you prevent text from overflowing when it gets resized to fit various device sizes.

Use animations mindfully: Bring your stories to life with animations. Avoid distracting or repetitive animations which can cause fatigue.

More Design Best Practices:

Use Web Stories-specific call to action: When re-creating stories that were originally created for a social platform like Instagram, Snapchat, or YouTube, be sure to remove any reader call-to-action specific to a certain platform. Make sure that users are able to follow any actions suggested in your Web Story.

Use full-bleed videos and images: Include full-bleed assets in your stories to create a more immersive experience for readers.

Avoid low resolution or distorted images and videos: Use high-quality images, and take care when resizing images to portraits.

Add a logo to your cover page: Instead, include a high-resolution logo that represents your brand.

Shorten video length: Usually, I recommend videos that are less than 15 seconds per page, or 60 seconds maximum.

Include audio: Use high-quality audio clips that are at least 5 seconds long with balanced volume, and ensure speech is audible.

Consider auto-advance for video-only stories: Auto-advanced experience for video-based Web Stories could work well for a laid-back experience.

Critical Best SEO Practices:

Provide high-quality content: Like any web page, providing high-quality content that is useful and interesting to your readers the most important thing you can do. Include a complete narrative and follow the storytelling best practices to keep your readers engaged.

Keep the title short: In this case, keep titles shorter than 90 characters. We recommend using a descriptive title that is shorter than 70 characters.

Make sure Google Search can find your story: Don’t include an noindex attribute in your story; this attribute blocks Google from indexing the page and prevents it from appearing on Google. Additionally, add your Web Stories to your sitemap. You can check to see if Google can find your Web Stories with the Index Coverage Report and Sitemaps Report in Search Console.

Make the story self-canonical: All Web Stories must be canonical. Make sure that each Web Story has a link rel="canonical" to itself. For example: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">. If there are multiple versions of the same story in different languages, make sure to tell Google about localized versions.

Attach metadata: In addition, it’s also good to make sure that your Web Stories follow the AMP story metadata guidelines. Include markup that you would normally include on your website page, such as:

• • • title and description meta tags
    • Structured data
    • OGP
    • Twitter card

More SEO Best Practices:

Structured data: By all means, I recommend including structured data in your Web Story to help Google Search understand the structure and content of your Web Story.

Alt text on images: Likewise,  I recommend including alt text on your images to improve your story’s discoverability.

Subtitles on video: Uniquely, add captions to your video to help readers better understand your story. Avoid captions that are burned into the video. In order to ensure that they don’t overlap with other content or flow off the screen.

Optimize video-only stories: Personally, I recommend that you use semantic HTML to build your Web Story. However, some Web Story editor tools may instead export a story. More so, that formats each slide as a video file that bakes in all the text into the video. In this case, I recommend that you add the precise text displayed inside of the video as an title attribute on the amp-video element. Again, only do this if you can’t use semantic markup in your Web Stories.

Critical Best Technical Practices:

Make the story valid: Web Stories must be valid AMP pages. To avoid invalid AMP issues, test your Story using the AMP Validator tool and fix any detected errors.

Don’t include text in the poster image: Avoid using images that contain burned-in text, as this could obstruct the title of your story when users preview your story in Search results. If users are unable to clearly read the title, they may be less likely to continue reading.

Include the right poster image size and aspect ratio: Make sure that the image linked to your <amp-story> poster-portrait-src attribute is at least 640x853px. And again, make use of an aspect ratio of 3:4.

Use the right aspect ratio for the logo: Make sure that the logo image linked to your <amp-story> publisher-logo-src attribute is at least 96×96 px and aspect ratio of 1:1.

Include og:image: I recommend including og:image in your <meta> tags to improve your story’s discoverability.

Having said that, to reap more benefits from your SEO strategy, you should try to integrate stories into your website.

Takeaway Notes:

Clearly, I recommend integrating Web Stories into your website, such as linking them from your home page or category pages where applicable. For example, if your Web Story is about a travel destination and you have a page that lists all your travel articles, then also link the Web 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. However, there’s no need to indicate anything in the Web Story URL.

For instance, an indication that it is using the Web Stories format or AMP Stories technology. Ideally, your Web 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.

Related Topic: AMP Stories | How to Start Visual Storytelling on Open Web

Lastly, consider the same URL format for your Web Stories. Try and use AMP story page attachments as well. Keeping in mind, AMP story page attachments can be used to present additional information alongside your Web Story.

In the end, this can be useful to provide extra detail, deep dives, or onward journeys for the content presented in your Web Story. Above all, you should also add support for landscape displays. Perse, to enable Web Stories to appear in desktop Google Search results, add support for landscape displays as well. That’s it! You have everything to create Google Web Stories.

Useful Web Resources:

• Web Stories on Google website: creator-focused resources to making Web Stories.
• Enable Web Stories on Google Search: developer-oriented technical guides on building Web Stories for Google Search
• AMP stories website: developer-focused Web Stories format capabilities.
• Web accessibility: tips to help ensure your Web Story is accessible to all users.
• Structured data guidelines: details on adding structured data to help Google Search understand your content.

Finally, with the above guideline, you’ll be able to create your next magnificent  Google Web Stories. But, if you’ll need more support, you can Consult Us and let us know how we can sort you out. Not to mention, for any additional contributions, thoughts, suggestions, or even questions, you can also share in our comments sections.