That Website Is Me

WordPress Web Stories - Snackable Content for Everyone

WordPress Web Stories - Snackable Content for Everyone

What are Web Stories?

Google Web Stories brings together images, video, and text in a beautiful and animated visual flow and provides an engaging and visual way to consume content in a full-screen experience. They combine the user experience of social media Stories with the reach and visibility of the web.

Web Stories are just like Social Media Stories (Facebook Stories & Instagram Stories), but Web Stories can be edited, displayed in the Google Search Engine, and to be shared with anyone on the web.

On the 1st of May 2020, the AMP Team decided to rename AMP Stories to Web Stories and confirm that more features are coming in the upcoming months.

We can be of service adding Web Stories to your WordPress Website: Find Out More Here

But why are Web Stories good?

They are bite-sized content - great for quickly reading or learning about a topic on the go. With mobile being a leading device in browsing the internet, these web stories help you turn a video or a long blog post topic into small, easy to use, media content. You can inform your audience or promote your products or services in a format tailored for mobile. Web stories offer tappable interaction for your reader where you can insert call-to-actions to display more information (links to other pages, websites, stories).

Plus, these stories are indexable in Google, can be shared on social media platforms, and are super fast to load onto your device.

Once Web Stories meet the criteria for Google Search, they can be eligible for display in a variety of ways on Google. Web Stories can display within Google as a single result, can be included in a grid view (US Only), can also appear in Google Images (All regions and languages), and can appear in Discover (US Only).

Visual Stories In Google Search
Visual Stories In Google Search

How can Web Stories be used?

Large news networks are using them already as another content type for sharing the latest news. But web stories are not limited to news content - you can use them for just about anything.

See a Web Story as a piece of content loosely coupled with your main content. For instance, you have a long-form content such as a “definitive” guide. You could create a short story containing the essence of your article in a few slides. Then, share the story via your social network or in your newsletter. If your audience likes it, they might continue reading the complete article.

If a user accesses the Web Story via computer or non-smartphone device, then the story will be displayed in the same format just with the hazy background covering the areas of the screen where the story is not taken up.

Inspiration from use cases and examples

CNN

CNN has short news stories to help quickly share their latest or even evergreen content.

Right now, you can view a selection of stories by heading to g.co/ampstories on your mobile browser, when you tap on the link it will open the normal Google page then type CNN and you will get the search result page with CNN stories at the top. This testing feature only works on mobile devices at this point.

National Geographic

Google shows an example of one here: https://www.nationalgeographic.com/amp-stories/travel/europe-hidden-villages/

It ranks first for "europes hidden villages" - the user experience is pretty good on mobile and desktop. This was not create with the WordPress plugin provided by Google.

L’Oreal

L’Oreal, for their product La Roche Posay, delivered a great offline-to-online experience for its customers.

By scanning a QR code in a physical shop, you are sent to the AMP Story and receive additional information about the product in the format of a story. You can then start an immersive product experience from your phone, in the store.

Boost

Boost is a Fintech company helping their customers finding, comparing, and buying mobile airtime bundles in Kenya.

Their target audience is young people consuming most of their online content through mobile.

The time spent on site went from 20 seconds with blog posts to almost 4 minutes with AMP Stories. And 87% of their readers click through the very end of their stories.

The Washington Post

Just like CNN, washingtonpost.com also have news in the Web Stories format for both recent news and evergreen content.

Portraits from the front lines of the pandemic, through the lens of the 19th century

sleepenvie.com

Sleepenvie® uses Web Stories to showcase their products such as their customizable sofas.

Are Google Web Stories Right For My Business?

Any business with a content marketing strategy could likely find a way to incorporate AMP stories into their plans – through quick tutorials, product reviews, top lists, etc. As these are new, there is very little data on what works better than others.

So far, feedback appears to be good from existing publishers like The Washington Post, who told Search Engine Land that the format is best suited for content that easily translates to “a highly compelling and visual story that you can tell in a few slides.”

We can be of service adding Web Stories to your WordPress Website: Find Out More Here

Types Of Stories
Different Types Of Stories
Web Stories Hero Dashboard
Web Stories Dashboard

How to enabled and add Web Stories to your WordPress Website?

