Cara Menambahkan Gambar di Postingan Pada Blog AMP - Menambahkan gambar pada sebuah postingan artikel bisa membuat daya tarik tersendiri di artikel tersebut. Bukan itu saja, karena keberadaan gambar mampu mendukung isi dari tujuan penulisan artikel itu sendiri. Terlebih jika artikel tersebut merupakan sebuah artikel tutorial sehingga untuk menjelaskan lebih detil bisa menggunakan bantuan gambar.
Permasalahannya adalah jika kamu menggunakan template valid AMP maka dalam penambahan gambar jika dilakukan sebagaimana halnya pada blog non AMP akan dapat menimbulkan error AMP. Hal ini dikarenakan pada blog valid AMP tidak mengenal adanya tag html img. Nah pakah kamu pernah menemui permasalahn yang seperti ini? Lalu bagaimana caranya agar dalam menambahkan gambar di artikel ini blog akan tetap valid AMP?
Pentingkah gambar pada suatu artikel?
Sebuah gambar pada suatu artikel selain bisa mempercantik artikel itu sendiri juga dapat mencegah rasa bosan pengunjung saat membaca artikel tersebut, apalagi jika artikel tersebut mempunyai jumlah kata yang banyak sekali. Jadi sebaiknya menyisipkan gambar minimal satu dalam setiap artikel ya bro. Oiya silahkan baca juga cara membuat daftar isi/sitemap valid AMP.
Gambar juga dapat mendukung SEO dari artikel dan juga blog dan gambar juga bisa dioptimasi untuk mesin pencari yaitu dengan cara menambahkan atribut "title" dan "Alt" sehingga akan muncul pada pencarian search engine. Sangat menyenangkan rasanya jika mempunyai blog yang memiliki nilai SEO bagus dan bonus besarnya adalah akan berpeluang besar untuk muncul pada halaman pertama pencarian. Jangan lewatkan cara pasang script anti copas di blog valid AMP.
Cara Menambahkan Gambar di Postingan Pada Blog AMP
Kembali ke topik bagaimana cara menambahkan gambar di artikel namun tetap valid AMP, dan di sini akan segera kita temukan solusi cara mengatasinya bro. Karena pada dasarnya menambahkan gambar di artikel itu sangatlah mudah dan platform Blogger juga kini sudah membuatnya semakin mudah, kamu juga pasti bisa kan ya.
Nah agar apa yang kita lakukan ini (mengunggah gambar) tidak menjadikan error atau invalid AMP, maka setelah menambahkan gambar dapat memodifikasi kode html gambar dengan langkah di bawah ini :
- Mari kita lihat, pada saat kita upload gambar di blogger maka akan kita dapati kode html standar adalah seperti dibawah ini :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zclPAghExiba8PZfU2aNTyK-fgFzKdQuiaxpOIL9ob3-HnNzLeCXF31-bl2lLY8aCd9OLxKUmDjzEb90-aG0afX4vyEKpXdnOJ99DKa8uxTQNySmz1Lhq24GBGWxqRNMbQ-k_iy5nd5y/s1600/kontak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="250" data-original-width="400" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGuyskea7fI_7pp7HENCi8Tx5YmLpGblzUL6Y8q7D2Spe_vBPy7ViUkrmAJ3FckIHglY3UKz4APcgsGC2keWrxt1-JiMWHGzyluFPlNu9NfNS4Ub9kh18KgJ6Ugo2CCZsZiVCJArV1r94/s500/gambar+valid+amp.jpg" width="320" />
</a></div>
Nah jika artikel yang kita buat tersebut di publish atau diterbitkan maka akan terjadi error atau invalid AMP, karena terdapat gambar yang tidak sesuai dengan ketentuan AMP.
Bagaimana cara mengatasinya?
Solusinya agar artikel yang kita publish tersebut valid AMP adalah dengan merubah kode html pada gambar tersebut menjadi seperti di bawah ini :
<div class="img-center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA8ZljCiBxv7zLUr92nF0MwMRPlUvSB7mYlo55yWR9GxrHnKLTEVU2q6zcCsa4Z908_-3KLIlDkj4jk0riec1Xa7dp_I-wKkoJhpLFk-9gyLC-9KjdmeVYsUZUkcOGO5GrBBh5mX3g8iSA/s1600/kontak.png">
<amp-img alt="gambar amp" data-original-height="768" data-original-width="1366" height="222"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGuyskea7fI_7pp7HENCi8Tx5YmLpGblzUL6Y8q7D2Spe_vBPy7ViUkrmAJ3FckIHglY3UKz4APcgsGC2keWrxt1-JiMWHGzyluFPlNu9NfNS4Ub9kh18KgJ6Ugo2CCZsZiVCJArV1r94/s500/gambar+valid+amp.jpg" title="gambar amp" width="400">
</amp-img></a></div>
Atau agar lebih sederhana bisa kita buat seperti rumusan dalam mengunggah gambar di artikel blogger sebagai berikut :
<div class="img-center">
<a href="url">
<amp-img alt="deskripsi" data-original-height="768" data-original-width="1366" height="222" src="url" title="deskripsi" width="400">
</amp-img></a></div>
Nah dengan demikian penanganan pada gambar selesai dan artikel yang diterbitkan bisa valid AMP. Namun jika ternyata thumbnail artikel tidak muncul, kamu bisa menambahkan kode berikut ini :
<noscript><img alt='gambar' src='url'/></noscript>Dan selengkapnya adalah sebagai berikut :
<div class="img-center">
<a href="url">
<amp-img alt="gambar" data-original-height="768" data-original-width="1366"
height="222" src="url" title="gambar" width="400">
</amp-img></a></div>
<noscript><img alt='gambar' src='url'/></noscript>
Kode di atas bisa kamu simpan di post template di bagian pengaturan dashboard. Tujuannya adalah untuk memudahkan kamu di setiap membuat artikel baru di blog. Kamu juga bisa membuat widget popular post valid AMP.
Mengatasi "Image Size Smaller Than Recommended Size"
Jika kamu menemukan kesalahan atau error di Google Console dengan keterangan Image Size Smaller Than Recommended Size, kamu bisa mengatasinya dengan cara berikut ini :
- Pada tema Blogger, carilah kode :
<b:includable id='post' var='post'>- Kemudian lihatlah kode yang terdapat dibawahnya atau yang seperti di bawah ini, atau yang mengkin mirip-mirip lah. (Karena juga tergantung dari master pembuat templatenya juga).
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYPNta0v7-8HmdDnA39zbJQrtuiMnafH6W3YAQ1nKszFB6wkk8IVMxY1qJL0abuy6HmrBpNxR65Zoo_VlYCYtf869U_KmaYuuuT6oCKnpHrn8xYVHd0YJyZcKV2qm7lgKcSed5WgzvXzI/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,"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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkU82yTSudKjs_cun38-9iCHCWYwlwg5FwM33hZStlKP0qVim8zsVaA1a5SpBOvCPCkxSDVZQ_pc4YdsjA0v3hyphenhyphenwohIpXL2mehtGfc1o_HJBYp7eCVgu88vnvnn-M92wlLyH1MEHmdzY/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,"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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfQHMqYRYFl_E9W3A847hlfikr-tM2L1aCiSiWI1hQbgas7gcMdR3kpEu3fRTAPgwfXFargDFzKz2MBs500JzDWWUkgTsvZASW33Zi7svverH09p-AXPIfvu1p-4Vf1kUfAwOKlzztn0/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,"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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2C2JCClDjs4Mq5S811LNw1KFE1b8-L5okUFZbi5yZ1djjWjxewBG3kD-jFY5gFcpmWggV8Qf5phixNX1P7prjuldqbhvfmDwH1yzwORLVGb4J2BYaWCS7b3_mlsIav7xHuWpr_lkhZWw/s1600/no-thumbnail_2.jpg' itemprop='url'/>
<meta content='1200' itemprop='width'/>
<meta content='1200' itemprop='height'/>
</div>
</b:if>Biasanya sih dengan ukuran gambar minimal 500x500 px sudah bisa teratasi. Nah demikianlah uraian singkat cara menambahkan gambar di artikel blog AMP agar postingan yang diterbitkan bisa valid AMP. Semoga bermanfaat.