cara membuat halaman valid amp dengan benar dan tepat

Accelerated Mobile Pages atau disingkat menjadi AMP atau Seluler yang dipercepat merupakan prakarsa sumber terbuka yang digunakan untuk menyediakan laman web yang dimuat dengan cepat dan terlihat bagus pada perangkat seluler. AMP ini dirilis oleh Google pada oktober 2015 yang bertujuan utnuk meningkatkan pengalaman pengguna khususnya publisher sehingga dapat memuat laman yang maksimal dan optimasi mobile yang baik.

Pada kali ini saya akan memberikan sedikit tutoial cara menulis artikel atau postingan yang mendukung untuk blog AMP

Membuat Artikel atau Post Valid AMP HTML

1. Memasang Gambar Utama dari Postingan

Memasang gambar utama ini digunakan sebagai gambar utama dari postingan kamu sehingga gambar ini biasanya akan terlihat di paling atas judul postingan atau gambar ketika di share ke media sosial. Gambar ini tidak akan muncul pada isi artikel atau postingan.

Contoh Artikel atau Postingan Valid AMP HTML: Lihat Postingan

Kode Gambar Utama

<noscript><img alt="Selena Gomez Artist Beautiful in the World?" width="680" height="382" src="https://ALMAT GAMBAR.jpg" title="How To Earn Money on the Internet Quickly" /></noscript>

Keterangan: Ganti tulisan yang di mark warna kuning, menjadi alamat gambar yang ingin kamu gunakan sebagai gambar utama artikel atau postingan

2. Memasang Gambar pada isi Artikel atau Postingan

Gunakan kode di bawah ini untuk memasang gambar pada artikel kamu

<amp-img alt="AMP HTML" height="300" layout="responsive" src="https://ALAMATGAMBAR.jpg" width="430"></amp-img>

3. Cara Memasang Video YouTube Valid AMP HTML

Gunakan kode di bawah ini untuk menampilkan video dari YouTube. Ganti tulisan yang di mark kuning menjadi id video dengan cara

1. Ambil kode video dari alamat video YouTube yang ingin kamu gunakan
2. Letakan pada kode amp-youtube
3. Simpan kode pada artikel atau postingan kamu

Kode YouTube valid AMP HTML

<amp-youtube
data-videoid="i7wveOu5hkQ"
height="270"
layout="responsive"
width="480"></amp-youtube>

4. Menggunakan Tulisan Justify

Gunakan kode CSS  .center {text-align: justify;}

kemudian gunakan <div> untuk menggunakannya. Contoh:

<div class='center'>

PANDUANBLOG.ID merupakan media blog yang digunakan untuk bertukar dan berbagi informasi mengenai tutorial blogger.

</div>

Sekian mengenai Cara Membuat Artikel atau Postingan Valid AMP HTML semoga bermanfaat. Terimaksih dan Selamat mencoba 😀

Bagikan Artikel ini