Google has a plugin for WordPress, which has a nice WYSIWYG builder feature for creating your web stories, with a range of templates to get you started. Basically, it is easy drag-and-drop amp stories builder for everyone.

  • For an optimal Web Story creation experience, it is recommended to use the latest version of commonly popular web browsers (Chrome, Firefox, Safari, Edge).

  • For better chances of being discovered, after publishing your Web Story, it is encouraged you embed it into a regular article or post on your site by using the Web Stories Gutenberg block.

    While the default sitemaps in WordPress and most popular plugins handle it automatically, though it is encouraged you check that your Web Stories are included in your XML sitemaps.

  • Web Stories created using Web Stories for WordPress use what’s provided in the Document tab inside the editor to generate schema.org and social meta-data automatically. Ensure you review and update all requested metadata, including cover image, excerpt and publisher logo. Please see SEO for Web Stories for further SEO guidance.

How do I install the Stories for WordPress plugin?

The plugin is available on WordPress.org with a dedicated website to the plugin found here.

  1. Navigate to Plugins > Add New.
  2. Search for "Google Web Stories"
  3. Click the Install Now button.
  4. When the installation is complete, you’ll see “Plugin installed successfully.” Click the Activate Plugin button at the bottom of the page.

A new menu item will appear in your admin menu dashboard called "Stories".

Note: You may need to flush your permalink settings for the stories to appear.

Warning: You may need to exclude the web stories from your cache plugin.
WP Rocket was adding some HTML tags that Google Does not like in an AMP page. Go to: Advanced Rules -> Never Cache URL(s) and enter in /web-stories/(.*)

Web Stories Wp Rocket Cache Issue
Web Stories WP Rocket Cache Issue

How do I create my first story in WordPress?

This could be its' own blog post (or Web Story) so I will just link to some resources:

Best Practices for Web Stories

Here are some technical guidelines that can help your Web Story succeed.

  • Completeness: Make sure that your Web Story is complete, tells the full story, and isn't overly commercial. Here are some examples of what to avoid:
    • Web Stories that require users to click links to other websites or apps to get essential information.
    • Web Stories that have more than one outlink or attachment per page. The outlinks and attachments must include the appropriate disclosures.
  • Affiliate programs: If you use affiliate links in your Web Stories, Google recommends that you only use one affiliate link per story and that you follow the Quality guidelines for affiliate programs.
  • Story length: Google recommends that the length of your Web Story be between 5-30 pages, with a suggested target of 10-20 pages. (But technically, you can have anywhere 1 to 30 pages)
  • Title length: Use shorter titles. Google recommends that your title length be less than 40 characters.
  • Text: Keep the text on each page short (less than 200 characters per page). Focus each page to a single idea.
  • Video: If you use videos in your Web Stories, Google recommends that videos be less than 15 seconds per page, and definitely less than 60 seconds per page. We also recommend that you provide captions for the video. Video size must be less than 4MB and in MP4 format. If your video is too long, cut it in smaller pieces and display a piece per page.
  • Background: Provide a background colour matching the dominant colour of your story.
  • Font: Choose a font colour with enough contrast to your images, video and background colour.
  • Images: Vertical image ratio is 9/16 and the recommended image sizes are:
    • 828 x 1,792
    • 720 x 1280
    • 540 x 960
    • 360 x 480

How do I add Google Analytics Tracking to my Web Stories?

As of Web Stories Version 1, there is a place you can enter in your Google Analytics Tracking ID. Head to Web Stories -> Settings and it should be the first field you can enter in your GA ID.

Web Stories Ga Id Code
Web Stories Ga Id Code

Visually & Technically Check Your Stories

Clear your website cache (if you have it) and your browser cache, and navigate to your testing story.

Then head over to Google's AMP testing tool and put in your stories URL. That should tell you any other issues to work on if needed.

Service: Adding Web Stories To Your Website

We can be of service adding Web Stories to your WordPress Website: Find Out More Here

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Reading

The Power of Voice (In A Website)

Voice. The sound we make by vibrating air that allows one person to share thoughts with another for better understanding. But what happens when websites take on this trait?

Read More

cogheartenvelopelaptop-phone
0
Would love your thoughts, please comment.x
()
x