使用Umbraco 7模板

时间：2016-03-31 16:05:30

标签： validation umbraco7 amp-html

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

3 个答案:

答案 0 :(得分：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

json部分中出现Publisher语法错误。 

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

答案 1 :(得分：1)

Pawel对图像URL和JSON-LD错误的非常有用和相关的建议，我用它来纠正我的标记。除此之外，我特定问题的确切最终原因是将正确的样板代码剪切/粘贴到Visual Studio中... VS自动重新格式化代码并为<noscript>标签中的样式添加空格。这是验证失败的原因。所以，确保VS没有帮助＃39;重新格式化 - 不应该是任何空格字符。叹息...

答案 2 :(得分：0)

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

之后添加}
相关问题
最新问题