Solved : Tag ‘amp-story’ is not allowed to have any sibling tags (‘body’ should only have 1 child)
Google Releases AMP Stories, AMP Stories are a “mobile-focused format for delivering news and information as visually rich, tap-through stories.” While this might sound a lot like something Snapchat or Instagram or Facebook has already done. you can read more amout AMP Stories here.
How to Fixed Tag ‘amp-story’ is not allowed to have any sibling tags
While you adding AMP Analytics or AMP ads after <body> tags, similar to AMP pages, you might get an AMP error in console during validating your AMP Stories. It’s
{Read:- Step-by-Step Guide to Adding CDN to a WordPress Website }
AMP Visual Stories showing below error
AMP validation had errors:
validator.js:sourcemap:514 http://localhost/ampstory/index.html?:19:4
{Read:- Common WordPress Performance issues & How to Fix Them }
Tag ‘amp-story’ is not allowed to have any sibling tags (‘body’ should only have 1 child).
(see https://www.ampproject.org/docs/reference/components/amp-story)
No need to worry you can fixed such type of error in AMP story. check below code for your reference.
AMP Visual Stories : AMP validation had errors
{Read:- How to Speed Up WordPress Website Performance }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <amp-analytics> <script type="application/json"> { "requests": { "pageview": "https://foo.com/pixel?RANDOM" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics> <amp-story standalone ... |
In above code you can see <amp-analytics> added inside <body> and <amp-story> tags.
AMP Visual Stories, not allowed to add any tags between <body> and <amp-story> tags, if you add any tag you might get below error.
Tag ‘amp-story’ is not allowed to have any sibling tags (‘body’ should only have 1 child).
So if you want to add any tags in AMP Visual Stories you should add it after <amp-story> tags check below code for reference.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<body> <amp-story> <amp-analytics> <script type="application/json"> { "requests": { "pageview": "https://foo.com/pixel?RANDOM" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics> ... </amp-story> |
Now you can successful validate your amp stories.
{Read:- Steps to Harden Your WordPress Website Security }
Key Points should consider in AMP stories:
- The
<amp-story>tag must be a direct child of body and may not have any other siblings. - Many of the components used in AMP templates are disallowed in AMP stories.
- Some of the components (e.g. links) used in the templates are possible within AMP stories but require different markup.
Thank you,
cause your post, my problem have been resolved.