2016-03-31 10 views
1

同じ質問と症状がありますが、別の原因が考えられます(答えは私には手がかりを与えませんでした)。Umbraco 7テンプレートを使用したAMPページでの検証エラー

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

私はAMPの定型的なコードを追加することを含む、すべてのガイドラインhereを、続いてきました:私はAMPページの検証時に、この検証エラーを取得O)

:今助けを望んで...アップheadセクション。 AMPプロジェクトで規定されているこのコードのチャンクに

バリポイント:

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

私は上記の問題点を見ることができない...誰がどんなアドバイスやポインタを提供することができますお願いします?

私はそれが違いを行う場合Umbraco 7テンプレートでAMPページを作成しています...

EDIT:

ここ

HTML出力だ...

UPDATE:私はちょうど見つけ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> 

答えて

1

マークアップを修正するために使用した画像URLとJSON-LDエラーに関するPawelの非常に有用で適切なアドバイス。それに加えて、私の特定の問題の正確な、最終的な原因は、正しい定型文をVisual Studioにカット/ペーストした結果でした... VSは自動的にコードを再フォーマットし、<noscript>タグのスタイルにスペースを追加しました。これは、検証がまだ失敗した理由です。だから、VSが「有益に」再フォーマットされていないことを確認してください。スペース文字は使用しないでください。一口...

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のです画像は相対パスであってはいけません。あなたは、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", 
     "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> 
+0

ありがとうございます。しかし、私はすでにあなたが引用したリンクから完全なコードを使用しています。これは上で引用したコードの一部です。バリデーターは問題があると識別します – Fatty

+0

ページ全体の内容を過去に渡すことはできますか? –

+1

AMPの問題を簡単にデバッグするには、ソースコードではなく、最終的なhtml出力を得ることです。 –

0

:HTML - ここ

は、あなた(私は定型的なコードや画像のリンクを置き換える修正)です。追加してください。height

+0

それは私に良いポインタをくれた、ありがとう。終わりではなく、出版社のロゴオブジェクトには閉じ括弧がありませんでした。しかし、AMPの検証の失敗は以前と同じですが(構造化されたデータの検証は正常です) – Fatty

関連する問題