How I Successfully Make Google Web Stories For My Food Blog

How to make viral web stories

Looking to grow your blog traffic or start a food blog? Learn how to make viral Google web stories to grow and drive traffic to your site with this easy to follow tutorial.

Hello to all my fellow blogger’s out there! I’d like to start out by saying, I have never written a blog post or any type of tutorial for blogging related content. It’s strictly food and cooking here, but I recently felt compelled to step aside and put the knives down to talk all things web stories.

Why was I so compelled to do this?

Because over the last 60 days I have grown my blog page views from around 100,000 pageviews…

Analytics for google pageviews

To over 700,000 in six weeks!!! Yeah, I was shocked too!

Analytics for google pageviews

How did I do this exactly? From making Google web stories!

I am not going to sit here and tell you I am the “perfect” expert, because I am definitely not. But, I have made over 100 web stories the last two months and have learned a lot along the way.

I am hoping that this Google web stories tutorial helps break down some common questions fellow bloggers have asked me and helps guide you to publishing your first story.

Here is what I am going to cover in this tutorial:

  • What is a Google Web Story exactly and where you can see them
  • How do I create a SEO and AMP qualified story
  • Troubleshooting and common questions
  • Examples of my viral stories

WATCH THE FULL YOUTUBE DESIGN TUTORIAL HERE!

What is a Google Web Story?

Whether you’re starting a blog or you’ve been in this game for a while, you need to be taking advantage of Google’s new and improved AMP stories that are a part of Google discover.

What are they exactly? Well, for those of you who are Android phone users, you may have seen your curated Google “feed” that is displayed when you sometimes make a google search. You can also download the app for this as well (this is what you will need if you are an iPhone user).

This curated feed shows you content and news related to your interests. As you scroll (see in the clip I have shared) you will hit the “stories carousel”. You can then scroll through the carousel and view stories based off of search engine history and your Google profile.

As a food blogger, I see a lot of food content (which are so great for stories), but I have seen content from a wide range of other topics (travel, beauty, and for some strange reason content about chicken farming). I honestly believe ANYONE can make story content.

Why create a story?

I know if might feel a little redundant to create a web story based on a blog post you already have. It’s worth it.

You need to think of your stories as high quality, advertisements that are INFORMATIVE teasers for your actual posts. Google recently came out to say that these should be a “user first” style of content (so purposely making people click the link is not the goal according to their best practice), but you can still inform people of your recipes without including every detail, thus still leading to a click to your site.

I think overall, the best part is Google is happily pushing this content out to millions of people based on their search results (so it’s literally targeted to the exact people you want coming to view your content).

It’s the same concept as sharing content in your Instagram stories or Facebook stories and even is similar to Pinterest’s story pins too. This is Google’s way (in my opinion) of staying relevant, all while delivering organic content (which is a HUGE benefit to you).

How do I create a SEO and AMP qualified story?

I am writing this strictly off of my trial and error, learning and hearing about Google web stories first from my friend Susie and Mom’s Dinner, and then have continued to learn from those across Mediavine and other blog groups.

In all of these spaces however, I keep seeing a lot of common questions and my goal from this post is to show you how I have designed my stories specifically to help you troubleshoot and get started.

While I encourage you to get this information directly from Google, I wanted to create my own simplified version (in my own words) of what I know and have learned so far. If you are extra visual, you should also check out this amazing YouTube tutorial to get things up and going.

Here is what you need to start:

  1. You need to be operating on a WordPress website and download the Google Web Stories plugin. Install and activate it. TIP: Use the plugin Google created, not a third party plugin.
  2. Once installed you will see it populate in the left hand side of your dashboard. Mine shows up after my comments tab on the main dashboard menu.
  3. You can click on this “Stories” tab to pull up your stories editor. This is where you can build your individual stories pages out of (think of it like making a Pinterest pin in Canva but all in on space).
  4. Please read over Google’s best practices for web stories.

General SEO information to know:

  • Make your stories a minimum of 10 slides (if you can). Mine usually are 10 on average and do very well. You can do more or less, but I think 10 is a good middle ground for teasing content and meeting Google’s best practices.
  • Your cover story picture is what people see in the Google search feed. They do NOT actually show your first slide in the carousel image (though I usually make them the same photo). Do not put text on your cover photo! Google will populate this from your title and it takes away from the image in the carousel in my opinion.
  • Cover photo’s are easy to make in Canva (this is the only thing I do separate outside of the actual web stories editor) and need to be a ratio of 900X1200 with a 3:4 ratio. Google keeps saying different ratios, but this is the only cover photo ratio that’s worked for me that didn’t give me errors.
  • When viewing the stories carousel, Google with also often show a snippet web design from logo. Avoid text logo’s here. For example, mine just shows the little apple I have.
  • Logo ratios are 96px96p maximum with a 1:1 ratio.
  • Pick content you are already ranking really well for or content that is trending to start with first
  • Avoid using very complex templates, think of the user experience and attention span related to stories. Keep them simple and avoid all the crazy transitional templates they provide.
  • Google loves video, but I have yet to figure out how to make video web stories that are actually AMP compliant. Because AMP is meant to be for fast loading content, I am focusing this post just on the photos and not the video side for now.
Web Story Plugin Tutorial

Web Story Plugin Tutorial:

Here is a step by step (see video of how I design my stories) of how I am currently making my stories and the process I go through. This tutorial will just be me building the actual story, and not about installing the plugin or adding the logo (once you add you logo it automatically populates it for future stories).

WATCH THE FULL YOUTUBE TUTORIAL HERE!

Here is a sample story and what I prefer to do:

  1. Open up your WordPress site, go to the plugin, and click “Add new story”.
Create new web story

2. Start by filling out the major SEO needs: Title, Adding you 900×1200 cover photo, Add the “story description” (this is like meta tag data essentially).

Web story SEO info

3. Because I am a food blogger, I just toggle over to the upload tab on the left and search the name of the recipe I am trying to find. My images are already in my WordPress media library to pull from. If you do not have them in your media library, you will need to add them.

4. I find the same image I made for my cover photo and put it as my first slide. AGAIN, you first slide IS NOT the image Google first shows in the Google discover carousel. I prefer to not add text to the cover photo but I DO ADD TEXT to my first slide.

How to find google web story media gallery

5. Once the photo is added as your first slide you can customize the image with the text features that the plugin offers. I keep the design simple and easy to read.

6. Once the first slide is done, click the picture so a blue bar is highlighted around the rim of your image. Toggle to the design tab on the right and add the link to your blog post. TIP: I suggest only add one link for best results.

Web story - how to add a link in your google web story

7. When all of that is set up, just keep copying and editing off of the first slide you created using the “duplicate slide” button. This cuts down on a lot of time spent on adding in all the SEO work we just did above, and allows you to plug and chug the photos and text in as needed.

How to duplicate a page in google web story

8. Once you are done with your story, be sure to preview the web page full screen to see that words and images aren’t cut off. Make any adjustments as needed and then hit publish.

9. Finally, you can verify if your story is AMP qualified by using Google’s AMP web link.

Is your web story amp valid

I really hope this just helps guide you to making your own web stories and finding as much success as I have. Feel free to leave any questions below in the comments and I will do my best to help you!