Mengatasi ukuran Gambar lebih Kecil dari ukuran yang direkomendasikan

Mengatasi ukuran Gambar lebih Kecil dari ukuran yang direkomendasikan
Di Posting Oleh : Admin
Kategori : Blogger Images Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog | Berita Terkini dan Terbaru: Terbaru.co.id | Watch Or Download Latest Movie: Filmer Film

Warning ini merupakan mengenai data terstruktur dalam AMP yg mengacu dalam gambar yg lebih kecil berdasarkan berukuran yang disarankan. Hal ini bisa mencegah page muncul menggunakan semua fitur yang herbi AMP dalam Google Search, dan pula mampu mencegah kartu Discover blog timbul menggunakan gambar yg besar (hal tadi bisa menyebabkan penurunan lalu lintas dalam situs web

Namun yang menjadi permasalahan lagi disini, ketika kalian cek di search console, Google tidak memberikan keterangan tentang gambar yang mana yang menyebabkan error. Tentu hal ini membuat bingung, dan bagian mana yang harus kita perbaiki. Nah, untuk solusi memperbaikinya, kita harus menggunakan gambar yang lebih besar sesuai dengan Pedoman dari Google.

Cara Mengatasi Warning Webmaster Image Size Smaller Than Recommended Size

Untuk struktur data schema.org, pada tipe Article, NewsArticle, dan BlogPosting, untuk item ImageObject harus menggunakan gambar yang besar, setidaknya lebar gambar minimal 1200px dengan rasio 16:9, 4:3 atau 1:1.

Jadi, untuk mengatasi masalah tersebut, pertama yang kalian lakukan yaitu membuat gambar untuk thumbnail pada setiap post (yaitu gambar dengan tag noscript) dengan rasio yang telah disebutkan diatas, semisal 1280x720 untuk rasio 16:9, atau 1200x900 untuk rasio 4:3, atau gambar persegi 1:1 untuk rasio 1200x1200.

Kemudian langkah selanjutnya, silahkan masuk ke blogger > Template > edit HTML kemudian kalian cari kode <b:includable id='post' var='post'>

Di bagian bawah kode <b:includable id='post' var='post'> silahkan cari kode yang mirip seperti kode berikut (mungkin kode akan sedikit berbeda, tergantung si pembuat template AMP yang kalian gunakan).

			
				<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/AVvXsEiovRkqj36F8Uj9C3d5v5K9P-OqwgfGnesxQScRVDH4Tx8yi2FUHX2ri6aI8aBk_OhBeGD0NxdT8X30dsCqoKp5iRPspJs_6lkGlQI0gXrvBsRqJTfJ6Y7HdUBSUucAfsMg-j5pp4OREu8/s800-c/no-thumbnail.jpg' itemprop='url'/> <meta content='800' itemprop='width'/> <meta content='800' itemprop='height'/> </div> </b:if>

Kemudian silahkan ganti kode yang seperti diatas dengan kode dibawah ini:

1. Untuk thumbnail 1280x720 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/AVvXsEizdcKg7OmPWNTUUpCeNE0nfw5NkJHJXFvO_SYUoZjJdpMI5Xv3e4UmtQt6iftwTG3t3_11hQlsBxyjhYVkzH_OThAskY7EPPfp2NLO8FoGQRsYhgwh1cGA5HCZ4VbwIM3axed77g1XRco/s1280/no-thumbnail.jpg' itemprop='url'/> <meta content='1280' itemprop='width'/> <meta content='720' itemprop='height'/> </div> </b:if>

2. Untuk thumbnail 1200x900 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/AVvXsEiTEiGR4R3afgxFJuz2962hcdfDu-ThcUy8onMHGB5GUAXuCyk-GO90lDFXegkH__FG95nWLXQ9KUWP1nUME7QYseMCNigfKsXUqA6DUnjsmRTWq7pon0V4e17L6LyPrAsB1TsfbncJZHM/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/AVvXsEi5yzb-ghWMt60sa_bEUyB_X7jFdGcN6p-OfHnaEPCn6Z10Mk8raVLySM2rHS-yxSZbKKBk9X0kn5W3xSciNlsQVLMXN8_qAyELPO_IyfRw0l-c_qeJzhATDyFDLfuGJaWgxpsnSo4zX04/s1600/no-thumbnail_2.jpg' itemprop='url'/> <meta content='1200' itemprop='width'/> <meta content='1200' itemprop='height'/> </div> </b:if>

Jika sudah, klik simpan Template, setelah itu silahkan coba validasi warning di search console kembali.

Selesai. Mungkin hanya itu saja untuk artikel kali ini tentang Cara Mengatasi Peringatan Ukuran Gambar Lebih Kecil dari Ukuran Gambar yang direkomendasikan di Webmaster Tools. Semoga bermanfaat.