CODEWITHSUNDEEP
amp-html
purencool
purencool

Reputation: 423

Validating AMP page issue

I am adding amp-html to our business website. I keep getting the error below,

The mandatory text (CDATA) inside tag 'head > style : boilerplate' is missing or incorrect.

I am following https://www.ampproject.org/docs/reference/spec.html#required-markup but I can't seem to find this last issue in the page can someone tell me what I am missing?

This is the link I am testing it with right now http://purencool.com.au/brand-derived-from-who-you-are/amp#development=1 and the attached image is the error that is showing

enter image description here

Upvotes: 3

Views: 2728

Answers (2)

Chalaki Law
Chalaki Law

Reputation: 1

We also found that the order of components or elements does matte when we used Chrome Dev.

Currently we are using the following order with no errors being reported by either Chrome or Google SC AMP

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">


<? require_once('_css.php'); ?>   ****  CSS here does matter  ****


<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "WebPage",
"name": "<?= $strTitle ?>",
"url": "<?= $strCanonicalUrl ?>",
"description": "<?= $strDescription ?>",
"breadcrumb":{
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":"1",
"item":{
"@type":"WebSite",
"@id":"https://www.chalakilaw.com",
"name":"Home"
}
},
{
"@type":"ListItem",
"position":"2",
"item":{
"@type":"WebPage",
"@id":"https://www.chalakilaw.com/truck-18-wheeler-accidents/",
"name":"<?= $strKeyword1 ?>"
}
},
{
"@type":"ListItem",
"position":"3",
"item":{
"@type":"WebPage",
"@id":"<?= $strCanonicalUrl ?>",
"name":"<?= $strCity ?>"
}
}
]},
"mainEntity": {
"@type": "Article",
"@id": "<?= $strCanonicalUrl ?>",
"author": "Sean Chalaki",
"datePublished": "<?= date ("c", strtotime($strFileCDate)); ?>",
"dateModified": "<?= date ("c", getlastmod()); ?>",
"mainEntityOfPage": "<?= $strCanonicalUrl ?>",
"headline": "<?= $strTitle ?>",
"image": {
"@type": "imageObject",
"url": "<?= $strImage ?>",
"height": "500",
"width": "500"
},
"publisher": {
"@type": "Organization",
"name": "Chalaki Law P.C.",
"logo": {
"@type": "imageObject",
"url": "https://www.chalakilaw.com/images/logo-l.png"

}
}
}
}</script>

<script type="application/ld+json">
{ 
"@context": "http://schema.org",
"@type": "Product",
"name": "Chalaki Law",
"aggregateRating":{
    "@type": "AggregateRating",
    "ratingValue": "5.0",
    "reviewCount": "34"
}
}
</script>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- AMP Specific -->
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></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>

<title><?= $strTitle ?></title>
<meta name="description" content="<?= $strDescription ?>">
<link rel="canonical" href="<?= $strCanonicalUrl ?>" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="<?= $strTitle ?>" />
<meta property="og:description" content="<?= $strDescription ?> " />
<meta property="og:url" content=" <?= $strCanonicalUrl ?> " />
<meta property="og:site_name" content="Chalaki Law P.C." />
<meta property="og:image" content="<?= $strImage ?>" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="<?= $strDescription ?>">
<meta name="twitter:title" content="<?= $strTitle ?>">
<meta name="twitter:site" content="@chalakilaw">
<meta name="twitter:image" content="<?= $strImage ?>">  
<meta name="twitter:creator" content="@chalakilaw">

Hope this helps you.

Upvotes: 0

Gregable
Gregable

Reputation: 498

You need the AMP Boilerplate code somewhere in the <head> of your document.

Upvotes: 2

Related Questions