Cara dan Solusi Mengatasi Ukuran Gambar Lebih Kecil dari yang Direkomendasikan

Cara dan Solusi Mengatasi Ukuran Gambar Lebih Kecil dari yang Direkomendasikan ~ Bagi sobat pengguna template amp tentunya ada beberapa kendala dan juga hal menantang untuk selalau dipelajari, diantaranya adalah adanya pesan "Ukuran Gambar Lebih Kecil dari yang Direkomendasikan".

Berikut sebagai arsip admin ketika menemukan kembali pesan tersebut : 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.

Solusi

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.

Edit HTML

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,&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/AVvXsEiuN_747twDfoT8JD6Zx7E2iayllEM2gIkh7eDUx3EHIK0oKw6Mv3p61i75voKo32dXum0uR6SN3wLEzmpAiR7CxWu71IytqyxPHvt_pguRvbX3A639AqEfWaGdg3BCCMxk04XdlSe5tWU/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/AVvXsEhT00qmNMfY5noSvi2spELPpwM4OYPjLsi550FT_FjblMHY89Y4lqVdosngXhj8T4c26TNS-SyS-jn1SNWH1wkVtj1TJshNcMra66GVI9mV23h517bUbO_bz_KXgOIwEgEEqdG5GMJk_AU/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/AVvXsEiPa872TmQcqdQ1iTJvxnnv1A1so8t80_SdcxaI3GsRsesgOZr9XuEoStLiti_-ee0F72SmDc7zYnpnhxJ-Ba5gaqhpjgq-csaaCkGr7c789hYIcjALmdslp-g9bs24ze6qsZ5KHNEQnJA/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/AVvXsEi1Osd0yrL-RGS7bwAS3Gr6DeUiQoSWFE46FqlLEFAahZDkGTPXJ5pxxR4gcMUYglJFGtTdHn8EF_S5hZQVJL-WSpdcgdrcOiAr3SADEOmuL07W1ce2WAeEtETKUKZV5z9x7MqP2FkuOIA/s1600/no-thumbnail_2.jpg' itemprop='url'/>

  <meta content='1200' itemprop='width'/>

  <meta content='1200' itemprop='height'/>

  </div>

    </b:if>

 .