Mengatasi ukuran Gambar lebih Kecil dari ukuran yang direkomendasikan

BLOGS GOBLOG | Cara Mengatasi Peringatan Ukuran Gambar Lebih Kecil dari Ukuran Gambar 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 dibahasa Inggriskan "image size smaller than recommended size".

Warning ini ialah tentang data terstruktur dalam AMP yang mengacu pada gambar yang lebih kecil dari ukuran yang disarankan. 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).

Namun yang menjadi permasalahan lagi disini, ketika kalian cek di search console, 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 1280x720 untuk rasio 16:9, atau 1200x900 untuk rasio 4:3, atau gambar persegi 1:1 untuk rasio 1200x1200.

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,&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/AVvXsEjZDTt3Wve6zL6DCtkqhTaMBXej4rg4kze9so6bBCW_j3pRmR12EP66AMnWoRAtJnKWIui4E5okobNImnwX0whyphenhyphenHZCt15bTxWI0nhK4Fht7AOA2CFSE-7RuZuYYbrPzyxhkoagpafURnMM/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 1280x720 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,&quot;16:9&quot;)' 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/AVvXsEgA-uA8mZJN9qyhPaa3mmIv4wScc8lmf1bJzQDyhpCAvTTzOcxPZPahwHRDu2oeqf1dYRbJRpNzg6LDKUE5E7Bxr1KG_M465Q9K_7S3Gs_XWjQt5bx8S08ihNQjhCFXNsGcKWOybpWIAPY/s1280/no-thumbnail.jpg' itemprop='url'/>
<meta content='1280' itemprop='width'/>
<meta content='720' itemprop='height'/>
</div>
</b:if>

2. Untuk thumbnail 1200x900 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,&quot;4:3&quot;)' 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/AVvXsEgPz80aVoQBaub01bfcNZyoVdy6hyphenhyphen5s9V6X3iTIWk8ZnG9NCR00nqCdhloC8QW0Boy3nbtuTjpad58huMSYPmEb443QwDCh-Q4lr0KHjYF6_iCTA66YBBPrtvJF_bQWo_jvgidgU-SzDk4/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,&quot;1:1&quot;)' 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/AVvXsEgeoew1qyjB4Wc3WFEd1t5j2Nq-oULDVq3J-a7vcOH4Ue-DB-EhmS17WYKmRSQEFzN4GfYcd2azbe_m4n1cWJvQjULZhuBdTMINBqvx2Rank3w61Gl_eAH5O-LrMGrDkUY4zvHNRAxZN-o/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 Peringatan Ukuran Gambar Lebih Kecil dari Ukuran Gambar yang direkomendasikan di Webmaster Tools. Semoga bermanfaat.