Validasi struktur data template blog AMP

Berbekal sebuah postingan dari mas Adhy suryadi tentang cara memperbaiki struktur data amp yang tidak ada atau hilang saya validasi sendiri template blog Nalagila. Karena saya tidak sabar menunggu kapan template premium kompiajaib akan diupdate. menunggu adalah hal yang membosankan ( bila tidak ada kegiatan ).

Validnya struktur data pada template amp berimbas pada tanda / logo petir di pencarian google. Oleh karena itu wajib hukumnya untuk segera memulai validasi bagi sobat yang menggunakan template amp.

Sebenarnya kebanyakan template amp sudah valid struktur datanya, hanya saja struktur yang dipakai adalah schema.org/website sedangkan untuk memunculkan tanpa petir kita harus merubahnya menjadi schema.or/newsarticle.

Sebelum lebih jauh membahas hal tersebut ada baiknya sekarang cek blog masing masing di tool penguji AMP dan penguji struktur data.

Link penguji AMP : https://search.google.com/test/amp/
Link penguji struktur data AMP : https://search.google.com/structured-data/testing-tool

Tanda petir akan muncul di blog sobat bila hasil pengujian AMP hasilnya seperti ini :


Lalu hasil pengujian struktur data AMP seperti ini :

Cara edit template AMP agar valid struktur data :

Pertama, kita hapus semua yang berkaitan dengan schema.org
Contoh:

<body itemscope='itemscope' itemtype='https://schema.org/WebPage'>

Setelah diedit:

<body>

Atau contoh:

<div itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WebSite'>

Setelah diedit:

<div>
Ingat, hapus semuanya kecuali pada schema.org/person dan schema.org/breadcumb.
Selanjutnya silakan sesuai template dengan struktur schema.org/newsarticle berikut ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection' itemscope='' itemtype='http://schema.org/NewsArticle' lang='id'>
&lt;head&gt;
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found | <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/></title>
    </b:if>
</b:if>
...................
...................
...................

<style amp-custom='amp-custom'>
/*<![CDATA[*/
body{background:#f1f1f1;margin:0;}
...................
...................
...................
/*]]>*/
</style>
<style amp-boilerplate='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='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
...................
...................
...................
&lt;/head&gt;&lt;!--<head/>--&gt;
<body>
     <div id='main-wrapper'>
...................
...................
...................
            <b:includable id='post' var='post'>
  <article class='post hentry'>
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta expr:content='resizeImage(data:post.firstImageUrl,800,&quot;1:1&quot;)' itemprop='url'/>
  <meta content='800' itemprop='width'/>
  <meta content='800' itemprop='height'/>
  </div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta content='https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/s800-c/no-thumbnail.jpg' itemprop='url'/>
  <meta content='800' itemprop='width'/>
  <meta content='800' itemprop='height'/>
  </div>
    </b:if>
  <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <meta content='https://1.bp.blogspot.com/-x28jFJZAllE/WvJEsYOqpLI/AAAAAAAAxgc/RIlqPzO2a4kRknmKEbZ1ozHHMgnJYh2VwCLcBGAs/s600/bloggue.png' itemprop='url'/>
      <meta content='600' itemprop='width'/>
      <meta content='60' itemprop='height'/>
    </div>
    <meta expr:content='data:blog.title' itemprop='name'/>
  </div>
...................
...................
...................
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title' itemprop='headline'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title' itemprop='headline'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>
...................
...................
...................
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<meta expr:content='data:blog.metaDescription' property='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' itemprop='description'/>
<meta expr:content='data:post.snippet' property='twitter:description'/>
</b:if>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<h3 class='post_meta'>
<b:include data='post' name='author-post'/>
  </h3>
<div class='snippets'><data:post.snippet/></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postmeta'>
<h3 class='date-header'>
<b:include data='post' name='author-post'/>
</h3>
</div>
...................
...................
...................
<div class='clear'/>
  </article>
</b:includable>
...................
...................
...................
          </b:widget>
        </b:section>
      </div>
<aside>
...................
...................
...................
</aside>
      <!-- spacer for skins that want sidebar and main to be the same height-->
  <div class='clear'/>
  </div>
<footer>
<div class='credit-wrapper'>
<div class='credit-left'>
Copyright &#169; 2018 <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - Proudly powered <a href='//www.blogger.com' title='Blogger'>by Blogger</a>
</div>
</div>
</footer>

&lt;!--</body>--&gt; &lt;/body&gt;
</HTML>
Perhatian :
Silakan cek di google web master / google search console lalu pada menu AMP lagi lalu pada tap valid dengan peringatan  silakan tekan validasi fix atau mulai perbaikan. Sekarang google akan melakukan validasi, setelah struktur datanya valid maka satu persatu postingan kita akan mendapat tanda petir.
Reaksi:

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser