Web Stories are one of Google’s latest pushes for content creators. Google is actively working to get more rich content in the search results.
So let’s learn how we can make the most of Google’s push for rich content by creating web stories using the Web Stories plugin by Google.
1. Install the Web Stories Plugin
To get the Web Stories plugin, you actually have to go download it from github. Here’s a link to the page where you can get it.
Just click on the “Download” button and it’ll download it to your computer as a zip file.
Keep in mind that as of the time of this writing, this plugin is still in beta testing. That’s why you have to get it from github. But we’ve used the plugin quite a bit and it appears to be stable. The risk in using it right now is very low.
Next, we’ll have to upload that zip file you just downloaded to your WordPress website.
To do that, go to Plugins and then click on Add New.
On the next page, click on “Upload Plugin” in the upper left.
Now click on “Choose File”. Find the web-stories.zip file that you downloaded. It’ll probably be in your downloads folder. Then click on “Install Now.”
When it’s done installing, click on the “Activate Plugin” button and the Web Stories plugin will be ready to use. After this step, you’ll see an item on the left side of your WordPress dashboard labeled “Stories”.
2. Learn the Web Story Guidelines
Before we dive into how to make a story, we need to talk about how to make sure your stories meet all of Google’s guidelines. These criteria will help make sure your stories have their best chance of showing up at the top of the Google SERP (Search Engine Results Page).
Completeness. Your web story needs to be a complete piece of content. That means it needs to not require users to click to another web page to get the rest of the story.
This doesn’t mean that you shouldn’t have a call-to-action in your story. You definitely should.
But it means that users shouldn’t have to go somewhere else to get the information your story promises to give. It should be able to stand alone.
They also don’t want your story to be overly commercial. So don’t have more than one link in each page of the story (more on pages later). And make sure any affiliate links have a disclosure. Something as simple as (affiliate link) next to the link will usually work just fine.
Affiliate Programs. Speaking of affiliate programs, Google has some guidelines on how to link to them in stories. In short, they suggest only having no more than one affiliate link in a story. That’s it. 1. For more information on how to now anger Google with your affiliate links, I recommend you scan through their Quality Guidelines For Affiliate Programs.
Lengths. The length of your text, headlines, and the story itself can do a lot fo help or hurt your chances of ranking. Here are Google’s Recommendations (which I recommend following).
- The title of your story should contain fewer than 40 characters. This is even shorter than the recommended blog post length of 60-70 characters.
- The text on each story page should have fewer than 200 characters. That’s characters, not words.
- You can embed videos in your story pages. But Google recommends keeping them short. As in… less than 15 seconds per page. And they strongly suggest you keep them shorter than 60 seconds. Make sure you include captions for any speech in the video and set your page advancement to at least the length of your videos. More on page advancement later.
- The story itself should have no fewer than 5 and no more than 30 pages. Google recommends more like 10-20.
Here are some technical guidelines that can help your Web Story succeed on Google.
If you’re a real avid rule follower and want to get all the recommendations from the horse’s mouth, I invite you to read Google’s complete guide to Enable Web Stories in Google Search.
To learn what sort of content can and can’t be used in stories, make sure you read Google’s Webmaster Guidelines. They have strict policies around things like…
- link schemes
- automatically generated content
- scraped content
- hidden links and text
- and a whole lot more
If you’re creating original, helpful content, you’ll be fine though.
If the content that you create can be classified as news, web stories can be a great way to get your content seen. But if you fall into that category, make sure you also read Google News Content Policies closely and make sure your content follows these guidelines closely.
3. Outline Your Web Story
Now that we know what content should and shouldn’t be put in web stories, let’s dive into making one. Here’s whatI like to do.
First, let’s go to Stories–>Add New. This will open up the story editor and allow you to start making your first story.
First, let’s give this story a title. Remember to stick to just 40 characters or fewer. The title goes at the top, above the white rectangle where you’ll create your first story page.
Next, I like to create a story page for each idea that I want to include in the story. I create each page and give each page a title using a text box. The first story page, the one that’s already there and blank, I use as a title page. It doesn’t really have any content but a nice image and the title of my story. For now, just a title will do.
To put text on the page, look over to the upper left corner and click on the big “T”. Be careful to click the “T” and not the “+” next to it. For the title, I like to use a Heading style. Click on Heading and it’ll add a text box with a heading in it to the story page. You can resize it and move it to wherever you like. Just add a title for now and let’s move on.
Now, you can use the buttons below that white rectangle editor area to delete the page, duplicate the Page, add another page, or to undo or redo your last edit. Clicking on the little “+” will add that blank page, but that button just to the left of it will actually duplicate the page you’re on.
If you plan to use a single background and style throughout the entire story, then I recommend doing the rest of your outlining on a piece of paper. That will let you come back in a few minutes and style up this first story page and then you can just duplicate it for all the rest of your story pages.
If each page will have different images, then I like to go ahead and outline my story right in the editor.
So now, go ahead and create all the pages you plan to have in the story. Each page is like a slide in a presentation. Put a title on each story page that will help you keep track of the main idea for each slide. You can add other text boxes as well if you just want to get all the ideas out of your head and onto the computer.
I also like to include one final page at the end as sort of a conclusion that either states or re-states the call to action for my story.
That brings me to the call to action. A call to action is an invitation that you give to the reader to do something. While these stories can have ads in them, their real value is in building your brand and inviting people to come get more information from your site.
Give them one thing to do!
A call to action should invite someone to come see another piece of content on your site, join an email list, subscribe to a podcast, or do some other thing that could bring them into your tribe. I suggest that a single story should only have one main call to action, even if you restate it a couple times in the story. Don’t confuse your readers. Give them one thing to do. Then they’ll know exactly how to proceed to get more information.
Always remember to make yours a full and stand alone story. Have a page for each idea you want to include in your story. Get the ideas out of your head. Then, you’ll be ready to design these up and make them look awesome.
4. Fill In Your Story with Content
Now it’s time to go back and fill in your stories with the real content.
On each story page, fill in any text you want. Remember, keep it to no more than 200 characters per page. And leave room for images.
You can change your text sizes, fonts, and colors using the “Design” pane to the right. And once you do start adding images, they’ll probably show up on top of your text. Just re-order the “layers” on the bottom of that pane to the right so that the stuff you want on top is in the layer that’s on top.
Next, go through each page on your story and add some media. Each page should have something highly visual. Usually that’ll be photos. To add media, just click on the little cloud icon in the upper left and it’ll pull in your site’s media library.
You can also use the shapes (also in the upper left) to create image masks so that your photos fit in a cool shape. To do that, just place a shape on the editor and then drag an image into that shape.
If you’re going to use stock photos, make sure they’re photos you can purchase the rights to. One quick and easy way to get your content buried by Google is by using photos you take illegally from someone else.
You can also add video from your media library to web stories. Remember that since web stories are vertical, you’ll want video shot in portrait mode. It’s actually best to shoot the video in 480p in at least 24 frames per second. If you take a vertical video on your smartphone, it’ll usually work great.
The AMP Website has lots of good guidelines for how make really good, highly visual stories using photos and video.
Using the editor in the Web Stories app will take a little getting used to, but by the time you’re done creating your first story, you’ll be a pro.
5. Keep the Content Inside the Safe Zone
One thing I noticed the first time I made a web story was that on my phone, it was cutting off some of the text at the top and bottom.
To avoid this, Google has added a “safe zone” to the editor.
What’s happening is that different devices have different sized screens. So to make sure that your story content will be visible on all devices, make sure you check the “safe zone” and keep your text inside that area. Here’s how to do it.
In the lower right, click where it says “enable safe zone.”
This will add these little lines that are hardly visible to your editor.
If you keep your text and other main content between these lines, it should stay visible across most, if not all, mobile devices.
6. Set the Story Permalink and Page Advancement
Now, it’s time to give your story a nice URL. Your URL structure will look something like https://yoursite.com/stories/title. Obviously change out “yoursite” with your actual site URL and “title” with whatever permalink you set for the story.
To set the permalink, go to the right pane and change it from “design” to “document”. Right there in the document tab you’ll find a box labeled “permalink”. Just type in whatever you want to appear where I wrote the word “title”. Keep it short but descriptive.
You’ll also notice right below the permalink section that there’s a “Page Advancement” section.
Here you can decide if you want to have your story pages advance automatically or manually. Manual will require people to swipe or click the little arrows to move on to the next page. Automatic will advance the slides forward after a designated amount of time.
You’ll see that under automatic, the default appears to be 7 seconds. You can change this number to be whatever you want.
If you have a 15 second video on a page, I might change this to 15s or maybe even 17s to give the video time to play before the slide advances.
Another great rule of thumb for text pages, is to time yourself reading the text out loud at a casual pace. See how long that takes. Give people at least that much time before automatically advancing.
If you do that, set the time based on the page with the most text.
Now you’re ready to publish!
7. Publish Your Web Story
When you’re all done with the steps above, you can make your post public by changing the visibility to “Public” or by clicking on the “Publish” button in the upper right. Now, your story is public and it already exists all on its own.
Web stories will appear in search results even as stand-alone objects, just like a blog post or page. Here’s what it looks like when it’s all on its own.
You can send people to the stories on your site by including links to them in your menu or on a dedicated page where you link to all your stories. But they won’t show up in your normal blog feed.
Another way to show your stories is to embed them inside blog posts or pages.
When you install the Web Stories plugin, a new block is automatically added to the Gutenberg editor for WordPress. So if you want to embed a story in a blog post, all you have to do is create a new block inside a blog post and in the block types, search for “Web Story”.
Add a Web Story block and then you’ll just have to paste the URL for the web story into the block and voila! The web story will be embedded in your blog post. I have a nice example of that down below if you want to see what that looks like.
Now your story is published, but there’s still one more step to go to make sure it’ll show up properly in search.
8. Run the AMP Test to Make Sure It’s Ready for Search
You’ve published your story, but you’re not quite done. This is an important step!
Now it’s time to test your published web story to make sure it meets the important guidelines to make it visible in search. For that, you need to go to Google’s APM Test Page.
Here’s what that looks like.
Just enter the URL for your published web story and click on “Test URL.” You’ll get a result that hopefully looks like this.
In the top section, it tells me that my web story is valid, which means it can appear in Google search. That’s what we want! If you click on “Preview Results” you can even see that different ways it can appear in search.
Now let’s go back and check your structured data. This test will show you if you have valid structured data or not. You want to see that your story has valid structured data so it will show up as a rich results in a Google search.
After running the validation test, if you click on the option to “Explore Optional Values” it will show you if your story is eligible for rich results. You can even open up the dropdown and see all the structured data being applied to your story. But what’s most important here is that it says “Page is Eligible for Rich Results.”
If you’re using a plugin or theme that does schema markup for you, it will likely apply Article schema by default. For most sites, this will be correct. If you’re making stories out of news or recipes, it’ll make sense to change your structured data so search engines will know how to classify your story and when to show it.
Changing your structured data requires a plugin like Yoast SEO or Rank Math, or it requires a WordPress Theme with structured data options built in.
Web Stories could be one of the biggest SEO opportunities over the next few years. To learn more about how Web Stories could be a game change for your site, check out this video.
