Tutorial Pengaturan Template agar Valid AMP

Berikut tutorial untuk menggunakan template gratis AMP Blogger yang telah saya bagikan ini dan supaya tetap valid AMP 100%.

Silakan ikuti langkah-langkahnya dengan runtut dan teliti:

Gambar Utama AMP


Untuk membuat gambar thumbnail / utama di atas postingan, silakan tambah kode asli dengan kode <noscript>.

Maka nanti hasilnya:
<noscript>kode-asli-gambar</noscript>

Contoh:
<noscript><img alt="setting template amp" data-original-height="512" data-original-width="912" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTvW-qOKNlKqAgDDxOpcQNqEnGfyWmu9fl5YZFwsj0tXd-zIfomrC5kuexJLbn-aL9ZtzzLUsFpKSHnBKBfUjNP7itopi14d0AB0RZw314m1OmYvL8ZPt4xzdlknSGlMx990szUvmv3to/s640/setting+template+amp.png" title="setting template amp" width="640" /></noscript>

Gambar Postingan AMP


Untuk merubah gambar postingan (bukan thumbnail) agar support AMP, silakan tambahkan code <amp-img>.

Maka hasilnya:
<amp-img>kode-asli-gambar</amp-img>

Contoh:
<amp-img alt="setting template amp" data-original-height="512" data-original-width="912" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTvW-qOKNlKqAgDDxOpcQNqEnGfyWmu9fl5YZFwsj0tXd-zIfomrC5kuexJLbn-aL9ZtzzLUsFpKSHnBKBfUjNP7itopi14d0AB0RZw314m1OmYvL8ZPt4xzdlknSGlMx990szUvmv3to/s640/setting+template+amp.png" title="setting template amp" width="640"></amp-img>

Untuk membuat gambarnya menjadi responsive, kalian tinggal menambahkan kode layout="responsive".

Contoh:
<amp-img alt="setting template amp" data-original-height="512" data-original-width="912" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTvW-qOKNlKqAgDDxOpcQNqEnGfyWmu9fl5YZFwsj0tXd-zIfomrC5kuexJLbn-aL9ZtzzLUsFpKSHnBKBfUjNP7itopi14d0AB0RZw314m1OmYvL8ZPt4xzdlknSGlMx990szUvmv3to/s640/setting+template+amp.png" title="setting template amp" width="640" layout="responsive"></amp-img>

Mohon setiap upload gambar, dalam membantu kecepatan loading, diharap untuk mengupload gambar dengan format WebP. Kalian dapat menggunakan situs https://ezgif.com/webp-maker untuk covert/merubah format PNG, JPG ke WebP. Ini juga berlaku setiap upload gambar apapun ke halaman blog.

Related Post


Agar Related Post tidak menjadi undefined, maka rubah link "xxxxURLyourBLOGxxxx" di halaman Edit HTML dengan link homepage blog kalian.

XXXX


Cari kode xxxx untuk menggantinya dengan kode kalian sendiri. Misalkan saja kode Adsense dan Verifikasi Webmaster.

Tutorial lainnya


> Cara Menambah Video Youtube AMP
> Cara Menambah Unit Adsense AMP
> Cara Menambah Unit Doubleclick for Publisher AMP
> Cara Menambah Google Map AMP

Related Post:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Learn more