How to build Google Web Stories in WordPress

What do Instagram Stories, Facebook Stories, Snapchat Stories and Twitter Fleets have in common? They are all so-called social media implementations of the same stories idea. A story is a series of images or others types of content that belong together, and thus, tell a story. Visual storytelling is huge and now the web has an open story format as well. Launched back in 2018 as AMP Stories, Google’s Web Stories are now available in WordPress.

What are Web Stories?

Web Stories are a swipeable, rich visual storytelling format for use on mobile devices. Web Stories offer a fullscreen experience that can incorporate every type of content imaginable. In contrast to closed formats like Instagram Stories, Web Stories are open and freely distributable. You can make and publish them on your own site. You own your stories.

What’s more, Web Stories get their own place in the Google search results — right at the top. And that’s not all, because stories can also appear on Google Images, Discover and the Google app. All very prominently.

Web Stories give you much more control over what you publish and how you do that. You are free to determine the format, where you publish it and how long you want a story to ‘live’. These stories are lightning fast, offering you a quick and easy to digest type of content.

Keep in mind that, while Web Stories are intended for use on mobile devices, every story automatically also gets a simple desktop viewer. This means that your mobile content is truly available for everyone.

Goodbye AMP Stories, hello Web Stories

Early 2018, Google introduced AMP Stories as a way of quickly building visual stories for the web using open technologies. In May 2020, AMP Stories became Web Stories and by October 2020, launched on the number one platform in the world: WordPress. The Web Stories plugin for WordPress has made it so much easier to build stories on the platform that you own: your website.

Google continues to make improvements to Web Stories, while also pushing the adoption. Earlier this year, announced that some of its other tools like the Rich Results Testing Tools and Search Console can now recognize Web Stories as such. In the settings of the WordPress plugin, you can set the tracking ID for Analytics. This helps you get a sense of how your Stories are performing.

Examples of Web Stories

You can use Web Stories for a lot of things and we’ve seen many big media brands do it. While it seems they are best fit for bite-sized content, you can go a pretty deep with your stories. If you can build an engaging story, people might flock to it. This is just the thing that might make your content go viral.

Here are some cool example of Web Stories (and its predecessor AMP Stories):

The BBC made a Web Story about the moon
PCGamesN made a story about battle royal games with only videos
The Atlantic is always on the lookout for journalistic stories
CNN made a great web story about Antarctica

These are fairly high-level Web Stories and, of course, you don’t have to use the same journalistic approach to creating them — just make sure your stories are high-quality and valuable to you and your reader.

How to build Web Stories with the WordPress plugin

Getting started with Web Stories is easy if you have a WordPress site. Simply install the official Google Web Stories plugin — and don’t forget to read Google’s documentation to get your story ready for the search engine. The plugin was developed in the open by an awesome team of Google developers and is a work of art. It has now launched officially, so everyone can get building stories.

After you’ve installed the plugin, go to the Editor Settings and fill in the details asked. Then you’re good to go! If you lack inspiration or if you want to get a sense of what a Web Story can be, please explore the template section. See one you like? Simply click Use template and the editor opens with the template. Now, you can use the various tools to adapt the story to your liking.

