Memperbaiki Item Data Terstruktur Tidak Ada Atau Tidak Valid Pada Amp Html

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 proposal AMP.

Yang pertama dilakukan ialah menghapus semua elemen schema.org ibarat atau ibarat mirip 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 ibarat pola di atas diedit, maka silahkan buat dan sesuaikan ibarat 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/AVvXsEhvYxwj-VB3qL-0LEcs1W5iXAN712JuRhWTkC-BTC6hq7hKKIkOgcem6kvDssgUx8kBNc53e-EmCQDe48KbRbqQt-9DPuMP-zQ0J3JCKr8E0fGkFa-aZCQBF4ylCLb1ZgerxaUHAjeqX28/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/AVvXsEgV19pD7KhWIsGLhG5urVelMjvb8AtB44dV93aL_kForcpIb5CfUo3t0Iz6Di9DbK8eyycFR0ImomtmeTexUN-C_87xxaO3b2NNpag5LXcLu9CSMtg0hivMgGXjY_RaZAmN7KOL-RT8-Js/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 dapat dengan format jpg, png, atau gif. Kemudian silahkan ganti instruksi yang saya tandai di atas.

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

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

Jika sudah valid maka akan tampak ibarat 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 diharapkan 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

Perhatian:

0 Response to "Memperbaiki Item Data Terstruktur Tidak Ada Atau Tidak Valid Pada Amp Html"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel