Web Stories for WordPress

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:

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:

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:

To display your latest stories in an embed, you can use the [web_stories] shortcode. For example:

Tip: Use the dedicated Web Stories button in the classic editor to configure this shortcode.