Of course, you’re free to build Web Stories from scratch. Let’s see how that goes.

  1. Open the Web Stories plugin

    After installing the plugin, start a new story by clicking Create New Story from the Web Stories Dashboard. You can also start a new story by hovering over the WordPress menu > Stories > Add New.

  2. Introducing the Web Stories interface

    If you made a new story, the interface opens with a blank template. On the left-hand side you can see the assets manager with images you’ve uploaded, and material you can use in your story. The T icon opens the text tab and triangle opens shapes.

  3. Add an image to explore the right-hand side

    Click on the blue Upload button and pick an image to upload. Double click the image to add it the canvas. You’ll notice the settings on the right-hand side change. Here, you can find the properties and design options for each item. These differ from type to type, so text has different option from images.

  4. Get accustomed to the interface

    If you’ve ever used any kind of design tool, you’ll feel right at home in the interface of the Web Stories WordPress plugin. You can align things, rotate, layer, change text types, colors, almost everything you’d ever need is here. You can work with images, illustrations, text, video, et cetera.

  5. Now try to build a simple web story

    We’re going to build a quick thing as an example. Open a new story and upload an image to get started. I picked one of our illustrations as I want to make a post about the opening of store. Click on the image and you’ll notice blue lines around it, this lets you scale, rotate and zoom the image. Double click on the image to see the full image and how it fits now. Make the image fit in a way that looks great.

  6. Add text to your web story

    Click the T in the left-hand corner to go to the text tab. Here, you’ll see the different sizes. These are based on regular HTML headings, so the biggest one is an h1 and a paragraph gets a p. Please use these correctly in your web story. Give your title an h1 and subheadings an h2 or something else. Use the paragraph for your paragraphs. This way, your web content will follow all regular guidelines.

  7. Colors, fills and alignment

    If your image has a busy background like mine, you might need to give your text a color to stand out or maybe even a background fill color. Luckily, you can. Click on Heading 1 to add a heading to your image. Drag and drop it where you want it to appear.

  8. A new page for your web story

    To add a new page to your story, click big + button at the button of the screen. If you want to duplicate the current page because you’d like to use that as a template for the next screen, click on Duplicate page. Fill your story with all the pages you need.

  9. Link to your site

    One of the cool things of Web Stories is that you can freely link out to your own content. Simply click on an element and add a link. Don’t overdo it, keep the number of links limited.

  10. Fill in metadata and publish

    Once you’ve finished your web story, test it by clicking Preview. Before you hit Publish, you need to fill in some metadata to improve the story. You need this to have a valid web story according to Google. Click Document and fill in the logo, cover image, excerpt and pick a good permalink. Ready? Publish your story! The Web Stories plugin will ask you if you want to make a new post for this story. If you do, click the button and a new post will open with your story embedded in it.

And here’s a quick video of how that looks!

This is but an incredibly simple story, purely meant to help you find your way around the interface. Think about all the cool things you can do!

Keep in mind

Web stories are a cool new addition for your content arsenal. It’s a completely different tool for a completely different goal. Of course, not everyone will find use for these stories, but do look at the possibilities. It is easy to get started, but it’s powerful!

Here are a couple of things you need to keep in mind:

  • Make sure that the URLs of your stories are available in your XML sitemap (Yoast SEO does this for you)
  • Add Schema structured data to make it easier for Google to understand your stories (Yoast SEO does this for you)
  • Link to your stories from other (relevant) parts of your site
  • Make sure that your stories are valuable and of high quality
  • You can add ads, but don’t overdo it
  • Don’t add too many links to outside sources, that will distract readers
  • Keep the story short and snappy (Google says 5-30 pages, with a sweet spot between 10-20)
  • Keep the title short
  • Don’t use too much text on pages
  • Add alt text to describe images for accessibility
  • Stories are ideal for video, but keep them short

And, as Google wrote in their SEO for Web Stories post:

Do all the SEO things you would do for any other page on your website. If it helps rank your non-Story pages, it’ll probably help the Stories as well.

One word will jump out at you while reading through the list above: short. A good story is short, while still being valuable and insightful. Experiment with that. Find what your audience likes to see and in what format. This is still new, so there are no ‘rules’, so to say. Luckily, Google’s Web Stories plugin for WordPress makes it a joy to build these stories!

Don’t forget to test your Web Stories in the AMP Test Tool to see if your stories are eligible for inclusion in the search results.

Check if your web story is valid and get a sense of how it will look in Google

That’s how to build Web Stories in WordPress

You’ve just read a short primer on Web Stories in WordPress. These short form pieces of content are very enjoyable to consume on mobile phones, but even on desktop they work fine. Google has done a lot of work making the stories format a success and adoption is sure to surge — especially since these stories get their own spot in the Google search results.

Try it and report back, we’d love to see what you come up with!


