2016-03-31 4 views
1

Те же вопросы, что и this question, но, возможно, другая причина (ответ не дал мне никаких подсказок), плюс мне нужно создать новый вопрос, потому что я только что подписал до ... теперь надеюсь на помощь: о)Ошибка проверки на странице AMP с использованием шаблона Umbraco 7

Я получаю эту ошибку проверки при проверке страницы AMP:

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

Я следовал всем указаниям here, включая добавление шаблонного кода AMP в head раздел.

валидатор указывает на этого куска кода, который, как это предписано в проекте AMP:

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

я не вижу проблемы с выше ... Может ли кто-то предложить какие-либо советы или указатели пожалуйста?

Я создаю страницу AMP в шаблоне Umbraco 7, если это делает разницу ...

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

Очень полезный и соответствующий совет от Pawel на URL-адресах изображений и ошибке JSON-LD, которую я использовал для исправления моей разметки. В дополнение к этому, точная, окончательная причина моей конкретной проблемы была результатом резки/вставки правильного кода шаблона в Visual Studio ... VS автоматически переформатировал код и добавил места стилям в теге <noscript>. По этой причине проверка достоверности еще не удалась. Итак, убедитесь, что VS не «помогает» переформатировать - не должно быть никаких символов пробела. Sigh ...

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> 

Allways до даты код здесь: 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> 
+0

Спасибо. Тем не менее, я уже использую полный код из ссылки, которую вы цитируете, это всего лишь часть этого кода, которую я цитирую выше, где идентификаторы валидатора имеют проблемы – Fatty

+0

Можете ли вы пропустить нас всю страницу? –

+1

Легче отладить проблему с AMP, чтобы получить окончательный вывод html, а не исходный код. –

0

Вы пропускаете закрытие } в сценарии JSON-LD.Добавить} после издателя height

+0

, который дал мне хороший указатель, спасибо. Закрывающая скобка отсутствовала в объекте логотипа издателя, а не в конце. Тем не менее, проверка достоверности AMP остается прежней (но теперь проверена структурированная достоверность данных) – Fatty

Смежные вопросы