How to Create Google Web Stories [Video]

Twitter Facebook Pinterest LinkedIn Reddit WhatsApp

See all the tips and tricks for creating Google Web Stories with the WordPress plugin.

Google’s new Web Stories plugin makes it super simple to create an eye-catching Story.

And you’ll want to know how to get the most SEO from it, plus caveats to avoid.

Video

There’s also a transcript below the video tutorial.

Transcript

See below for a full transcript of the video tutorial.

How Web Stories Appear in Mobile Search

First, let’s have a look at what you are creating.

I’m using the Chrome browser’s Dev Tools in mobile mode.

When I Googled CNN, I can see mostly videos returned in search.

But, keep scrolling and you’ll see a new Visual Stories section.

This is where Web Stories appear.

As you can see, they have a logo in the top left.

Then the title of the Story overlayed on the Cover image.

At the bottom is the domain name of the Story creator.

When you click on one of them, you see much the same thing, but all of the elements are in slightly different positions.

So you need to plan your Cover image accordingly.

You’ll also notice that you now have a by line for the author, as well as the publish date.

Clicking the info button reveals the original domain of the full Story. This gives viewers a chance to fully inspect where they will be taken when clicking any link in the Story.

And there is a social share button in the top right too. So if you create a great Web Story, viewers can easily share it with their buddies.

You’ll want to keep the position of all of these elements in mind when creating your Story.

Prep for Success

There are a few things you’ll want to prepare ahead of time before creating a Web Story.

Title

Create a short title for your Story that looks enticing in the default white font that Google will use for the title overlay.

Counting spaces too, it will get cut off around 30 characters.

So, make the first few words count.

And if the rest does get cut off, consider making the first few words a teaser that compels viewers to click to read the rest.

Here’s another thing to think about with your title.

If you intended to embed this Story into a new post that you have not created yet, then the new post will have the same title and slug as the Story.

I believe it’s fine for it to have the same title. They will have different permalinks, and I’ll show you that in a moment.

Excerpt

You’ll also want to provide a short sentence that gives a little more info on what your story is about. This excerpt will only show when you have the Story embedded in a post, and it’s like the SEO meta description, so make it count and try not to reuse the same words that are in your Story title.

Publisher Logo

Each Web Story appears in mobile Search with a brand logo in the top left.

If you have a favicon already uploaded to your site, then it will pick that up by default.

But, considering so many themes have you upload an insanely large 512×512 pixel image, you might want to consider making one that is 32×32 for this purpose.

Don’t upload it to your site yet, we’ll cover that in a moment.

Cover Image

All media for Stories should be 828 x 1792 pixels, at least that’s what Google suggests..

You’ll want to make a Cover image for your Story in this size.

That will be the one shown in mobile Search that has your logo, title, and other elements overlayed on the top.

It is also the most eye-catching part of the whole Story.

That Cover image and your title are all you have to entice viewers to click your Story.

So make both of them count.

Create Your First Story

Install the Web Stories plugin.

Upon activation, you will see this banner.

All of the links in it are active.

Click the one to go to the Stories Dashboard.

Web Stories Interface Tour

Also note that you now have a Stories tab in your left admin sidebar too.

Here you will see the Stories you have already created and published, plus those that have been saved as Drafts.

You can click the More ellipsis for options to

Open in editor
Open in a new tab
Copy Story URL
Rename
Duplicate
Delete Story

In the left sidebar you have links to Create a New Story, which will start one from scratch.

Google has also included several Templates to get you going, which we’ll circle back to in a moment.

Editor Settings

Next are the Editor Settings.

Click on that.

At the top, you’ll want to enter your Google Analytics Tracking ID.

Next, here is where you’ll want to upload your Publisher Logo that you want to use for your Web Stories.

Last, you can elect to send anonymized data to Google to help them improve the Web Stories plugin or not.

Web Stories Templates

Now let’s have a look at those templates.

I have a feeling that we’ll soon see designers creating template packs for Web Stories.

When you hover over a template you can see it move through all of the pages, or slides.

