使用 Umbraco 7 模板的 AMP 页面中的验证错误

Question

与相同的问题和症状，但可能是不同的原因（答案没有为我提供任何线索），而且我必须创建一个新问题，因为我刚刚注册.. . 现在希望得到帮助 :o)

我在验证 AMP 页面时收到此验证错误：

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

我已遵循所有准则 here，包括在 head 部分添加 AMP 样板代码。

验证器指向这段代码，这是 AMP 项目规定的：

<noscript><style amp-boilerplate>
     body {
         -webkit-animation: none;
         -moz-animation: none;
         -ms-animation: none;
         animation: none;
     }
</style></noscript>

我看不出上述问题...请问还有其他人可以提供任何建议或指示吗？

我正在 Umbraco 7 模板中创建 AMP 页面，如果这会产生影响...

编辑：

这是 HTML 输出...

更新：我刚刚通过 https://developers.google.com/structured-data/testing-tool/ 找到并运行这个标记，它产生了一个不同的错误 Missing ',' or '}' in object declaration. 我无法发现...也许问题与我的 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&#39;re delighted to announce that Blah has been shortlisted for the &#39;Blah &amp; blah blah&#39; 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&#39;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&amp;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&amp;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&amp;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>

Answer 1

您需要有完整的放大器样板代码。

替换您的 multiline 样板代码：

   <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-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>

此处始终是最新代码：https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md

您在 Publisher 部分有 json 语法错误。

    "publisher": {
            "@type": "Organization",
            "name": "Name here",
            "logo": {
                "@type": "ImageObject",
                "url": "https://www.somedomain.com/img/logo.png",
                "width": 600,
                "height": 60
            } // You forget to close logo object.
     },

您的 AMP 语法错误：

必填：

The width of the image, in pixels. Images should be at least 696 pixels wide.

推荐（如果添加通过测试）：

The date and time the article was most recently modified, in ISO 8601 format. If the article has never been modified, you can omit this property or use the same date as datePublished.

另一个重要的事情是 URL 的图像不应该是相对路径。

这是您的（已修改 - 我替换了样板代码和图片链接）html：

<!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&#39;re delighted to announce that Blah has been shortlisted for the &#39;Blah &amp; blah blah&#39; award at the...",
        "datePublished": "10/28/2015 9:43:57 AM",
        "dateModified": "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": 700
            }
        }
    </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="http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" alt="Logo"></amp-img></a>
        <h1>Blah shortlisted at Awards for Excellence 2015</h1>
            <p class="sub-heading">26 October 2015</p>
            <h2>We&#39;re delighted to announce that...</h2>
    <div><p>This year is the 16th... </p>
<p ><amp-img layout="responsive" width="500"height="281" src="http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg"  /></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="http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg"  /></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="http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" 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>

Answer 2

您在 JSON-LD 脚本中缺少结尾 }。在发布者 height

之后添加 }

Answer 3

Pawel 关于图像 URL 和 JSON-LD 错误的非常有用和相关的建议，我用它来更正我的标记。除此之外，我的具体问题的确切最终原因是 cutting/pasting 将正确的样板代码转换为 Visual Studio... VS 自动重新格式化代码并将 space 添加到<noscript> 标签中的样式。这就是验证仍然失败的原因。因此，请确保 VS 不会 'helpfully' 重新格式化 - 不应有任何 space 字符。叹息...

使用 Umbraco 7 模板的 AMP 页面中的验证错误

Validation error in AMP page using Umbraco 7 template

validation

umbraco7

amp-html