MASFENDI
  • #NUSAPEDIA
  • Education
    • Teknik
    • Sejarah
  • Internet
    • Adsense
    • Blogger
    • WordPress
  • Finance
  • Game
No Result
View All Result
MASFENDI
  • #NUSAPEDIA
  • Education
    • Teknik
    • Sejarah
  • Internet
    • Adsense
    • Blogger
    • WordPress
  • Finance
  • Game
No Result
View All Result
MASFENDI
No Result
View All Result

Cara Mengatasi Warning Image Size Smaller Than Recommended Size di Webmaster

Fendi by Fendi
Januari 18, 2019
in Blogger
0
Share on FacebookShare on Twitter

Akhir-akhir ini sering muncul notifikasi dari Google Webmaster atau Google Search Console untuk blog-blog AMP dengan warning ukuran gambar lebih kecil dari ukuran yang direkomendasikan atau image size smaller than recommended size.

Warning image size smaller than recommended size.

Hal ini bukanlah AMP error, halaman AMP masih terindeks dan masih tampil di hasil pencarian google. Namun akan ditandai sebagai halaman yang kurang sempurna, karena berisi gambar yang lebarnya krang dari 1200 piksel.

Daftar isi show
1 Aturan Penting Gambar AMP
1.1 Untuk thumbnail 1280×720 untuk rasio 16:9
1.2 Untuk thumbnail 1200×900 untuk rasio 4:3
1.3 Untuk thumbnail persegi 1200×1200 untuk rasio 1:1

Aturan Penting Gambar AMP

  • Hanya gambar yang ditandai yang langsung menjadi milik artikel yang harus ditentukan.
  • Lebar gambar setidaknya 1.200 piksel.
  • Setiap halaman harus mengandung setidaknya satu gambar (apakah Anda menyertakan markup atau tidak). Google akan memilih gambar terbaik untuk ditampilkan dalam hasil pencarian berdasarkan rasio aspek dan resolusi.
  • Gambar harus mewakili konten yang ditandai.
  • Gambar harus dalam format .jpg, .png, atau .gif.

cara untuk memperbaikinya, kita harus menggunakan gambar yang lebih besar sesuai dengan pedoman Google.

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.

Jadi untuk mengatasi masalah ini, pertama kita harus membuat gambar untuk thumbnail setiap post (gambar dengan tag noscript) dengan rasio yang saya sebutkan tadi di atas, misal 1280×720 untuk rasio 16:9 atau 1200×900 untuk rasio 4:3 atau gambar persegi 1:1 yaitu 1200×1200.

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,"1:1")' 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>

Selanjutnya silakan ganti dengan kode berikut:

Untuk thumbnail 1280×720 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,"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>

Untuk thumbnail 1200×900 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,"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>

Untuk thumbnail persegi 1200×1200 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,"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>

Sekarang tinggal validasi warning di Google Search Console milik kalian. Semoga berhasil.

Related Posts

Blogger

Review Kerjasama Blogpartner.id Dapat Voucher Belanja Blibli.com

Agustus 9, 2019
Blogger

WordPress Hosting Gratis Selamanya Terbaru 2019

Juli 6, 2019
Blogger

Download Template Blog Mirip IDNTheme

Juni 23, 2019
Blogger

Cara Membuat Iklan Parallax Adsense di WordPress Dengan Mudah

Juni 22, 2019
Next Post

Cara Membuat SIM Baru 2019

Daftar Web Hosting Lokal Murah 2019

ADVERTISEMENT
  • Livery Bus Simulator

    Download Livery BUSSID Liga 1

    1 shares
    Share 0 Tweet 0
  • Cara Pembuatan Rangka Cetakan Pasir Pada Pengecoran Logam

    0 shares
    Share 0 Tweet 0
  • Perbedaan Baterai Laptop Original, KW, dan OEM

    0 shares
    Share 0 Tweet 0
  • Cara Pembuatan Pola Pengecoran Logam dengan Cetakan Pasir

    0 shares
    Share 0 Tweet 0
  • Download Skin atau Livery Bus Simulator Terbaru 2019

    0 shares
    Share 0 Tweet 0

Newsletter

  • About
  • Disclaimer
  • Kontak
  • Parse HTML
  • Kerjasama
  • Privacy
DMCA.com Protection Status

© 2021 MASFENDI dibuat dengan ❤️ dan ☕ di Boyolali.

No Result
View All Result
  • #NUSAPEDIA
  • Education
    • Teknik
    • Sejarah
  • Internet
    • Adsense
    • Blogger
    • WordPress
  • Finance
  • Game

© 2021 MASFENDI dibuat dengan ❤️ dan ☕ di Boyolali.

Sesi telah kadaluarsa

Silakan masuk log lagi. Laman login akan dibuka di jendela baru. Setelah berhasil login, Anda dapat menutupnya dan kembali ke laman ini.

>