Skip to main content

follow us


www.azid.web.id - Cara Mengatasi Ukuran Gambar Lebih Kecil Dari Ketentuan Yang Direkomendasikan Pada Blog AMP. Yang Terbukti Berhasil Ternyata google telah memberikan kebijakan baru untuk blog AMP dimana google telah merekomendasikan pada blog AMP agar memiliki gambar dengan ukuran minimal adalah 1200px, dan gambar harus bereksitensi png, jpg, atau gif. Sehingga jika gambar pada blog sobat terdapat gambar yang berukuran kurang dari ketentuan yang disebutkan maka akan terkena warning "ukuran gambar lebih kecil dari ketentuan yang direkomendasikan" atau dalam bahasa Inggrisnya kurang lebih seperti ini "image size smaller than recommended size".

Untuk sobat yang mengalami hal tersebut, ada dua tahap penting yang harus sobat lakukan. Pertama sobat harus mengganti script gambar thumbnail sobat pada edit HTML dan yang kedua sobat harus mengganti gambar pada postingan yang terkana warning ukuran gambar lebih kecil dari kententuan.

Apakah jika mengubah script gambar thumbnail bisa mengatasi masalah tersebut?. Jabawannya adalah ya dan tidak. Dimana ya, bila sobat mengubah gambar thumbnail dan memposting artikel baru, maka secara otomatis gambar tidak akan terindeks oleh google webmasters sebagai gambar terlalu kecil dan jawaban tidak adalah gambar thumbnail yang sobat terindikasi peringatan gambar terlalu kecil tidak akan dapat tervalidasi oleh google webmasters sebelum sobat mengubah gambar pada postingan yang terindikasi tersebut.

Mengapa saya bilang demikian?, pernyataan saya ini tidak lain adalah karena pengalaman saya pribadi. Saya juga pernah mengalami warning tersebut, dan akhirnya searching di google. Sudah banyak tutorial mengenai hal tersebut akhirnya saya mempraktekkannya akan tetapi masalah tersebut tidak kunjung terselesaikan. Apa kendala dari tutorial yang ada selama ini? ternyata penyelesaian tersebut kurang lengkap, yaitu tidak ada pemberitahuan bahwa gambar yang terindikasi harus di ganti dengan gambar baru yang ukurannya lebih besar dari atau sama dengan 1200px.

Oleh karena itulah saya disini akan share ulang, bagaimana cara mengatasi warning image size smaller than recommended size. Baik, untuk mengatasi hal tersebut, sebagaimana pada tutorial lainnya sobat haru mengubah thumbnail gamar yang biasanya terletak dibawah kode <article .....> atau dibawah kode  <b:includable id='post' var='post'>

Gantilah script thumbnailnya dengan copas script dibawah ini untuk ukuran 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>


atau dibawah ini untuk ukuran 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>


dan atau dibawah ini untuk ukuran 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 dirubah dan save template sobat.

Sebelum memvalidasi template sobat di google webmasters tools, sebagaimana yang saya jelaskan diawal bahwa sobat juga harus mengganti gambar yang terindikasi warning tersebut. Jika sudah, sobat baru bisa memvalidasi-nya ke google webmasters tools dengan meklik pada menu AMP - select menu "valid dengan peringatan" cari yang menjadi kedalanya dan validasi.

Demikianlah tutorial saya tentang Cara Mengatasi Ukuran Gambar Lebih Kecil Dari Ketentuan Yang Direkomendasikan Pada Blog AMP Yang Terbukti Berhasil. Semoga Bermanfaat. Amin.

UPDATE:

Dari hasil eksperimen ternyata dengan kode diatas tidaklah cukup, akan tetapi sobat juga harus mengubah setiap image thumbnail dengan ukuran yang direkomendasikan seperti 1280px banding 720px (16:9) karena pada blog ini waktu ganti template cuma mengganti kode di diatas saja masih mengalami ukuran gambar yang tidak direkomendasikan oleh google dan setelah semua thumbnail diganti dengan ukuran 1280x720 masalah dapat teratasi. Hal tersebut juga pernah saya terapkan pada template sebelumnya.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar