Mengatasi Warning Image Size Smaller Than Recommended Size

Mengatasi Warning Image Size Smaller Than Recommended Size - Kemarin Saya mendapat pesan email dari Google Search Console, pesan tersebut adalah pesan Warning untuk blog Saya yang menggunakan gambar thumbnail dengan ukuran gambar lebih kecil dari ukuran yang direkomendasikan.

Mungkin Anda juga mendapat pesan seprti itu, kususnya untuk blog AMP. Akhirnya Saya mencari solusi untuk mengatasi masalah tersebut, dan ternyata sudah di bahas oleh Mas Adhy Suryadi, admin dari blog KompiAjaib.

Dan akhirnya Saya mencoba solusi dari kompi ajaib ini sekalian membagikan di blog ini juga. Bagi Anda yang sedang mencari solusi untuk Mengatasi Warning Image Size Smaller Than Recommended Size atau ukuran gambar lebih kecil dari ukuran yang direkomendasikan, silahkan simak caranya dibawah ini.

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.

Nah, jadi untuk mengatasi masalah ini, pertama kita harus membuat gambar untuk thumbnail setiap post (gambar dengan tag noscript) dengan rasio yang sudah saya sebutkan di atas, misalnya 1280x720 untuk rasio 16:9 atau 1200x900 untuk rasio 4:3 atau gambar persegi 1:1 yaitu 1200x1200.

Kemudian langkah kedua silahkan masuk ke Tema, terus edit HTML lalu cari kode <b:includable id='post' var='post'>

Di bawah kode tadi kita cari kode berikut, atau kode yang mirip seperti kode berikut (karena kode setiap template berbeda-beda).

<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/AVvXsEhKUBivEuObB7lre-nMXA0Lm_Yw6s7isLDGfGJTtvzjIXDeGcsExQD7iG5Rt1aorolf9OZ4oPAF1nBGWmANoiaFu9MKVbriRlKY8opHXIos00gezdoWUBv7YW-GGW2Nx-DBpPu3bDKH2bE/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:

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,&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/AVvXsEhUzWEjHv6dAH1zeOONYbxsbQtHTAHbNbyWbD_IuhdnbrTTrUL2Q7Qcy66Po_Jfa7EyUAkarFeri0BnBYY_aBp07n_b0XAZiZEaDSQwjwb2KrQH-8gZrI-E-UC8__lWyIf-v7nu5bfwJhk/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,&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/AVvXsEgH0H7Je6wl-WwaqtDBl9SsmIcWRCJKynPF4bVGrN8FaIpBhYUxLKgvt-iM1AgVdNklySvYW8_vEpPmaVsQuHoV75uACA5NCMwEnLufrcmrIsyToz8NHJz2icD-m8Y3vjK8YBWamTpHFsw/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' itemproph='height'/>
  </div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-itgKRosutD-N-RGSnkOoGZ7vVn0_9NL3uAkZJH671Tc49in8GpNpym2wN7q3vy6y_DnjpTqFMMMP3xa3zQjJqsOkaaXJTHfDUxWDej14MU7Kh8ytI2g089lZGBb2f8bfrJnXaOzFfKc/s1600/no-thumbnail_2.jpg' itemprop='url'/>
  <meta content='1200' itemprop='width'/>
  <meta content='1200' itemprop='height'/>
  </div>
    </b:if>

Simpan tema

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