When you click the See Details link, you’ll be taken to a bigger page where you can see all of the pages better, and see the color pallet in use.

Clicking the left and right arrows moves you through more of the templates.

When you find one you like, you can click the Use Template button in the top right.

Or you can close this to return to the Stories Dashboard.

Let’s open one of these templates from here by hovering over and clicking the Use Template button.

Stories Editor

This opens the template in the Stories editor.

Let’s have a look at the different sections of the editor.

The left side is for adding your media and elements.

It will auto populate with images from your Media Library.

Clicking the cloud icon brings you to this screen.

You can search your media library for specific images here too.

And you can sort what is shown by all, images, or videos from your Media Library as well.

I would strongly suggest that you do not upload videos to your Media Library to use in Stories. See the sister post I mentioned at the first of this tutorial for why.

Here you can also upload new images to use in your Stories.

Unsplash Media

Another place to find images is from Unsplash, who Google has partnered with for this project.

Click the image icon to see the selection.

Here you will find both images and video that are free for you to use.

You’ll also see categories. Click the down arrow to see more of them.

These will help filter the images you see available.

You can also search for a specific image category to see those.

By default, the images that are currently trending are shown.

Also notice that many of the images are in landscape mode, and you may want to stick with the portrait mode ones.

Create a New, Blank Page

Let’s create a brand new blank page.

To use an image, simply drag and drop it into the workspace.

Add an Image

You can manually resize and align.

You can also use the alignment tools in the design sidebar to center align left to right, and to center align vertically.

The little handle at the top allows you to rotate the image.

Add Text

To add text, you have 2 options.

Clicking the T icon brings up a list of presets for things like headings and a standard paragraph.

Simply click one of them to insert it into your workspace.

If you want a paragraph, that’s the default that will be inserted when you click the + symbol.

And keep in mind that the same SEO rules apply to this text as it does to your posts and pages.

I teach all about this in my DIY SEO course.

Layers

Note that it has been added as a new layer. We’ll work more with those in a moment.

Style the Text

From here you can style the text.

Note that you only have black and white as saved colors.

Let’s make this text BlogAid red.

Save a Color

Now I can add this as a new Saved color by simply clicking the + sign.

This is a great way to get your branding colors into Stories.

Change Text Size

There are a couple of different ways to change the text size.

You can simply click and drag the text wrapper and the font size will change accordingly.

But, here’s what’s not good about doing it this way.

You may want to bound the container closer to the actual text first to ensure it never leaves the screen.

Safe Zone

See these little hash marks near the top and bottom?

Those indicate the safe zone for all visibile elements.

You don’t want to place text or critically important parts of a picture beyond those marks.

You can click this little screen icon in the lower right to turn off those safe zone markers.

But I would leave them on.

Better Way to Change Font Size

Perhaps a better way to change the font size that is safe is to bound the wrapper to the edges.

And then change the actual font size so that it is to your liking.

Padding

And then perhaps add some padding around it to get it off the edge if you want to keep it left aligned.

Fill and Highlight

There are lots of styling choices for the text here, but I want to point out 2 more.

One is Fill, which fills the entire wrapper with a background color that you can change.

And the other is Highlight, which puts a background only around the actual text itself.

And you can see that the padding setting comes into play here too.

Shapes

Another way you can do this is by using Shapes.

Click the shapes tool in the left Media area.

Let’s click and drag one over.

There is a teeny tiny dot of where it will be dropped, but I don’t find that to be very accurate.

Click and drag to position and resize.

Shapes and Layers

Now of course this is over the text and we want it behind the text.

That’s where your Layers tool comes in handy.

Click and drag the rectangle layer behind the heading layer.

With it still highlighted, make it any color you want.

Background Image

Now, if you have an image or such that you want to use throughout the story as your background, you can easily do that.

Let’s select this big image layer.

And at the top is a button to Set as background. Click that.

At the bottom, now you see it is no longer a layer.

It is now the background which is locked into position.

Links

Let’s make a text link.

Click the text + sign to add regular paragraph text.

