You may/or may not have heard about a new plugin by Google, aptly named Web Stories for WordPress. I thought I’d share my findings on this new WordPress plugin, give you the heads up on what to expect.
What Are Web Stories?
Web Stories are a visual way to tell a story, designed specifically for mobile devices. Formerly known as AMP stories, and it’s this framework technology Web Stories is built upon, AMP.
What’s The Purpose of Web Stories?
Web Stories are a way to showcase byte-sized content for mobile devices, typically they vary in size, depending on the topic at hand. Think of them as visual storytelling.
Where Can I Download Google Web Stories Plugin?
As it stands, the Google plugin is still in beta, and it’s due for release late summer this year. That said, things can always get pushed back as with anything in life.
If you’d like to download the plugin and test it for yourself, you can download it via Googles Github.
A word of caution, it is a Beta, so don’t expect it to work 100% and remember Beta plugins could conflict with your current setup, where possible test on a staging site or a spare site, I wouldn’t want you to have any issues.
For this overview/review of the Web Stories plugin, I’m using the Inspiro theme, if you’d like to find out more about this theme, take a look at the demo here.
Installing Google Web Stories Plugin
Once downloaded from Google’s Github, I’ve saved the download to my desktop, headed over to Plugins > Add New > Upload Plugin, and dragged/dropped the file into the choose file box. Done.
Unlike some plugins, there’s no installation wizard, no landing page you arrive once installed.
To find where the Google Web Stories settings live, I had to view the admin sidebar as above. Web Stories installed; next, I’ll show you the settings and what you can expect.
Web Stories Overview
Not a very exciting screenshot, I’ll grant you that, this is where any newly created or draft stories reside.
I haven’t created any so; obviously, it’s a blank slate. One thing did catch my eye. Explore Templates.
Templates In Web Stories
So catching my eye, I thought I’d take a more in-depth look at what templates are on offer for Web Stories. Take a look below:
Currently, the plugin offers eight templates for use; I expect the developers will add more over time, no doubt. To preview a story template, I opened one up to see what it entails.
Template Preview
I’ll be honest here; I expected to preview the template as a story, not what greeted me below:
It would have been great to see the template in action, before choosing it for a web story. Don’t get me wrong this looks good, and being able to click on each story panel and see a version of the panel is a good thing.
The Templates on Offer Are as Follows:
- Beauty
- Cooking
- DIY
- Entertainment
- Fashion
- Fitness
- Travel
- Wellbeing
Not a bad start template wise, a few different niches to choose from, each lends itself well to visual storytelling, Google more than likely knows which stories work best, so it makes sense to offer the most popular first.
Nothing stops you from using a template provided and changing it to fit your needs.
Example of A Google Web Story
To show you how a web story works, take a look below at a video of the Fitness template in action.
It looks brilliant, the template looks great, I’ve yet to test it on a mobile device, and this test was carried out by selecting the template as my base, then previewing on a desktop.
Presently the Web Story is set to auto-scroll through each panel; there’s arrow bars for users to skip to the next one if they wish, a pause button and a share button, the share button shows a link box for a user to click/tap to save the URL to this story.
Google Web Stories Interface
To go through the interface and show you how it all works, I’m using a blank template, so if I come across any issues, I’ll let you know. What’s in store? Please take a look at the below screenshot for a new Web Story:
It’s nicely broken down into three sections and doesn’t look too confusing at first glance. I’ll cover each section so you can decide whether or not Google Web Stories is worth your time.
Media, Text and Shapes
The first section deals with content for a Web Story, utilizing my media library, images I’ve uploaded, display in the first tab. Here I can view all my pictures and videos uploaded to my site. There’s also a handy search box to sift through images/videos.
Text/headings, here I can add some text to my story, a title, subheading, or body text.
The shapes tab has eight preset shapes to use in a story: square, circle, triangle, love heart, star, pentagon, octagon, and a blob shape.
Story Section
The middle section of a Web Story has a few options. Rather than making the above image look like a futuristic map for a deranged road layout, I’m keeping it simple.
- Title of story:- Name your Google Web Story by clicking and adding a title. Think of this as a post/page title in WordPress.
- Page settings:- Switch to draft, preview, and update, nothing new there.
- Settings:- Under the blank page, there are options to (from left to right) delete the page, duplicate the page, add a new page, undo and redo.
- View settings:- It is hard to show in a screenshot of this. The first icon helps you by setting a safe zone for your story. By adding two lines near the top/bottom. I’ve tested this out, and I’d recommend you enable it, I had some text cut off in a test story I created.
- Grid view:- The icon with four squares will display your story pages in a grid view for easy navigation between them.
Design Panel In Google Web Stories
The design section (far right panel) is where your Web Story takes its form. With a combination of text, shapes, and even videos, creating a unique story is relatively easy.
The easiest way to think of the design process for your Web Story is layer-based.
See below for a quick overview:
- Click on an image/video/text to add it to your story. Rotate it, resize it, and more.
- Create an image background or color background.
- Set alignment of a given image/video or heading using the alignment buttons (at the top of the panel), or manually position where you’d like the item to display.
- Set an opacity level of the layer in question.
- Add a link to an item in your story.
- Reposition layers (re-order by dragging and dropping one over the other).
- Accessibility (nice to see) gives the element a name for visually impaired users.
Document Settings
I’m skipping the first option, Status & Visibility; this works on the same basis as a post/page. Instead, I want to draw your attention to the Publishing section.
It’s an essential step in your Web Story, and you NEED to add a publisher logo and a cover image; they are both required.
As it stands, Google’s plugin doesn’t give you an idea of the appropriate sizes for the logo and the cover image, I’ve done some digging and found some recommended sizes, see below:
Logos: Need to be rectangle (not square) and set to 60px (Height) by 600px (Width)
Cover Images: Portrait for best results set to 1792px (Height) by 828px (width).
Permalink, here you can change the text for the permalink, the structure is as follows:
mysite.com/stories/a-google-web-story-by-wpzoom/
All of your Web Stories will have stories prepended in the URL; currently, there is no category or tag solution for Web Stories.
Page advancement, there are two options here, either Auto or Manual (user has to click to navigate). Choosing Auto and using the slider, you can set how long the page will display before moving to the next.
For the record, the max length in seconds is 20 seconds.
Structured Data For Web Stories
One could view Web Stories, as thin content, I mean it’s not like you can fit a lengthy long-form article in them. What does Google see in terms of structured data?
To show you, I’ve done a little test, see below:
Without the cover image and the logo image (or text for a logo), the structured data test through up errors. You must add a cover image and a logo, either text or image-based.
What about SEO plugins and sitemaps? How does Google Web Stories integrate with them?
To answer that question, I did another test, this time I’ve installed Yoast, RankMath, and The SEO Framework to give you an idea.
Sitemaps & Google Web Stories
I tested Google Web Stories with the Yoast SEO plugin, the free one, what happened?
I tested Google Web Stories with the Yoast SEO plugin, the free one, what happened?
Well, Yoast added a Web Story sitemap this way: web-story-sitemap.xml
Next up, I tested using another, popular SEO plugin called The SEO Framework, see below for the result:
Rather than housing them in a separate XML sitemap, The SEO Framework adds them as individual stories.
Lastly (I’d be here all day testing them with every SEO plugin) I checked Google Web Stories with the RankMath SEO plugin:
A separate sitemap is the order of the day with RankMath. As you can see with all three SEO plugins, your Google Web Stories will have no issue with submission to search engines, and you need to know that your story won’t be left swinging in the wind.
Verdict & Final Thoughts
Now some of you reading this will probably think, what’s the point of adding a web story, my content will get indexed, and this is all a fad from Google. I can’t be bothered with it. I’d have to say, I’d agree with you to a degree.
That said, I think there’s a place for them, especially when you consider WPZOOM’s clients use video content (yes, Web Stories support video) and images quite heavily.
Think of it this way (putting on my thinking cap) let’s take an example.
You’ve spent hours putting together a recipe for your food blog, or maybe you’ve put together a video showreel, why not use Web Stories to highlight these?
Create a Web Story to market your food recipe post or video blog post, make it catchy, add short content to each page, and link it to the article.
Ask leading questions, add a call to action to get the answer, drive traffic to your post/page, and use a more visual medium; in this case, Google Web Stories.
I mentioned earlier, if this could be a fad, the effort Google has put into this plugin would suggest otherwise. I’m not saying you need to install the Google Web Stories plugin (it’s still in Beta and not recommended for live sites!), but I’d think long and hard whether your content could benefit from using it.
August 13, 2020 7:37 am
As always, nice overview.
August 18, 2020 11:11 am
Thanks Pierre!