Same question and symptoms as this question but maybe a different cause (the answer didn't offer any clues for me), plus I have to create a new question because I've just signed up... now hoping for help :o)
I get this validation error when validating an AMP page:
The mandatory text (CDATA) inside tag 'head > style : boilerplate' is missing or incorrect.
I've followed all the guidelines here, including adding the AMP boilerplate code in the head section.
The validator points to this chunk of code, which is as prescribed by the AMP project:
<noscript><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript>
I can't see a problem with the above... Can anybody else offer any advice or pointers please?
I'm creating the AMP page in an Umbraco 7 template if that makes a difference...
EDIT:
Here's the HTML output...
UPDATE: I just found and ran this markup through https://developers.google.com/structured-data/testing-tool/ and it produced a different error Missing ',' or '}' in object declaration. which I can't spot... maybe problem relates to my JSON-LD...?
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Blah shortlisted at Awards for Excellence 2015</title>
<link rel="canonical" href="http://somedomain.local/news-media/news-media-headlines/2015/oct/blah-shortlisted-at-awards-for-excellence-2015/" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,400italic,300,700,400|PT+Sans:700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "http://somedomain.local/news-media/news-media-headlines/2015/oct/blah-shortlisted-at-awards-for-excellence-2015/",
"headline": "Blah shortlisted at Awards for Excellence 2015",
"description": "We're delighted to announce that Blah has been shortlisted for the 'Blah & blah blah' award at the...",
"datePublished": "10/28/2015 9:43:57 AM",
"author": {
"@type": "Organization",
"name": "Name here"
},
"publisher": {
"@type": "Organization",
"name": "Name here",
"logo": {
"@type": "ImageObject",
"url": "https://www.somedomain.com/img/logo.png",
"width": 600,
"height": 60
},
"image": {
"@type": "ImageObject",
"url": "https://www.somedomain.com/img/logo.png",
"height": 50,
"width": 165
}
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript>
<style amp-custom>
body {
font-family: 'Roboto', sans-serif;
}
.sub-heading {
padding-left: 1rem;
padding-top: 0;
padding-bottom: 1em;
margin: 0;
color: #fff;
}
body > div {
padding: 1rem;
}
h1, h2 {
color: #fff;
padding: 1rem;
margin: 0;
}
h1, .sub-heading {
background-color: #009ed4;
}
h2 {
background-color: #00618e;
font-weight: 400;
font-size: 1.25em;
}
amp-img {
max-width: 100%;
}
.logo {
margin: 1em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<a href="/"><amp-img width="165" height="50" class="logo" src="https://www.somedomain.com/img/logo.png" alt="Logo"></amp-img></a>
<h1>Blah shortlisted at Awards for Excellence 2015</h1>
<p class="sub-heading">26 October 2015</p>
<h2>We're delighted to announce that...</h2>
<div><p>This year is the 16th... </p>
<p ><amp-img layout="responsive" width="500"height="281" src="/media/9348/et.jpg?width=500&height=281" /></amp-img></p>
<p><a href="http://www.google.co.uk/" target="_blank" title="blah">blah blah</p>
<p ><amp-img layout="responsive" width="500"height="281" src="/media/9349/som.jpg?width=500&height=281" /></amp-img></p>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue nibh, congue eu dictum at, interdum et libero. Etiam malesuada vehicula felis, vel varius odio semper sit amet. Phasellus quis sapien sed turpis porta lobortis. Aenean rutrum risus ut scelerisque mollis. Suspendisse id feugiat erat.</p>
<p><amp-img layout="responsive" width="500"height="306.452" src="/media/9350/the_shining.jpg?width=500&height=306.4516129032258" alt="alt text here" /></amp-img></p>
<p>"quote here." orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue nibh, congue eu dictum at, interdum et libero. Etiam malesuada vehicula felis, vel varius odio semper sit amet. Phasellus quis sapien sed turpis porta lobortis. Aenean rutrum risus ut scelerisque mollis. Suspendisse id feugiat erat.</p>
<p> </p>
<div>
<div>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue nibh, congue eu dictum at, interdum et libero. Etiam malesuada vehicula felis, vel varius odio semper sit amet. Phasellus quis sapien sed turpis porta lobortis. Aenean rutrum risus ut scelerisque mollis. Suspendisse id feugiat erat.</div>
</div></div>
</body>
</html>
