Tuesday, January 15, 2019

Penjelasan Error AMP 'Image size smaller than recommended size'

    Cara Mengatasi Error AMP 'Ukuran gambar lebih kecil dari ukuran yang Direkomendasikan' 

    Kemarin, tanggal 15 Januari 2019, saya mendapatkan email pemberitahuan dari Google Search Console. Dalam email tersebut, Google mengirimkan laporan terkait masalah terbaru error pada halaman AMP Blog saya. 

    Yang parahnya, satu error tersebut menyebabkan hampir separuh artikel blog saya terpengaruhi oleh error AMP terbaru tersebut. Ada sekitar 72 artikel yang mendapatkan masalah tersebut. 

    Error tersebut terjadi karena gambar yang saya upload merupakan gambar yang tidak sesuai dengan pedoman gambar Google AMP. Ya, gambar yang saya upload pada artikel terlalu kecil dari ukuran minimal.

    Dalam dashboard laporan AMP di Google Search Console, ada sekitar 72 artikel yang mengalami error Image size smaller than recommended size yang disebabkan gambar yang terlalu kecil, dengan ukuran kurang dari 1200 pixel yang notabene ukuran minimal yang direkomendasikan oleh Struktur data AMP.

    Tapi nampaknya kita tidak perlu terlalu khawatir, karena berdasarkan yang dijelaskan oleh Search Console bahwa error tersebut tidak menjadikan halaman AMP kita tidak valid. 

    Artinya, halaman web tetap valid AMP dan tetap bisa di crawl oleh Google dengan baik. Namun tetap harus dilakukan perbaikan jika perlu. 

    Efek Error AMP Tersebut

    Menurut halaman support Google, Error Image size smaller than recommended size ini bisa menyebabkan halaman blog anda muncul dengan semua fitur AMP Google. 

    Dan kemungkinan tidak akan muncul pada Kartu Discover AMP ataupun Google AMP Carousel. Menurut Google juga bisa menyebabkan penurunan trafik pada web anda.

    Sumber: https://support.google.com/webmasters/answer/7478053

    Mengatasi Error AMP Image size smaller than recommended size 

    Untuk mengatasi error ini, mau tidak mau anda harus mengupload ulang gambar yang menyebabkan error tersebut, dengan ukuran yang lebih besar dan sesuai dengan pedoman struktur data Google AMP. 

    Saya akan menjelaskan gambar yang sesuai dengan pedoman Google AMP.
    • Lebar gambar setidaknya 1200 pixel
    • URL ke gambar yang mewakili artikel atau cerita AMP dan setiap halaman harus berisi setidaknya satu gambar
    • Gambar harus dalam format .jpg, .png, atau .gif.
    • Untuk mendapatkan hasil terbaik, berikan beberapa gambar beresolusi tinggi (minimal 800.000 piksel, hasil perkalian lebar dan tinggi) dengan rasio tinggi lebar berikut: 16x9, 4x3, dan 1x1

    Mengatasi Error ini pada Artikel Blogger AMP

    Untuk saat ini, cara terbaik adalah dengan mengupload ulang gambar pada artikel. Namun karena seperti yang kita tahu rumitnya membuat artikel blogger valid AMP maka rasanya sedikit malas jika ingin mengupload ulang gambar. 

    Saya akan mengupdate artikel ini jika memang ada cara terbaik untuk mengatasi masalah Error AMp terbaru ini.

    Update!

    Cara ini mungkin bisa diterapkan untuk mengatasai error warning Image size smaller than recommended size di Search Console. Cara ini saya dapatkan dari blog Kompi Ajaib. dan Hasilnya ternyata berhasil divalidasi oleh Searc Console

    Masuk ke edit HTML Template, kemudian cari kode <b:includable id='post' var='post'>

    Cari kode di bawah ini
    
    <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://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>

    Kemudian ganti dengan kode di bawah ini:

    
    <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://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>

    Setelah selesai, klik SAVE. Jangan lupa untuk validasi perbaikan di Search Console.

    Sekian artikel tentang Penjelasan Error AMP 'Image size smaller than recommended size', semoga bermanfaat 

    Disqus Comments