What are Google Web Stories, How to Create Them + Best Practices

What are Google Web Stories, How to Create Them + Best Practices

Google Web Stories are a visual content format that enables creators to easily make short videos, images, or animations. They are similar to Stories on social media platforms such as Instagram or Facebook.

Unlike their social media counterparts, you can add Google Web Stories to your website and link them on multiple platforms. They are also quick to load and easily shareable, ideal for generating more traffic to your site.

In this article, we will explain everything about Google Web Stories. You will learn about their benefits as well as how to make and implement them.

Google Web Stories are a format for delivering content in a visual form, commonly short videos. They are similar to Stories on social media channels but not limited to only one platform.

Why Use Google Web Stories

Using Google Web Stories to deliver your content can bring the following benefits to your site.

Reaches a Broader Audience

Typical web stories in social media don’t appear on different platforms, limiting your content’s reach. You must reshare the same stories on multiple social media channels to reach a wider user basis.

Creating content in the Google Web Stories format enables you to reach a broader audience instantly, resulting in getting more clients. In addition to your website, users can see them on other channels, like Google Images and the Google Discover app.

Faster Page Loading

Using Google Web Stories instead of typical video content improves your website’s loading speed. It improves your user experience and search engine optimization (SEO) performance.

Since Google Web Stories are short, they require less bandwidth to load. They are also based on Google’s Accelerated Mobile Pages (AMP) – technology aimed to improve a website’s loading speed.

Note that your site’s story should be AMP valid to provide the best performance and experience. Also, ensure you use a reliable web hosting service to optimize your page loading speed.

Hostinger web hosting banner

Creates an Immersive Experience

Google Web Stories are interactive and occupy the entire device’s screen. Users can switch between stories, pause, or share them by simply clicking on their device’s screen.

A web story occupies an entire browser screen

Mobile users can also interact with them using gestures like swiping. This creates an immersive content consumption experience.

Integration With Google Analytics

Google Web Stories integrate with Google Analytics, allowing you to monitor their performance easily. You can track data such as click rate, average time on page, and bounce rate.

This data is crucial for planning a more effective content marketing strategy.

How to Create Google Web Stories

To help you create your own Google Web Stories, we will explain how to make them in five steps.

1. Create a Storyboard Narrative

A key to successful web stories is a well-written script. It keeps your web stories’ narrative coherent and helps them effectively deliver the content’s message to the audience.

Drafting a storyboard is similar to creating a script for a video. To make the process easier, use Google’s story script template.

In addition to the narrative, consider the following information when planning your story:

  • Metadata – the web stories’ title, excerpt, and permalink.
  • Cover – the front page of your story.
  • Outline – main information you want to cover in the story.
  • Assets – required images, videos, animations, or texts.

2. Choose an Editor Tool

An editor tool is a program that lets you create web stories. While you can use common video editing software, we recommend tools optimized for the web stories format, like Newsroom AI.

These tools have simple functionality, ideal for users unfamiliar with video editing software. They also come with templates and customizable style presets.

Google web stories plugin editing screen

Some editing tools are also available as WordPress plugins, such as Google’s Web Stories. This plugin allows you to create and publish AMP-based stories directly on your WordPress dashboard.

Alternatively, you may create Google stories by writing the code from scratch. This method allows you to add custom functionality but requires some HTML skills.

3. Create the Google Web Story

Once you have chosen your tools and assets, it’s time to start creating your web story. For your first one, Google recommends using the editor tool’s pre-installed templates to speed up the process.

To add visual elements such as videos, images, or texts, simply drag and drop them into the editor tool. Also, add interactive elements such as call-to-action (CTA) buttons to improve engagement.

4. Test Before Launching

Always test your Google web stories before publishing them. Testing aims to catch any errors that may harm usability or user experience.

Closely examine every page of your stories to catch any issues, including typos, wrong element placement, or missing CTAs. Also, try interacting with them to check their usability.

A web story passes AMP validation test

Check if the stories are AMP valid for Google Search using the AMP Test Validator tool. In addition, verify if Google can index your web story using the URL Inspection Tool.

How to Add Google Web Stories to the Website

There are two ways to implement Google Web Stories on your website – using code and a WordPress web stories plugin.

We recommend using a plugin because it is simpler and doesn’t require any coding knowledge. However, this method is only applicable to WordPress sites.

For this tutorial, we will use Google’s Web Stories plugin. While the steps may differ depending on the plugins, the general method is similar:

  1. Download and install the plugin.
  2. On your WordPress Sidebar, click StoriesAdd New.
Add new stories menu in the WordPress sidebar
  1. Create your Google Web Story.
  2. On the sidebar, go to the Document tab. Enter the required information, such as permalink, cover image, and publisher logo.
  3. Click Publish to save it.
The Publish button on the web stories editing screen

Once you create a new web story, add it to your website using the plugin’s custom block. In this tutorial, we will add it to an existing post:

  1. Go to PostAll Posts.
The edit all post menu in the WordPress sidebar
  1. Click Edit on the post where you want to display the web story.
  2. Click the + icon to add a new block and choose Web Stories.
Web Stories custom block in the WordPress post editor screen
  1. Choose one of the three methods to embed the web stories. For this tutorial, we will pick the Latest Stories.
The add the latest stories option in the Web Stories plugin
  1. Select your preferred layout style.
