Cara Setting Gambar Postingan Blog Agar Valid AMP

Setting Gambar Postingan Pada Blog AMP - Pada umumnya saat kita membuat sebuah artikel blog penambahan gambar sudah menjadi hal yang semi wajib karena untuk menunjang sebuah artikel agar terlihat lebih menarik dan memudahkan visitor menangkap isi artikel.

Jika kita menggunakan template blog non AMP, mengupload gambar adalah hal yang sangat mudah karena kita hanya perlu mengupload gambar lalu pilih ukuran gambar yang akan ditampilkan. Namun beda halnya dengan blog yang menggunakan template AMP, memang sih jika kita menggunakan cara yang sama pada blog non AMP, gambar akan muncul seperti biasa, namun hasilnya blog tidak akan valid AMP.
Cara Setting Gambar Postingan Blog Agar Valid AMP

Untuk cara setting gambar pada blog amp agar valid sebenarnya cukup mudah, karena hanya menambahkan tag amp-img pada sebuah gambar, yang jadi masalah adalah karena banyak blogger yang tidak terlalu memahami AMP jadi cara ini terlihat sulit, kalau masalah repot itu sudah pasti :D karena memang resiko memakai template AMP ya seperti itu, beda halnya dengan pengguna WP yang tinggal pasang plugin AMP yang sudah banyak tersedia.

Baca Juga : Cara Membuat Halaman Sitemap (daftar isi blog) Valid AMP

Untuk caranya simak penjelasan masagung.id yang pemula ini, jika ada cara yang kurang efisien mohon dimaklumi karena saya pemula :v, cara nya terbagi menjadi dua yaitu setting gambar thumbnail untuk home page dan setting gambar di dalam postingan agar valid AMP.

Cara awalnya sama seperti pada blog non amp, kita mengupload gambarnya terlebih dahulu untuk mendapatkan urlnya, atau jika mau nyomot gambar dari luar ya silahkan saja.

Setting Thumbnail Blog Agar Valid AMP


Untuk memasang thumbnail agar muncul di homepage blog AMP maka format penulisannya seperti ini.

<noscript> <img alt=" ATRIBUT ALT GAMBAR " src=" URL GAMBAR " title=" Judul Gambar "/> </noscript>

Letakan html di atas sebelum paragraf pertama artikel, untuk meletakannya pilih mode HTML pada saat kita menulis artikel di blog.

Contoh Gambar :


Setting Gambar Postingan Blog Agar Valid AMP


Untuk cara setting gambar dalam postingan agar blog valid AMP, formatnya seperti ini.

Sebelum itu tambahkan css dibawah ini agar memudahkan kita saat penggunaan class "center" taro diatas </style> atau </b:skin>

.center{text-align:center;margin-top:5px}


Selanjutnya Format Gambar Untuk Blog AMP

<div class="center">
<amp-img
width=" Lebar Gambar "
Height=" Tinggi Gambar "
src=" URL Gambar " >
</amp-img>
</div>

< div class="center">
<amp-img
width="320" height="200"
src=" ">
</amp-img>
</div>

<div class="center">
<amp-img
widht="400"
height="320"
src=" " >
</amp-img>
</div>

Contoh Gambar


Jika ukuran gambar kalian besar contohnya seperti gambar diatas.

Maka langkah selanjutnya tambahkan tag layout="responsive" pada saat setting gambar agar ukuran gambar tidak terpotong saat di buka menggunakan smartphone.

Contoh jika gambar ingin lebar saat di buka menggunakan pc namun tidak terpotong saat di buka menggunakan hp.

<div class="center">
<amp-img
width="600"
height="400"
layout="responsive"
src=" " >
</amp-img>
</div>

Contoh Masagung.id saat setting gambar

<div class="center">
<amp-img data-original-height="1080" data-original-width="1080" height="320" img="" src="https://3.bp.blogspot.com/-KCqT9tVhIE0/W5N6i8afEOI/AAAAAAAAH5o/JhMUxl-TZp8FMU0kPqQ_r5oFJkiB4FG8ACLcBGAs/s320/Setting%2BGambar%2BBlog%2BAgarValid%2BAMP.png" width="320"></amp-img></div>

Kenapa admin menggunakan cara seperti itu ? biar tau ukuran gambar asli dan admin menyamakan gambar saat di buka menggunakan pc maupun hp yaitu dengan lebar 320, kalian bebas mau seperti apa settingannya.

Jangan lupa hapus tulisan separator sampai border="0" saat setting gambar.

Kira2 hapus yang ini.

"separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-cTe59JmCAwk/W5OAoGgDMSI/AAAAAAAAH6I/hGXoIFLaPcsXGNEix72LiKlRy-HUQUOWQCLcBGAs/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0"

Nah begitulah admin saat setting gambar pada artikel blog agar tetap valid amp, perihal atribute alt atau title pada gambar masagung tidak menggunakannya, entah seo atau tidak admin kurang tau.

Baca : Tutorial Memasang Widget Popular Post Valid AMP

Demikian informasi tentang bagaimana cara setting gambar artikel blog agar tetap valid AMP.

0 Response to "Cara Setting Gambar Postingan Blog Agar Valid AMP "

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel