Embeds on AMP Pages are INVALID

Hello and thanks for getting in touch. From what I can see on the page you have provided your Web Story is valid. See the results of this here.

The AMP test you have run is for your page and not the web story on that page. This doesn’t look to be a Web Stories issue but an AMP validation issue. You can find more information about ‘amp-img’ tag here. You will also find more AMP support from the support site.

When running any of your other previously embedded web stories through the AMP validator do you get any with issues?

Hello Adam,

And thank you for your quick response.
Yes, the web story itself is valid, the problem is in embedding, probably in the player.

Let me repeat what Google says:
The tag ‘amp-img’ may not appear as a descendant of tag ‘amp-story-player’.

Please view the same page validation without the embedded story:
https://search.google.com/test/amp/result?id=YsCm3zD-UaFZeMjRncQ5QQ

This and other web stories were embedded into AMP pages not now but previously. They didn’t receive validation errors until I have updated to your version 1.14.0

You can test it yourself. Just embed any valid web story on any valid AMP page, and you will see that the page will become invalid.

• This reply was modified 3 years ago by ArtFl.

@artfl I have tested this myself and am unable to get the invalid AMP issue. This does not seem to be a Web Stories issue but I can troubleshoot this further for you if you can provide the following:

1. Your Site Health information or you can share privately if you prefer via this form.
2. Do you still get this issue when temporarily disabling plugins and performing checks once more? You could also try temporarily changing your site theme to Twenty Twenty-One and checking.

Let me know if you have any further questions.

Thank you, Adam,

The site health is “Good”, there are no Critical Errors.

What about Google’s phrase that points to the amp-story-player:

“The tag ‘amp-img’ may not appear as a descendant of tag ‘amp-story-player’.”

@artfl Thanks for following up. For your Site Health, it would be very useful for us to have the detailed information under Tools > Site Health > Info, as you can see in this screenshot. Can you please copy and paste that information here or submit it via our private form here?

The error that are you seeing is not necessarily directly from amp-story-player, as often times a conflict occurs between a site’s theme and/or plugins and Web Stories that causes this error to display. Your Site Health information will help us run some tests to see what might be causing the conflict.

Thanks for your help!

Hi Bethany and thank you for your kind assistance!

I’ve just sent you the site health information via your form.

And here is how the codes in the AMP page source looked like after embedding.

With the use of a shortcode:

<div class="wp-shortcode-web-stories-embed web-stories-embed web-stories-embed-amp alignnone"> <div class="wp-block-embed__wrapper"> <amp-story-player width="360" height="600" width="360" height="600" layout="intrinsic"> <a href="https://www.russiandog.net/web-stories/russian-dog-names-male/amp"> <amp-img data-hero src="https://www.russiandog.net/wp-content/uploads/2021/10/Russian-Borzoi-dog-head-640x853.jpg.webp" width="360" height="600" alt="Male Russian Dog Names" class="amp-wp-enforced-sizes" layout="intrinsic"><amp-img fallback data-hero src="https://www.russiandog.net/wp-content/uploads/2021/10/Russian-Borzoi-dog-head-640x853.jpg" width="360" height="600" alt="Male Russian Dog Names" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img></amp-img> </a> </amp-story-player> </div> </div>

With the use of a block editor:

<div class="wp-block-web-stories-embed web-stories-embed web-stories-embed-amp alignnone"> <div class="wp-block-embed__wrapper"> <amp-story-player width="360" height="600" width="360" height="600" layout="intrinsic"> <a href="https://www.russiandog.net/web-stories/russian-dog-names-female/amp"> <amp-img data-hero src="https://www.russiandog.net/wp-content/uploads/2021/07/cropped-Poster-image-2.jpg" width="360" height="600" alt="Female Russian Dog Names" class="amp-wp-enforced-sizes" layout="intrinsic"><amp-img fallback data-hero src="https://www.russiandog.net/wp-content/uploads/2021/07/cropped-Poster-image-2.jpg" width="360" height="600" alt="Female Russian Dog Names" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img></amp-img> </a> </amp-story-player> </div> </div>

Is everything ok with them?

@artfl thank you for all the useful information. I have been able to recreate your issue and it is as a result of using the Accelerated Mobile Pages plugin.

If you disable the plugin and switch to using the official AMP plugin for WordPress then this should resolve the validation errors you are getting on your webs when embedding Web Stories.

Please let me know how this goes and if you have any further questions or issues.

Just to follow up on this I was able to recreate the same AMP validation error you reported using the accelerated mobile pages plugin which I was unable to recreate with the official AMP plugin.

It seems as though there is a plugin conflict with the accelerated mobile pages plugin and the Web Stories plugin. I would recommend reaching out to the accelerated mobile pages plugin team with this validation error.

Hope this helps and please let me know if you have any further questions.

Hi Adam and thank you for your valuable assistance!

I have addressed the AMPforWP plugin’s support with that.

Just a quick question:
I can’t find an embed button or the story’s embedding shortcode in the web stories editor anymore.
Is it still there?
I use the WP Classic Editor and prefer to use web stories’ shortcode than the block in the block editor.

@artfl No problem at all glad we could help!

Currently, there is not a button available in the Classic Editor that inserts the [web_stories_embed] shortcode. You’ll have to manually enter the [web_stories_embed] code for a single story for the time being.

The shortcode can be found by going to your story, Switch to draft > Publish > Add to new post, then copy that code over into the post you are updating.

There is currently an open GitHub issue to update this so you can directly embed your stories from the classic editor. Please feel free to follow this for further updates.

Thank you Adam!
Now I know how to do it.

I’ll wait for AMPforWP response about the conflict and let you know.

You’re welcome. That would be great thanks very much.