Web stories plugin layout options
  1. Click Update to make the changes live.
The Update button in the WordPress post editor screen

Tips for Creating Google Web Stories

To improve your Google Web Story content, pay attention to the following best practices.

Use Video Content

The Google Web Story format supports different types of content, including animations, audio, or still images. However, Google recommends prioritizing video for web stories.

An example of Google video web stories

Compared to other visual formats, videos are more engaging and suitable for delivering a story narrative. You can use texts, images, or animations as supplementary to create more engaging stories.

Here are the ideal video criteria for web stories:

  • Shot with a high-end mobile device when possible
  • At least 720p with portrait orientation for mobile use
  • Minimum 24 frames per second
  • Less than 15 seconds per page

Showcase Your Brand Identity

Users can find your stories without landing on your website. For example, they may appear on Google search results when users enter relevant keywords.

Therefore, include brand identity to show new audiences the content’s owner. You may put a logo or use a color scheme that represents your brand.

Given the stories’ large audience reach, including brand identity allows more people to know about your business. This makes Google Web Stories a great tool for building your brand.

Use Engaging Elements

To improve engagement, include interactive elements in your stories. These elements can be CTA buttons, polls, Q&A fields, or links to other pages.

Google web stories with engaging text to entice user interaction

Also, make your stories multiple pages and include directive texts like “Tap to Learn More” to encourage interaction.

However, avoid placing too many elements on your stories. They may divert viewers’ attention from the actual content or cover important elements.

Ensure Your Stories Are AMP Valid

Since Google stories are based on the AMP platform, they adhere to various AMP specifications.

Non-valid stories can’t run on the AMP cache and may not perform correctly. To check their AMP validity, use an online validator tool.

Story Titles Should Be Up to 90 Characters

Your stories’ titles should be descriptive to help viewers understand their content. But according to Google, the ideal length for your story’s title should be less than 40 characters or 10 words.

You may use a longer title, but keep it between 70-90 characters. Your story title may be omitted if it is longer than 90 characters.

Add Alt Text and Subtitles

Improve your web story’s accessibility by adding alt text to your images and subtitles. It allows users to understand your content without seeing the image or hearing the sound.

Subtitle in a Google web story

Ensure the subtitles contrast the background for readability. For alt text, make it descriptive and include relevant keywords to improve SEO.

Google uses alt text to understand your images’ content and their relation to search terms. If the search engine understands your site content easily, it will rank your page higher.

Add Site Stories to Your Sitemap

Add your web story to the sitemap to allow search engines to index it. Otherwise, it won’t appear on the search engine result pages.

Web story in a website's XML sitemap

To automatically create an XML sitemap, use an online tool or a WordPress plugin such as Yoast. Then, submit it to Google Search Console for indexing.

Google Web Stories Examples

Check out the following Google Web Story examples for your inspiration.

1. What Are Superconductors

What Are Superconductors story example

Created by Seeker, “What are Superconductors?” utilizes multiple story pages to entice user interaction. The story’s cover page presents an interesting video with a question, attracting viewers to find the answer by going to the next slide.

2. How Stuff Is Made: Money

How Stuff Is Made Money example

The web story’s multi-page format lets you break content into smaller pieces. As a result, visitors will be hooked on the content and absorb the information easily.

As Refinery29 shows, this format is especially useful for complex topics with a lot of information.

3. 5 Destinations to See Wildlife with Your Kids

5 Destination to See Wildlife with Your Kids story example

As Lonely Planet demonstrates, stories are a great format for listicles. They allow you to put each item on different pages, making your content more organized.

Conclusion

Google Web Stories are visual storytelling mediums that allow users to deliver content in short videos, images, or audio formats. They are quick to load, immersive, and can reach a wider audience.

The best way to make and add stories to your website is by using a WordPress plugin. Here is the recap of the steps:

  1. Create a storyboard narrative. Plan the story’s script, metadata, and required assets.
  2. Choose an editor tool. Determine what tool you will use to create the story. We recommend Google’s Web Stories plugin due to its simplicity.
  3. Create the web story. Use the tool, script, and assets to create the web story.
  4. Conduct testing. Ensure your web story is error-free and works properly before launching.

To achieve the best result, follow the best practices like prioritizing video format and ensuring AMP validity. In addition, combine Google Web Stories together with Google Ads to get even more traffic.

Google Web Stories FAQ

In this section, we will answer some of the most frequently asked questions about Google Web Stories. If you have another question, leave a comment below

Can Google Web Stories Be Monetized?

Yes, you can display ads on Google Web Stories to monetize your website. There are two ways of doing it – joining an affiliate program or using Google AdSense.

If you join an affiliate program, put the partners’ links or product endorsements in your stories. For Google AdSense, read Google guide’s about AMP stories monetization to learn more about it.

Are Google Web Stories Worth It?

Yes, creating Google Web Stories is relatively simple and cheap but provides many benefits.

Google Web Stories are as engaging as video content but quicker to load and more immersive. They also appear on multiple Google platforms, helping you reach wider audiences.

Author
The author

Aris Sentika

Aris is a Content Writer specializing in Linux and WordPress development. He has a passion for networking, front-end web development, and server administration. By combining his IT and writing experience, Aris creates content that helps people easily understand complex technical topics to start their online journey. Follow him on LinkedIn.