Best Practices
Editorial Guidelines
The possibilities when building a Web Story are as endless as your imagination and we encourage you to get creative and think outside the box. But, to successfully break the rules, you need to learn them. Check out this set of editorial guidelines on the Google for Creators site.
Text is extremely important, even if your Web Story is video or sound based. Some viewers may be in a situation that doesn’t allow them to listen to your story, or they may be hearing impaired. Thoughtful use of text and captions will widen your audience and feel inclusive. We highly recommend reading the text and font editorial guidelines.
Using assistive text for images & video
Make your images and videos accessible to users of screen readers by adding assistive text.
For images, insert a description of the image in the "Accessibility" section of the Design panel.
For videos, fill out both the "Title" and "Assistive text" text fields in the "Accessibility section of the Design panel. The title should be a description of the video itself, whereas the assistive text should describe the contents of the video.
Note: Ensure these text fields are empty for images and videos that are purely presentational and have no meaning to a screen reader user.
Include video captions
Add video captions to give viewers with hearing impairments, or who are in situations where they can't listen to audio, the full story. Include captions by:
- Formatting caption text in the required WebVTT file
- Select the video element on the canvas
- Open the "Captions" panel in the Style panel
- Click the "Upload captions" button and select the WebVTT file from the WordPress Media Library, or insert an external file by pasting its URL
Tip: There are several tools and online services that allow you to create such WebVTT files, many of them are free.
Note: Adding captions by linking to an external file requires Cross-Origin Resource Sharing (CORS) to be set up on the server where the file is hosted. Learn more about configuring CORS.
Avoiding ‘burned-in’ text on assets
It’s tempting to reuse video and composite images you have prepared before. Oftentimes, these assets have ‘burned-in’ text, which means that the text is part of the actual image or video. This isn’t only bad for accessibility, but also makes it hard for search engines to understand your content.
Instead, use assets that are clean, and layer text elements on top using the element.
Optimizing your images & videos
Did you know? When you upload videos to the story editor, it will automatically optimize videos for optimal load times.
The editor does not yet have the capability to automatically optimize image content, so it’s a good idea to invest into optimizing them in advance.
To optimize your images:
- Crop to only the visible portion of your image
- Use PNG8+alpha or WebP for images that require transparency (for example by using ImageAlpha or Squoosh)
- Use optimized JPEGs or WebP for all other images (easy with Squoosh)
- Avoid GIFs (use autoplaying looping video instead)
Embedding Web Stories across your site
The Web Stories WordPress plugin not only makes it easy for you to create beautiful stories. It also provides numerous ways to embed Web Stories across your site, including a versatile Web Stories block, integration of Web Stories into the theme customization process, and integration with the classic editor.
Integrating Web Stories into your content strategy allows you to enhance the quality of your content strategy and to diversify your traffic sources. You can embed your own Web Stories or Web Stories created by other publishers on your site.
Check out the Web Stories embeds blog post to learn more.
Shortcodes
We highly recommend using the Web Stories block to embed Web Stories across your site. However, if you are using the classic editor or some page builder solution, you might want to use our dedicated shortcodes to embed stories.
To display a single story in an embed, you can use the [web_stories_embed] shortcode. Example:
[web_stories_embed url="https://wp.stories.google/stories/how-to-optimize-videos-for-web-stories/" width="360" height="600" title="How to optimize videos for Web Stories" ]
It supports the following attributes:
url— the story URL (required)width— embed width (optional, default:360)height— embed height (optional, default:600)title— story title (optional, but recommended)poster— the story poster URL (optional, but recommended)align— embed alignment (optional, default:none). Possible values:none,left,right,center,wide
To display your latest stories in an embed, you can use the [web_stories] shortcode. For example:
view— type of view (required, default:circles). Possible values:circles,grid,carousel,listnumber_of_columns— number of columns in grid mode (optional, default:1)title— whether to display the story title (optional, defaultfalse)excerpt— whether to display the story excerpt (optional, default:false)author— whether to display the story author (optional, default:false)date— whether to display the story date (optional, default:false)archive_link— whether to display a link to the stories archive (optional, default:false)archive_link_label— archive link label (optional, default:View all stories)image_alignment— image alignment for list view (optional, default:left)class— additional HTML class names to add (optional)circle_size— size of circles in carousel view (optional, default:150)number_of_stories— number of stories to display (optional, default:10)order— order of stories (optional, default:DESC). Possible values:DESC,ASCorderby— key to order stories by (optional, default:post_date). Possible values:post_date,post_titlesharp_corners— whether to use sharp instead of rounded corners (optional, default:false)
Tip: Use the dedicated Web Stories button in the classic editor to configure this shortcode.
Customizing the Stories Archives page
By default WordPress automatically creates an archive page, displaying your latest stories in your theme's layout. You can usually access it under /web-stories/, e.g. https://example.com/web-stories/.
You can change this behavior on the Web Stories Settings page. There you can choose to disable the archive page entirely or create your own by selecting an existing page on your site that should act as the archive page. Once you have created your custom archive page you can select it on the Settings page after choosing to create your own.
To fill your custom archive page with content, you can for example use the Web Stories block to add stories. The default https://example.com/web-stories/ URL will automatically redirect to your custom page.