验证 AMP 页面问题答案

【问题标题】：Validating AMP page issue验证 AMP 页面问题
【发布时间】：2016-03-23 04:06:54
【问题描述】：

我正在将 amp-html 添加到我们的商业网站。我不断收到以下错误，

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

我正在关注https://www.ampproject.org/docs/reference/spec.html#required-markup，但我似乎无法在页面中找到最后一个问题，有人可以告诉我我缺少什么吗？

这是我现在正在测试它的链接http://purencool.com.au/brand-derived-from-who-you-are/amp#development=1，所附图片是显示的错误

【问题讨论】：

标签： amp-html

【解决方案1】：

您需要在文档的<head> 中某处的AMP Boilerplate code。

【讨论】：

是的，你是对的，我遇到了 CSS 问题。不是标签而是样式
错误信息让您感到困惑的是，它指向文档末尾的事实吗？
术语“样板丢失或不正确”我没有想到样式有问题。我一直认为 amp-html 在语义上不正确

【解决方案2】：

我们还发现，当我们使用 Chrome Dev 时，组件或元素的顺序确实很混乱。

目前我们正在使用以下顺序，Chrome 或 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">

希望对你有所帮助。

【讨论】：