Web Stories on WordPress A Step-Wise Tutorial
Installing Web Stories for WordPress Plugin
Plugins > Add New > Type ” Web Stories ” Install and Activate.
Settings For Web Stories for WordPress Plugin
From Admin Menu, you have three options as in the screenshot above.
The Dashboard shows you everything to get started with the stories,
use the Create a New Story button to jump to the editor and add a story.
The all stories option shows you web stories that you have already made and saved, in all modes published, drafts, etc. like posts.
It takes you to the editor to add a new story.
If we see tab wise on the Dashboard, it shows you three options
(1) My Stories, (2) Explore Templates (3) Editor Settings
My Stories option, relates to your web stories that you have created and display them in a format All Stories, drafts, and published if you have many search bar.
Explore the Templates option relates to pre-made templates bundled along with the WordPress Plugin. It makes it easy to get started and understand how web stories work.
Editor Settings Google Analytics for Web Stories for WordPress
In the editor settings, you can add your Google Analytics code to track views of the story, add your logo that should be precisely 96×96 pixels a perfect square. In the end, a data-sharing option checkbox to improve the plugin.
Editor Settings and Features for Web Stories for WordPress
Upload Image or Video option connects your WordPress default media gallery to upload the images or videos. You can select any web stories supported picture formats or video clips and attach them to your web stories.
With Blue Upload Button you can add the New Files as Uploads.
Text option as T has few presets for Text Formats, Like Heading ( H1, H2, and H3), Paragraph, Caption, and Overline.
SEO of your content into headings and subheadings short paragraphs and citations.
Shapes next to Text option has 12 Basic shape elements that can be very useful to highlight and better display the story format.
Add the Title option Here you can give a title to the story.
It automatically creates a permalink for the web store.
Below the Editor, you have Delete Page, Duplicate Page, New Page, Undo and Redo options.
Duplicating the page with this option to take all the elements to the next page as same and change a few details like text or pictures as your story usually goes, the background can be the same for pages, and text you can edit.
Page advancement feature at the end of this panel to control whether the story auto-plays or the reader has to tap for the next page or slide.
The duration can also be controlled default is 7 seconds.
I recommend keeping elements inside the safe Zone.
Disable or Enable Safe Zone Option. Safe Zone is a markup for adjusting your elements in a zone that is viewable to all devices. By default is enable.
Below that, you have the Grid View Option.
Grid view shows all your web stories pages in a grid view, easy to select one of the pages to edit if you have 30 Pages on a story.
Keyboard Shortcuts for publishing stories with ease of keyboard
Adding Links in Web Stories, This is useful if you have an Affiliate link, or have to link a visitor to your post.
Design Tab for Web Stories WordPress Plugin makes it easy to use Google fonts, select layers, change font colours, Size Position, and all preliminary design features a plugin could have inbuilt.
Page Attachment Links
Adding Links To Web Stories On Background With Swipe Up Learn More Button
To add links to your story when a user can swipe up to go to a page with text as “Learn More” or whatever you want to give kindly have a look at the below screenshot.
To add this Learn More Button in our Web Story select the background and add the URL this is called
Also, you may change the text from “Learn More” to anything you wish to another awesome feature of the web stories for WordPress plugin.
Displaying Web Stories for WordPress on Posts or Pages
To display web stories, open your blocks in the editors select Stories Block,
Next, add the URL of your published story to embed like in the screenshot below.
Add a Cover for Web Stories
Cover for the web stories – Dimensions for the image is 360 x 600 pixels.
Make the cover attractive, as a cover of a Good Story Book.
Structured Data SEO for Web Stories for WordPress
You have to go to Yoast > Search Appearance > Schema Settings.
For Another Popular and better plugin than Yoast, Rank Math Free also fully supports the Web Stories for WordPress,
Rank Math’s Dashboard shows a toggle to enable Google Web Stories for WordPress.
Here is a small checklist :
Check this official link by Google to check best practices for Web Stories SEO.
Minimum And Maximum Pages for Web Stories
Ideally, a web story should have 10-20 pages, but a minimum of 5 and a maximum of 30 pages. Make a story with a minimum of 5 and a maximum of 30-page slides.
Completeness in the story
The story should be complete, should not end without any reason or right direction.
For example, if a recipe story could be for making a new salad, but that should cover each part from starting with vegetables used to being served on the table.
What you are trying to narrate in the story should be valid and relate the pages from start to end. Avoid skipping pages and publish information that is not clear what you want to narrate.
Use of Minimum Text With Clear Fonts Size Display
Title length and Text in story pages should be short as it’s for mobile devices; the fonts should be clear and readable for everyone. If possible, keep Text below 10 to 12 words per page.
Guidelines for Videos
If you add videos, use short clips 15 seconds per slide, use any app to clip the long videos into short clips, and see what video format would work best that uses minimum storage space and outputs with the best resolution.
Follow Content Guidelines
The Web Stories can also get into Google Discover on Android phones, so best is to follow the Discover content guidelines.
Don’t overuse multiple elements on a story page.
Please keep it simple, elegant, light, and short don’t use more and more elements on a single slide page.
As the user views a page for 5 seconds to 7 seconds, keep minimum details and Text that a user can read easily in that view time.
Guidelines for Images
Use good quality resolution images that are clear and unique in your story and relate to your narrative. As the story is in a Portrait mode, avoid the use of landscape format.
I usually keep on improving Checklists on my blog. One of my lists can be of your interests here 15 Tips to Avoid Structured Data Errors AMP on WordPress.
Another useful resource to read about SEO for web stories is from the official AMP Blog here.
Seo Web Stories WordPress: Official Video
Pick up a pre-installed template for your First Story, change the same with your unique content, like Title, headings, and page story you have created,
to quickly get started with the google web stories.
Note: Your content, whatever you make, should always be unique.
With the templates, you get a clear idea of how the stories should work properly and how many visitors you are getting on your stories with google analytics,
If you have any errors or warnings at the google search console, you can also validate that with a fix.
- With Latest Release Now WordPress Version 1.1 Web Stories Plugin Also Supports Gifs from Tenor, that you can add in your stories, Videos and Ai Writer