Cara Memperbaiki Image Size Smaller Than Recommended Size

Ditulis oleh: Dibrata Nazar Yuda

Ditulis pada: Thursday, January 17, 2019

Image Size Smaller Than Recommended Size. Pada tanggal 15 Januari 2019, saya mendapatkan notifikasi dari Google Webmaster atau Search Console melalui email yang memberitahukan bahwa template blog AMP saya terdapat warning atau peringatan seperti "Warnings are suggestions for improvement. The following warnings were found on your site: Image size smaller than recommended size".

Tadinya sempat bingung, karena tidak tahu cara memperbaikinya dan gambar mana yang harus diperbaiki karena email notifikasinya pun tidak memberitahukan secara jelas. Akhirnya hari ini tanggal 17 Januari 2019 dapat kabar gembira mengenai cara memperbaiki permasalahan tersebut.

Image Size Smaller Than Recommended Size atau dalam bahasa Indonesianya yaitu "Ukuran gambar lebih kecil dari ukuran yang disarankan" yang berarti bahwa ukuran gambar yang disarankan sudah tidak sesuai dengan syarat penggunaan AMP (blog AMP) yang kedepannya kemungkinan dapat menyebabkan penurunan lalu lintas situs web dan keterlibatan pengguna.

Iseng - iseng buka blognya mas Adhy Suryadi (kompiajaib.com) ternyata beliau pun mengalami hal yang sama, dan belau juga memberikan tips untuk mengatasi masalah tersebut.

Berikut ini adalah langkah - langkah dalam penanganan masalah Image Size Smaller Than Recommended Size:

1. masuk ke menu edit HTML blog, lalu cari kode <b:includable id='post' var='post'>, kemudian cari kode yang mirip dengan kode dibawah ini (tergantung templatenya),

<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://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>

2. Jika sudah menemukan kode tersebut, ganti dengan kode seperti dibawah ini :

A. 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,&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://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>

B. 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,&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://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>

C. 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://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>

3. Silahkan pilih salah satunya dari ketiga thumbnail tersebut,
4. Simpan hasil perubahan dan buka email notifikasi. kemudian tekan tombol Fix AMP Issues yang nantinya akan diarahkan ke Google Webmaster atau Search Console,
Klik gambar untuk memperbesar. Klik Esc dikeyboard untuk kembali, dan
5. Pilih validasi, dan tunggu perubahannya dalam beberapa hari kedepan.

Kurang lebih seperti itulah cara memperbaiki/mengatasi peringatan Image Size Smaller Than Recommended Size pada blog/template AMP agar dapat divalidasi. Semoga bermanfaat.

Sumber : https://www.kompiajaib.com/2019/01/mengatasi-warning-webmaster-image-size.html