Web Stories for WordPress

Fix common issues

CORS Server Configuration

Screenshot of the 'Unable to load media' dialog in the Web Stories editor

Beginning in v1.19.0, some users may see an "Unable to load media" message in the editor.

This message displays in the editor when Web Stories cannot load images and videos in your Media Library. The most common cause for this issue is using a Content Delivery Network (CDN) or other service to host your site's assets. Without the correct HTTP headers set, the connection to CDN-hosted assets will be blocked due to Cross-Origin Resource Sharing (CORS).

Cross-Origin Resource Sharing is a mechanism that allows or disallows the loading of assets from one domain (e.g. Amazon S3) on another domain (e.g. your website).

Confirming the misconfiguration

When this message displays, images and videos typically will appear as an empty space in the editor because they cannot be accessed by the Web Stories plugin.

To further confirm that this issue is caused by CORS, open a story in the editor. In Chrome, right-click, and select Inspect, then the Console tab. A CORS error will look like this:

You will likely see multiple instances of this error in the console, one for each image/video.

Adding an Access-Control-Allow-Origin header

As noted in the console error message, Web Stories cannot load assets in this case because it is "blocked by CORS policy".

To adjust the CORS policy and allow images/videos that are offloaded to display in the Web Stories editor, you need to add an Access-Control-Allow-Origin header to your website. The method for setting up a CORS header will vary from host to host, so reach out to your web developer or hosting provider for help and send them this guide for context.

Some guides on adding Access-Control-Allow-Origin headers from popular hosts are below:

AMP Validation

Web Stories are powered by AMP, which adds some restrictions on a page’s allowed markup. For Web Stories to be eligible to appear on Google Search or Google Discover experiences, they need to adhere to various AMP specifications. This allows the story to be served via the AMP cache and ensures performance and the best experience for your users.

In some cases, other WordPress plugins can interfere with stories and insert disallowed markup, causing AMP validation issues. Here is a collection of some common AMP validation issues in stories

Missing URL for attribute 'publisher-logo-src' in tag 'amp-story'

This error is a result of a missing publisher logo in the story and can be resolved by adding a publisher logo to your story. You can do so in the editor under the "Document" tab. You can also manage all your publisher logos on the Settings page.

Missing URL for attribute 'poster-portrait-src' in tag 'amp-story'

This error is a result of a missing poster image in the story and can be resolved by adding a story poster image to your story. You can do so in the editor under the "Document" tab.

Custom JavaScript is not allowed

This error usually occurs when you are using a plugin that minifies your site's JavaScript or adds custom JavaScript to pages, which is not allowed in Web Stories. One way to confirm and address this is by (temporarily) excluding Web Stories from minification in your caching plugin. We’ve added exclusions which can be applied for some popular caching plugins below:

A mandatory AMP HTML tag is missing from this document

This error is most likely a result of a plugin modifying the story's HTML output in an incorrect way. Follow our Site Troubleshooting guide to determine if your theme or one of your plugins is causing this issue.

The parent tag of tag ‘html’ is ‘$root’, but it can only be ‘!doctype’.

This error is most likely a result of a plugin modifying the story's HTML output in an incorrect way. Follow our Site Troubleshooting guide to determine if your theme or one of your plugins is causing this issue.

Often times, this happens because of an ads plugin, so you can check if temporarily deactivating such a plugin resolves the issue. If it does, it is best to contact their support for further assistance.

The mandatory tag ‘html !doctype’ is missing or incorrect.

This error is most likely a result of a plugin stripping the mandatory AMP HTML tag. Follow our Site Troubleshooting guide to determine if your theme or one of your plugins is causing this issue.

A tag on this page requires an AMP component ‘script’ tag, which is missing.

This error is most likely a result of a plugin modifying the story's HTML output in an incorrect way. Follow our Site Troubleshooting guide to determine if your theme or one of your plugins is causing this issue.

Web Stories Test Tool

After you've developed the story, make sure the Web Story is valid AMP. A valid AMP story is one that adheres to various AMP specifications. You can use the following tools ensure that your Web Story is valid AMP:

The Web Stories Test Tool allows you to check that the Web Story is valid. To validate your story, paste your story URL into the text box and select the Test URL button. Your story will be scanned by the tool and test results displayed soon after.

Results will return as valid or invalid. If your story is invalid, a list of validation errors will be displayed.

Invalid Web Story example:

Valid Web Story example:

Further useful resources

AdSense ads not showing

The Web Stories plugin allows you to link your AdSense account to help you monetize your stories. You will need to first activate your AdSense account to get the IDs needed. This can for example be done using the Site Kit by Google WordPress plugin.

AdSense will determine where and how to insert ads into the story. It can take some time before ads start to show, so it may just be a matter of waiting. For further assistance on monetizing with Web Stories, visit the AdSense Help Center.

Stories not being indexed

For indexing related questions we recommend checking the Search Console Help Center which may help you find out why this may be happening.

Blank Stories

If you are seeing a blank page when viewing your Web Stories, this is likely a caching issue. This can be caused by:

Crawling, Indexing, and Traffic Inquiries

Crawling and indexing are processes that can take some time and rely on many factors. In general, we cannot make predictions or guarantees about when or if your URLs will be crawled or indexed. Use Search Console’s various tools to see if your content is properly crawled and indexed.

There may be several factors affecting why the traffic has decreased for your Web Stories. Spikes and declines in traffic are not unusual as Google Search is constantly improving its algorithms, which can affect ranking. To ensure that you are set up successfully for receiving traffic and ranking:

For questions about search rankings and traffic, please consult Google Search Central.