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

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/36169666/validating-amp-page-issue

标签

amp-html