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'>
<head>
<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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<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'/>
...................
...................
...................
</head><!--<head/>-->
<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,"1:1")' 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/AVvXsEjCZ0Qt-QR6c7xbGIhSsLSD2HbQCIuj1LY9jlQ5IZLyk6fR6Nf2uyDdW08a2LtF2azAf5heFkogHLuLWP0wfZknvVRjulDijSTpoVvMKwim3e6E4sst6j0jE2Z5ILtYcqCucGhrA3WZGbA/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/AVvXsEhW1-dSjy2dRMMVgwpitX2xXoFZH2l93zMOMmc0T_wzUm3-5yEcZVEg0bSlF6FfX-jKjcmdWxuLJZd96i-wcXfvKKgqlPRWBUaD4hh-JQXVYt5cUYdaAzm1zkY7Bf9INfQ2hu61QYLTVis/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 != "item"'>
<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 == "item" 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='"post-body-" + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'>
<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 == "item" or data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:blog.pageType == "item"'>
<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 © 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>
<!--</body>--> </body>
</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.
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.