Cara mengatasi ukuran gambar lebih Kecil dari ukuran yang direkomendasikan di Webmaster Tools – Baru-baru ini muncul notifikasi peringatan dari Google Webmaster atau Search Console untuk blog berbasis AMP HTML dengan warning berwarna orange yakni ukuran gambar lebih kecil dari ukuran yang direkomendasikan atau jika dalam bahasa Inggris “image size smaller than recommended size“.
Warning ini ialah tentang data terstruktur dalam AMP yang mengacu pada gambar yang lebih kecil dari ukuran yang di sarankan. Hal 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 yang besar (hal tersebut bisa menyebabkan penurunan lalu lintas pada situs web dan keterlibatan pengguna).
Cara mengatasi ukuran gambar lebih Kecil dari ukuran yang direkomendasikan
Yang menjadi problem dalam kasus ini, ketika pada saat cek di search console, pihak Google tidak memberikan keterangan tentang gambar yang mana yang menyebabkan error. Tentu hal ini membuat bingung, dan bagian mana yang harus kita perbaiki.
Nah, untuk solusi memperbaikinya kita harus menggunakan gambar yang lebih besar sesuai dengan pedoman dari Google.
Cara Mengatasi Warning Webmaster Image Size Smaller Than Recommended Size
Untuk struktur data schema.org, pada tipe Article, NewsArticle, dan BlogPosting, untuk item ImageObject harus menggunakan gambar yang besar, setidaknya lebar gambar minimal 1200px dengan rasio 16:9, 4:3 atau 1:1.
Jadi, untuk mengatasi masalah tersebut, pertama yang kalian lakukan yaitu membuat gambar untuk thumbnail pada setiap post (yaitu gambar dengan tag noscript) dengan rasio yang telah disebutkan diatas, semisal 1280×720 untuk rasio 16:9, atau 1200×900 untuk rasio 4:3, atau gambar persegi 1:1 untuk rasio 1200×1200.
Kemudian langkah selanjutnya, silahkan masuk ke blogger > Template > edit HTML kemudian kalian cari kode <b:includable id=’post’ var=’post’>
Di bagian bawah kode <b:includable id=’post’ var=’post’> silahkan cari kode yang mirip seperti kode berikut (mungkin kode akan sedikit berbeda, tergantung si pembuat template AMP yang kalian gunakan).
<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://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>
Kemudian silahkan ganti kode yang seperti diatas dengan kode dibawah ini:
1. Untuk thumbnail 1280×720 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://4.bp.blogspot.com/-8kN5uucyxDI/XD6vAIw18dI/AAAAAAAA7kU/uTwzqq0EbvgGyzRaNuLpjzARZIKOWbVoACLcBGAs/s1280/no-thumbnail.jpg' itemprop='url'/>
<meta content='1280' itemprop='width'/>
<meta content='720' itemprop='height'/>
</div>
</b:if>
2. Untuk thumbnail 1200×900 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://3.bp.blogspot.com/-RKmGyzTczr0/XD6vAbGKcFI/AAAAAAAA7kY/aKrlofXLwv4b47hp7BSoLUUKeTcO5KKZgCLcBGAs/s1200/no-thumbnail_1.jpg' itemprop='url'/>
<meta content='1200' itemprop='width'/>
<meta content='900' itemprop='height'/>
</div>
</b:if>
3. Untuk thumbnail persegi 1200×1200 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://1.bp.blogspot.com/-1CcHwMhO4WQ/XD6u_wYLBNI/AAAAAAAA7kQ/hVzSCQm5XkI6p-YEI3RKgBhUa5YbgCbaQCLcBGAs/s1600/no-thumbnail_2.jpg' itemprop='url'/>
<meta content='1200' itemprop='width'/>
<meta content='1200' itemprop='height'/>
</div>
</b:if>
Jika sudah, klik simpan Template, setelah itu silahkan coba validasi warning di search console kembali.
Selesai. Mungkin hanya itu saja untuk artikel kali ini tentang Cara mengatasi ukuran gambar lebih Kecil dari ukuran yang direkomendasikan di Google Webmaster Tools. Semoga bermanfaat untuk teman-teman semuanya!.