I’m going to move it down and make it white.

Now, the minimum text size that Google wants you to use is 24.

So, it’s super odd that they made the default in the plugin set to 16.

Now let’s add our Link.

Look what happens when I hover over the text wrapper.

It pulls up a preview of where this link goes so that the viewer can inspect it before making that jump out of the Story.

It is also pulling my Favicon and SEO page title up too.

All of this is set in your theme and/or your SEO plugin, and it’s more of the SEO foundation stuff I teach in my DIY SEO course.

Make a Button Link

And, if you want this to look more like a button, pull in one of those shapes and put it behind the text, like we did for our heading. That will draw more attention to it as well.

Google Link Guidelines

As per Google’s guidelines, you can only have one link per page.

And you can only have one affiliate link per Story.

Look at Template Media

Okay, now that you have some of the basics, let’s have a closer look at these template pages.

Here’s the first page.

And we can use the arrows to click through.

As you can see, one of these has a simple grid box, which really helps frame the content.

It is called Grid 4 and it’s not a style or shape I see available to us anywhere other than in this template.

Same with the next page.

It has an Arrow 1 shape that is not available in our default shapes either.

So, some of what you see in the templates cannot be reproduced from scratch at this time.

And it may be worth flipping through several of the templates to see how they accomplished what they did with the elements you do have available.

For instance, on the next slide, they have used rectangles squished down to make these little horizontal rule lines.

Tips for Making Stories

Google has a few guidelines for making a good Web Story.

You must have a minimum 4 pages to Publish a Story.

The max number of pages is 30.

Google suggests making Stories that are 10-20 pages long.

Save a Story

Let’s talk about saving our Story.

Every now and then you’ll want to hit Save draft.

And you’ll also want to Preview it to ensure all looks well with it full size.

Before You Publish

Input your Story Title in the top right of the workspace.

Document Mode

Let’s jump over to our Document mode.

Here’s where you will want to select your Publisher Logo.

And here is where you’ll want to upload your Cover image. Without this, the Story would show blank when published.

And here is where you want to enter your excerpt.

Story Slug

Next, you can enter a different slug for the story if you want it to be different than the title, which is what it will be created by default, just like WordPress pages and posts do.

Now, if you intend to embed this Story in a brand new post, the post will have the exact same title as the Story. So keep that in mind and maybe enter a slug that will be slightly different than the post if you like, but you don’t have to, and here’s why.

Web Stories are custom post types. They will have web-stories as part of the URL path. This is sort of like the way Categories work, but a little different.

So, this is why the slug of the Story and the post it is embedded in can be the same without running into a duplicate permalink.

Page Advancement

Last, you have the Page Advancement setting.

If you want it to move to the next page on its own, leave it set to Auto.

Setting the duration is a little tricky, as it could be entirely dependent on the viewer’s connection speed.

Try leaving it at the default of 7s and if that seems slow on your 4G or LTE connection on your phone, you can always speed it up. But I would not go below 3s. Be sure to check that on your home wifi, which is probably faster.

Now, if you have a tutorial where folks may want to stay on a single Story page for a bit, consider setting this to Manual. I’m thinking this would be great for DIY type Stories.

Publish Your Story

Okay, now you’re ready to hit Publish on your Story.

You’ll see a pop up box stating that it has been published, with a link to view the story.

You’ll also have the opportunity to embed this Story into a new post. Now note that it will create a brand new post with the same title if you click the Add to new post link.

So, if you have an existing post, you don’t want to do that.

View Story and Copy URL

For now, let’s click view story.

Note that it opened in a new tab.

Copy the URL of your story from your browser so we can use that to embed the story in an existing post.

Embed Story in Post

I have this post titled Web Story Post for us to use.

I’m going to create a new Gutenberg block.

And search for story.

As you can see there is a new Web Stories block.

Click that.

Now it wants us to enter the URL of our Story.

Once it has been entered, you can treat it just like other blocks and change the alignment and move it up and down or such.

There are already blocks for Elementor and I hear that they are coming to other page builders, so look for that.