Once up on time internet was filled with static HTML websites. It was easy for webmasters to create and forget the website for many years. However, the situation changed in recent years with the revolution of smartphones and dynamic websites. Nowadays, you have to adopt the latest technologies for mobiles to stay on top of the internet. Google was pushing AMP some time for creating high-speed mobile pages. And the latest is the Google Web Stories to offer readers a visual stories instead of boring text based content. In this article we will explain how to add Google Web Stories in WordPress site.
Learn WordPress: Check out 500+ free WordPress tutorials.
What are Google Web Stories?
Google Web Stories are visual content format for mobiles. Unlike Instagram and other social media story formats, Google Web Story is an open source format. This means, you can create, embed and distribute them anywhere on the internet.
- It’s in a storytelling format with visual elements like a PowerPoint presentation.
- The emphasize is to optimize on mobile devices while you can also view Web Stories on desktops.
- You can create attractive stories using audio, video and images instead of completely relying on traditional text content.
- Web Stories are powered by AMP technology and earlier called AMP Stories. Therefore, Web Stories pages need to validated for AMP format.
You can view examples of Web Stories in Google Web Stories website and many other popular media websites like CNN
Why You Should Focus on Google Web Stories?
There are multiple reasons you should focus on creating Web Stories for your site.
- Visual storytelling becomes popular with social media platforms. This trend is likely to continue for some more years and you have good chance to attract users with Google Web Stories.
- Unlike social stories, Google has an open source format. It makes you to share the content easily on your website and offer a link for others to embed or share.
- Google Web Stories are part of Discover section in Google Search that appears on top of other text results. Hence, it is a huge opportunity to rank top in Google Search by using and promoting your Web Stories. In addition, Google also shows Web Stories in images and normal search section making it more appealing for webmasters.
- You can monetize stories and earn money from stories.
How to Create Google Web Stories?
There are multiple ways to create Google Web Stories:
- Use official Google plugin on WordPress platform
- Custom development
- Third-party apps like News Room AI and MakeStories.
In this article, we will explain only about the WordPress plugin part.
Google Web Stories Plugin for WordPress
Google released an official WordPress plugin for creating Web Stories right from your WordPress admin panel. This plugin will use a custom post type called “web-story” to create and publish web stories on your site. though each story has a separate link, Google recommends to embed the story on your regular post or page to get more visibility on search engines.
At this point of time the plugin does not support Google AdSense integration. However, we hope Google will enable this soon so that all publishers can actively spend time on creating stories.
Installing Google Web Stories WordPress Plugin
Login to your WordPress admin panel and navigate to “Plugins > Add New” section. Search for “web stories” to find Web Stories plugin.
Install and activate the plugin on your site. After activating, you can see a banner like below to view some stories.
Click on the “Go to Stories Dashboard” button.
Web Stories Plugin Options
Alternatively, go to “Stories > My Stories” menu to view the dashboard section.
Dashboard contains a sidebar menu for the following options:
- Create New Story – this will take you to the story editor.
- My Stories – It contains all your previously created stories similar to posts page.
- Explore Templates – get starter templates supplied with the plugin.
- Editor Settings – add logo and Analytics tracking code here.
- Support – this will take you to the Google AMP developer site where you can read help documents.
One confusion is that you can see the menu items on WordPress sidebar menu as well as in the dashboard section. Therefore, you can collapse the default sidebar when you work with Web Stories plugin on the admin panel.
Using Templates
Google offers less than ten predefined templates with the plugin. If this is a first time you create a Web Story, we recommend using templates from library by clicking on the “Explore Templates” menu.
Hover over any of the template and click on “See Details” link.
The details section will show you short description of the templates and all the pages part of the story with a preview. You can use the slider arrows to navigate through all available templates.
Creating First Web Story
Once you decided the template, click on “Use Template” button to start your story based on that template. This will take you to the story editor for editing the selected template.
If you want to start your story from scratch, click on “Create New Story” button on the plugin’s dashboard. You will go to the same story editor with a blank canvas to start your story.
We use a blank template to explain further so that you can easily get an idea about the editor interface.
Related: How to create free infographics with Canva?
Web Story Editor Interface
When the Web Story editor opens, the plugin will hide the WordPress sidebar by default to offer full screen view. The editor interface has three section for using media, previewing and customizing each element.
Using Media in Web Story
The first section of the editor allows the followings:
- View or upload images/videos to Media Library. Drag and drop an image or video to the preview section to start adding content.
- If you don’t have good images, click on the small image icon showing on the top to get royalty free images from Unsplash. You can get free images, GIF and videos to insert on your story.
- Click on the text icon to view all available text elements. There are different styles of text available for heading, list, step, cover, table, contact, etc. You can also match the font as per your story template automatically.
- The last option in media section is shapes. Simply drag and drop a shape on the canvas to add it on your story page.
The media section is easy to understand and you can simply drag and drop any element on the canvas to add it on the page.
Preview Section of Editor
Though this section shows a preview, you can do many other things here. You can add title, add/delete/duplicate a page, play the story, preview and publish.
You can drag each element and adjust as per your imagination.
Customizing Elements
Selecting an element on the preview canvas will show you customization options on the last section under “Design” tab. You can change the background color, add animation, insert multiple layers, insert hyperlink and customize the story page.
The “Document” section is similar to post editor in WordPress. Here you can change the permalink, add meta description, set slide duration and add cover image for your story.
Make sure to view the checklist section to see all errors on your story. It will show missing descriptions, check length of story and do other validations to make sure your story is a good fit for showing in Google Search results.
Embedding Story in Posts
The “Publish” button will show you warnings if there are open items in the checklist. You can fix all the errors and publish your story online. After publishing, you will see a box like below asking you to view or embed in a post.
Click on the “Add to New Post” to open WordPress post editor with the story embedded. You can adjust the alignment and size of the story and publish the post.
Alternatively, go to “Stories > My Stories” menu and click on the three dots button below your story. You can get the story URL from here. It should be something like https://yoursitename.com/web-stories/my-first-story/. You can embed this URL on any post or page on your site or in an external site.
Note that, Web Stories plugin also offers a embed block called “Web Stories” for Gutenberg editor. You can use this block to embed any of your story on posts and pages.
On published website, the story will contain a share icon. Users can click on it and then “Get Link” button to copy the story URL for sharing.
Final Words
As you can see it is very easy to create Google Web Stories and publish on your site. the story editor is easy to use and help you to start with predefined templates. Though the options are simple, you can expect Google to update the plugins with additional features soon.
Leave a Reply
Your email is safe with us.