39 Responses to How to build Google Web Stories in WordPress

  1. andrew-8664
    andrew-8664  • 2 days ago

    great post. What is recommended when we want to create a web story version of an existing post? If we say create a story version of a How-To that already exist would this not be duplicate content as the web stories plugin creates a new post and permalink?

    thanks

    • Edwin Toonen

      Hi Andrew. You could go about it in a couple of ways. It’s possible to see the web story as part of the other content. In that case, you can embed it in the original post. Or, you’ll treat it as a new piece of content and use the story itself to rank in Google. There are probably other ways to explore. In any case, you should try to avoid duplicating content one on one. Of course, you can use existing content and turn it into something else. Just be sure to make a good story out of it.

  2. Elen Ghulam
    Elen Ghulam  • 2 weeks ago

    Created my first web story.
    Link: https://www.ihath.com/web-stories/dance-with-balloons/

    • Camille Cunningham
      Camille Cunningham  • 1 week ago

      Cool, Elen. Keep up the good work!!

  3. Dr.Amrita Basu
    Dr.Amrita Basu  • 2 weeks ago

    I have enabled web srories on my site and it’s an interesting way to give quick snackable content to audience.This was helpful

    • Camille Cunningham
      Camille Cunningham  • 2 weeks ago

      That’s great to hear! Have fun with the creation of your Web Stories :)

  4. Shapoorji Pallonji Manjri Pune
    Shapoorji Pallonji Manjri Pune  • 2 weeks ago

    Thanks for the post…I tried to install it and create my first story, but looks like something is going wrong. Text links don’t work in the configuration page and when I try to create a new story

  5. quentinchandelon
    quentinchandelon  • 2 weeks ago

    Top article.
    Thanks.

    • Camille Cunningham
      Camille Cunningham  • 2 weeks ago

      You’re welcome, Quentin!

  6. harry1602261752
    harry1602261752  • 2 weeks ago

    Really useful tips, thanks. We’re looking to incorporate more multimedia elements in our content for the company I work for and Web Stories seem like a really great feature in addition to video, social and data-viz stuff we’re planning to do.

    My only question is what the Web Story will look like when embedded on the site. For example, with our site, the blog right now is looking at some significant updates in future. Can stories be in vertical or horizontal orientation? Vertical will be fine for mobile, but thinking of how to accommodate desktop users.

    All the best!

    • Camille Cunningham
      Camille Cunningham  • 2 weeks ago

      Hi Harry, thanks for your question! At the moment, you can only create Web Stories with a vertical orientation as the focus is on mobile. But who knows what the future will bring :)

      To give you an of what Web Stories look like to a desktop user, here is an example of a Web Story you can view from your laptop or computer: https://www.lonelyplanet.com/stories/5-destinations-to-see-wildlife-with-your-kids-4/

  7. Johanna Summers
    Johanna Summers  • 2 weeks ago

    Very interesting post. Thank you. I’ve installed the plugin and added my tracking code and logo, etc.. but every time I try to start creating a new story I get a blank page – eh? This is pretty frustrating. I’ll go away and make some bread and come back later and see if it works? Come on Google – why doesn’t it work?!

    • Vijay
      Vijay  • 2 weeks ago

      Good article Edwin,
      A very visual medium to present content.
      I took web stories for a spin months ago. It slowed down my site by 2-3 seconds. Is it possible to implement this WordPress plugin, but only load the CSS, JS on pages with a story? Also, will linking to a story provide the same SEO benefits as embedding on a page?

    • Edwin Toonen

      Hi Johanna! Awesome that you’re trying out the Web Stories plugin. I think you started by adding a new story from scratch? If so, the canvas is indeed empty. You are free to fill it as you please. If you want to get inspired or simply see what a web story can be, open one of the templates from the Dashboard. If you want, you can edit this into a story of your own making. Good luck!

      • Johanna Summers
        Johanna Summers  • 2 weeks ago

        This plugin is definitely not working – all I get is a big blank screen. Nothing changes that – neither from “create new story” nor “explore templates” – I’m using Chrome – I’m gonna delete this plugin until the boffins in Mountain View get off their bean bags and sort this out !!

        • Camille Cunningham
          Camille Cunningham  • 2 weeks ago

          Hi Johanna,

          When you make a new story, the interface opens with a blank template. The blue Upload button gives you the option to upload images, which you can double click to add your story! How to further create your story is explained in this post by Edwin :)

          If you’re still experiencing problems with your Web Stories, I would recommend going to the support forum for this plugin: https://wordpress.org/support/plugin/web-stories/

          Good luck!

  8. Massimo Basso
    Massimo Basso  • 2 weeks ago

    Nice and interesting article, like everything in your website. I tried to install it and create my first story, but looks like something is going wrong. Text links don’t work in the configuration page and when I try to create a new story all I get is a blank page. Tested on Mac Safari a nd Goggle Chrome on Mac. Maybe I lost something on the way, but looks like installation is very simple.

    • get more info
      get more info  • 2 weeks ago

      Hi Edwin! Fantastic read but I was wondering if you using web stories is a good idea for a Health blog?

      • Camille Cunningham
        Camille Cunningham  • 2 weeks ago

        Hi there! You can use these Web Stories for all kinds of subjects, so it can definitely be something for your health blog as well! I would suggest downloading the plugin to have a look at the possibilities and decide whether it’s a fit for your blog :)

    • Edwin Toonen

      Hi Massimo. Thanks for your compliments! Shame about the problems you’re encountering with the plugin. When you open a new story, do you see the black editing interface with the white rectangle canvas or do you only see a big white screen?

  9. Wim
    Wim  • 2 weeks ago

    Thanks for the article. Great feature! Hopefully it will be launched in the Netherlands as well.

    Worked on my first Web Story! https://www.groenendijkwim.nl/web-stories/hardloopblessures/

    (sorry for the Dutch)! :D

    • Gerben G van Dijk
      Gerben G van Dijk  • 2 days ago

      Leuk hoor. De link naar de video tussendoor haalt me uit je verhaal. Dus ik denk dat verhaal nieuwsgierigheid moet doen toenemen en links op het eind. Ik denk dat 7 plaatjes mooi aantal is (ikzelf kijk altijd wat gehaast en reken dan niet op 10+ plaatjes). Heb je dit gedaan met Google Web Stories plugin? Geen andere AMP plugin nodig gehad in je site?

    • Wendy
      Wendy  • 2 weeks ago

      Wim that’s awesome!

    • Edwin Toonen

      Hi Wim. Wow, that’s an excellent web story. Good work!

      • Chadley
        Chadley  • 2 weeks ago

        Its a very fresh approach I like it a lot makes things look much attractive while being busy on the net.

      • Wim
        Wim  • 2 weeks ago

        Hi Edwin,

        Thanks! Working on a couple of other Web Stories as we speak. This way of creating content gives a total new experience for the visitor.

        Again thanks for the article and the tips for creating Web Stories!

        • Edwin Toonen

          Good to hear, Wim, and thanks again!

  10. Chevelle Lawson
    Chevelle Lawson  • 2 weeks ago

    Thanks for this information. This will help many blogs in different ways. So cool! Thanks again.

    • Edwin Toonen

      You’re welcome, Chevelle.

  11. Sayantini
    Sayantini  • 2 weeks ago

    Woaoo great Idea and Implementation. I just want to know where the story will appear?
    Google app or app and web both

    Thanks 🙏

    • Edwin Toonen

      Hi, the web stories will appear in more and more places. Right now, you can find them in Google search, Google Images and the Google app. Also, yesterday they announced very prominent placement for your web stories in the Google Discover app. They are certainly pushing this!

  12. Shristi Patni
    Shristi Patni  • 2 weeks ago

    Hi Edwin! Fantastic read but I was wondering if you using web stories is a good idea for a food blog?

    • Edwin Toonen

      Hi Shristi. Thanks for your comment. Of course you can use web stories for your food blog. There are bound to be cool ways of showing your recipes through web stories. Experiment and see what works for you and your readers.

  13. Romel Adhikary
    Romel Adhikary  • 2 weeks ago

    Nice article. Learnt something new. Thanks for posting.

    • Edwin Toonen

      Great to hear, Romel.

  14. Fernando Santos
    Fernando Santos  • 2 weeks ago

    Hi Edwin!

    Thanks for the post and explanation. I just have 2 questions:

    The website must be well known (Yoast, BBC, CNN…) to have the stories published? I ask you because we are not a big enterprise, but we are doing SEO campaigns with good results (of course, without huge numbers because we are located in a small country) at novacasapanama.com

    Do the stories just appears when someone types the name of our site (Yoast, Promotora Novacasa, La Despensa…)? Or is possible to rank it with keywords?

    Thanks!

    • Edwin Toonen

      Thanks for your comment, Fernando. No, you don’t have to be a well-known company to publish web stories. Anyone can! As always, the best stories on a topic will win out. But, web stories give you a whole new way of communicating and you might win out on publishing speed, for instance. Or quality, or originality. Whatever works for your readers.

      And yes, you should be able to rank them on keywords as well. Google has said that you can use ‘every’ SEO tactic you normally use to optimize stories. Just keep it friendly, don’t spam and make the stories high quality.

      Good luck!

      • Fernando Santos
        Fernando Santos  • 2 weeks ago

        Thank you Edwin!