Cara Memperbaiki Warning Image Size Smaller Than Recommended Size di AMP Template
Baru-baru ini muncul
notifikasi dari Google Webmaster atau Search Console untuk blog-blog AMP dengan
warning ukuran gambar lebih kecil dari ukuran yang direkomendasikan atau dalam
Bahasa Inggris image size smaller than recommended size.
Warning ini tentang data
terstruktur dalam AMP mengacu pada gambar yang lebih kecil dari ukuran yang
disarankan. Ini dapat mencegah halaman muncul dengan semua fitur yang
berhubungan dengan AMP di Google Search, dan juga dapat mencegah kartu Discover
blog muncul dengan gambar besar (ini dapat menyebabkan penurunan lalu lintas
situs web dan keterlibatan pengguna).
Namun ketika dicek di search
console, Google tidak memberikan keterangan lebih tentang gambar mana yang
menyebabkan error. Tentu saja ini membuat bingung, bagian mana yang harus
dibetulkan.
Untuk itu saya terus menelusuri semua link yang diberikan tentang warning ini. Nah untuk memperbaikinya, kita harus menggunakan gambar yang lebih besar sesuai dengan pedoman Google.
Untuk struktur data
schema.org untuk tipe Article, NewsArticle, dan BlogPosting, untuk item
ImageObject harus menggunakan gambar besar, setidaknya lebar gambar minimum
1200px dengan rasio 16:9, 4:3, atau 1:1.
Jadi untuk mengatasi masalah
ini, pertama kita harus membuat gambar untuk thumbnail setiap post (gambar
dengan tag noscript) dengan rasio yang saya sebutkan tadi di atas, misal
1280x720 untuk rasio 16:9 atau 1200x900 untuk rasio 4:3 atau gambar persegi 1:1
yaitu 1200x1200.
Kemudian langkah kedua
silahkan masuk ke edit HTML lalu cari kode:
<b:includable id='post' var='post'>
Di sebelah bawah kode tadi
cari kode berikut, atau kode yang mirip seperti kode berikut (mungkin akan
berbeda tergantung pembuat template AMP).
<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/AVvXsEgMdzyhAUGkpFWOI2i0ker91Q6qTedFp2XheesGknq0ry5j9-8tvxAw6YH24unAPg2fWINOFDrW9syt2eOcHpoh_xg03BC7_VcM8wPCBuA04RmQBp4DjB7rok-XzbMQxX6VJAWyyTavAWY/s800-c/no-thumbnail.jpg' itemprop='url'/>
<meta content='800' itemprop='width'/>
<meta content='800' itemprop='height'/>
</div>
</b:if>
Kemudian silahkan ganti
dengan kode berikut dibawah ini :
1. Untuk thumbnail 1280x720
untuk rasio 16:9.
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='resizeImage(data:post.firstImageUrl,1280,"16:9")' itemprop='url'/>
<meta content='1280' itemprop='width'/>
<meta content='720' itemprop='height'/>
</div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieACu-WnAFRBj84N6CUtaG3SpOTp70UhB-kXYYH2pJ6cEeUZbiIT1UZsNSSauvv036EidUUXIGcEyst61r6GYzcY3V2qrgSHIswjQ-VwKP3h-jlC1ybVp4_HWXJGJaAW4s2GxYgqBtpT0/s1280/no-thumbnail.jpg' itemprop='url'/>
<meta content='1280' itemprop='width'/>
<meta content='720' itemprop='height'/>
</div>
</b:if>
2. Untuk thumbnail 1200x900 untuk rasio 4:3.
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='resizeImage(data:post.firstImageUrl,1200,"4:3")' itemprop='url'/>
<meta content='1200' itemprop='width'/>
<meta content='900' itemprop='height'/>
</div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajSa2xXUXVYd0zmQc6sedVVnOgY7pOJ-HAGXR6uIgDFMqgNZ7QNnUPvAllRmmt3Yhm1ivGIiyRps4Yt1-hDSTUyNHt-RYgXpyy4Fl3wFFLLyQ6cxrEH-3jAqEyAl-HKa6DHJBmsOK3Xo/s1200/no-thumbnail_1.jpg' itemprop='url'/>
<meta content='1200' itemprop='width'/>
<meta content='900' itemprop='height'/>
</div>
</b:if>
3. Untuk thumbnail persegi 1200x1200 untuk rasio 1:1.
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='resizeImage(data:post.firstImageUrl,1200,"1:1")' itemprop='url'/>
<meta content='1200' itemprop='width'/>
<meta content='1200' itemprop='height'/>
</div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhBK1d94gwFE4DxiZBKZ2AqAa8Sihf5xdxtDTqw5fJXF0ySEiIdwzB3ntVSB7ltx9RFoY4d-wro8tPPCC5CJoF3FU9FAlPUkdgRQKUUCY2f1TLgFtZgsTMRn5qpjgDl5h3S17yLNMWTE/s1600/no-thumbnail_2.jpg' itemprop='url'/>
<meta content='1200' itemprop='width'/>
<meta content='1200' itemprop='height'/>
</div>
</b:if>
Kemudian silahkan Anda coba kembali validasi warning di search console, semoga bermanfaat….