Memperbaiki Item Data Terstruktur Tidak Ada Atau Tidak Valid Pada AMP HTML

Ditulis oleh: Adhy Suryadi
Ditulis pada: 5/10/2018

Item data terstruktur tidak ada atau tidak valid (Missing or invalid structured data item) - Baru-baru ini muncul notifikasi pada Google Search Console untuk AMP bahwa Item data terstruktur tidak ada atau tidak valid (Missing or invalid structured data item) pada halaman AMP. Padahal ketika dicek pada Structured Data Testing Tool tidak menunjukan adanya error struktur data blog.

Tentunya hal ini seketika membuat kulit dahi mengkerut, bingung apa yang harus dibetulkan karena pada Structured Data Testing Tool tidak ada error struktur data namun mendapat notifikasi dari Google Search Console untuk Item data terstruktur tidak ada atau tidak valid. Tentu saja ini membuat otak berdenyut lebih kencang dan membuat kepala menjadi migrain seketika hehehe....

Telisik punya telisik ternyata struktur data yang sudah ada tidak sesuai dengan kebutuhan AMP. Untuk itu kita harus merubah struktur data agar sesuai dengan anjuran AMP agar halaman memiliki data terstruktur yang valid AMP.

Untuk memperbaiki item data terstruktur tidak ada atau tidak valid (Missing or invalid structured data item) pada halaman AMP ini, kita harus merubah struktur data yang sudah ada menjadi sesuai anjuran AMP.

Yang pertama dilakukan adalah menghapus semua elemen schema.org seperti atau mirip seperti berikut ini.


itemprop='mainContentOfPage' itemscope='itemscope' itemtype='https://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>

Setelah yang menyangkut semua element schema.org seperti contoh di atas diedit, maka silahkan buat dan sesuaikan seperti berikut ini. Untuk blog maka kita ambil stuktur data article, kali ini dengan microdata.


<?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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkppwrKLfWJfcCa_9rz7mEEwut6xqnKjy6F3s2cBxahzHnKoUxrDaq8yJvrGjR01R-9xixxzcPyf1vdhG1-K5Q91qtl6MbTWq5LqwI0Zs7DN4UICSwYSCFEhBDx-GuRTRXYdOhLZGqK0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8mPjUZXqNJRp4Emske6DdBmMeqc8T94G0IUSaTcP5wWE6R_MbGjWOx2mia11ssf1E5HyzGOuBfvUX0K77ZsqsPNq-jr_m9thPQH2buovxnodIad-Xc7Swwx3h3bA22oNq8i7-wzGsXM/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>

Untuk logo blog silahkan buat sebuah gambar dengan ukuran 600x60 bisa dengan format jpg, png, atau gif. Kemudian silahkan ganti kode yang saya tandai di atas.

Untuk pembuatan logo blog silahkan ikuti selengkapnya di sini. Nantinya logo akan tampak seperti ini.

Setelah semuanya dilakukan, silahkan cek validasi struktur data AMP di sini.

Jika sudah valid maka akan tampak seperti gambar di bawah ini.

Setelah itu silahkan lakukan Validate Fix di Google Search Console dan tunggu Google untuk memvalidasi halaman AMP blog kita.

Perhatian:

Untuk AMP diperlukan thumbnail postingan yang besar pada range 800px. Maka untuk gambar-gambar untuk thumbnail postingan buat 800x800 untuk thumbnail kotak atau 1400x800 untuk thumbnail persegi.

Semoga berhasil dan bermanfaat.

Memperbaiki Item Data Terstruktur Tidak Ada Atau Tidak Valid Pada AMP HTML

Ditulis oleh: Adhy Suryadi Ditulis pada: 5/10/2018

Perhatian:

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 5/10/2018