Cara Membuat Postingan Blog Pihak Ketiga Valid AMP

Apa itu AMP? Mungkin sedikit bikin bingung kata-kata ini jika baru dikenal oleh pemula yang baru belajar membuat blog, tapi sangat berpengaruh bagi yang sudah paham dengan dunia SEO. Dimana arti kata dari AMP ini adalah Accelerated Mobile Page, yang mana fungsinya untuk memberikan kecepatan loading halaman suatu website / blog.

Pengertian AMP?

AMP adalah singkatan dari Accelerated Mobile Page. Diperkenalkan awal pada tahun 2016, AMP merupakan sebuah program open-source hasil Google yang dibuat dengan tujuan memberikan kecepatan loading halaman versi mobile internet.

Tujuan dibuatnya halaman website versi ini adalah memberikan halaman website yang memang sudah dioptimasi agar loading lebih cepat pada mobile / smartphone. Halaman valid AMP memiliki kecepatan loading yang lebih cepat daripada dengan halaman versi non-amp.

Kenapa bisa lebih cepat begitu?

Pada intinya, AMP adalah halaman versi HTML yang diatur lebih ringan dibanding dengan halaman website. Untuk bisa mencapai ini, ada beberapa peraturan HTML yang tidak bisa kamu gunakan secara sembarangan.

Tidak sampai disitu saja, Kamu juga harus menggunakan kode CSS yang lebih efisien. Memang kamu masih bisa menggunakan kode CSS tapi tentunya kode yang memberatkan tidak bisa kamu gunakan secara bebas.

JavaScript juga tidak disarankan untuk digunakan di AMP. Kalau memang kamu ingin menggunakan JavaScript, kamu harus memanfaatkan library JavaScript yang memberi kamu berbagai pilihan kode yang bisa kamu gunakan pada halaman website AMP.
Catatan — Komponen AMP hadir dengan gaya default untuk mempermudah pembuatan halaman responsif. Gaya ini ditentukan di amp.css. 

Pemahaman Cara Kerja AMP

Mungkin ada dari kamu yang penasaran tentang bagaimana cara kerja AMP. AMP ini me-render halaman kamu menggunakan kode HTML saja yang sudah dioptimasi.

Halaman-halaman ini diharapkan akan loading dengan lebih cepat karena kode HTML yang dianggap bisa memperlambat proses kecepatan loading sudah dihilangkan.

Apabila halaman kamu menggunakan kode-kode JavaScript yang tidak disarankan untuk digunakan, maka scriptnya tidak akan dirender untuk halaman AMP.

Jadi pada intinya AMP saat ini sangat berperan penting untuk nilai kecepatan loading blog kamu, ada beberapa perbedaan yang bisa kamu gunakan untuk menggunakan halaman AMP ini kedalam blog kamu.
Baca juga — Pelajari tentang font kustom di AMP. Pertama menggunakan cara otomatis dengan menggunakan platrom blogging WordPress, kamu tidak perlu susah-susah menyeting pengaturan halaman AMP diwordpress karena sudah ada banyak plugin dukungan untuk digunakan secara gratis dan mudah.

Plugin AMP untuk Blog di WordPress

Berikut ini ada 3 plugin AMP terbaik untuk blog WordPress yang bisa digunakan secara gratis.

• AMP for WP - Accelerated Mobile Page
• AMP for WordPress
• Glues for Yoast SEO & AMP

3 Plugin diatas, dapat kamu unduh di blog versi WordPress dengan cara gratis. Dan pastinya setiap membuat suatu artikel di blog yang valid AMP di WordPress akan otomatis tanpa harus mengatur bagian-bagian kode HTML yang bikin puyeng buat pemula.

Beda halnya, untuk pengguna blogspot Blogger agar bisa mendapatkan fiktur AMP ini harus menggunakan template yang valid AMP dan juga membuat postingan secara manual agar bisa valid AMP.

Sangat tidak dianjurkan buat pemula jika belum paham masalah kode HTML dan CSS.

Cara Membuat Blogger Valid AMP

Hal pertama yang perlu kamu lakukan agar bisa blog kamu valid AMP adalah dengan cara mencari atau membeli template blogger versi AMP yang saya sediakan disini.

Usahakan dalam membuat blog kamu valid AMP di blogger ini, adalah blog baru agar kamu tidak kecapikan dalam mengedit artikel blog lawas yang sudah ada lebih 1000 artikel. Jadi buat blog baru saja dulu buat buat coba-coba dalam pembelajaran blog versi AMP.

Cara Membuat Postingan Blog yang Valid AMP

Beda halnya dalam menulis artikel di blog yang valid AMP versi blogspot, kamu harus melakukan secara manual dan sudah paham masalah kode HTML yang sebelumnya saya sebutkan diatas tadi.

Dalam artikel yang valid AMP di blogger adalah tidak ada kata yang menggunakan <div style=' dalam postingan tersebut dan kamu harus menulis di blogger hanya bisa menggunakan mode HTML saja dan tidak bisa dilakukan menggunakan mode Compose.

Kenapa hanya mode HMTL saja yang bisa kamu gunakan? Jika kamu menggunakan mode Compose dalam menulis artikel di blogger maka akan otomatis muncul kode <div style=' /> dimana kode ini akan membuat artikel blog kamu tidak valid AMP.

Memasang Gambar Thumbanil valid AMP

Pertama sebelum menulis, kamu perlu memasukan gambar thumbanil sebagai gambar yang akan mewakili tampilan artikel kamu nantinya di template.

<noscript><img alt="title images" width="680" height="382" src="https://URL-GAMBAR.jpg" title="title artikel" /></noscript>

Pasang kode ini di awal paragrap artikel kamu menggunakan mode HTML.

NOTE :

• title images = ubah dengan judul artikel 
• width = ubah dengan ukuran lebar foto kamu
• height = ubah dengan ukuran ketinggian foto kamu
• https:// URL-IMAGES = ubah dengan alamat foto kamu
• title artikel = ubah dengan judul artikel 

Membuat Tulisan Blog valid AMP

Kamu hanya perlu memasukan kata <p> diawal kata-kata yang ingin kamu tulis, dan di tutup dengan kode </p> jika ingin membuat paragraph baru.

Contoh kodenya bisa seperti dibawah ini.

<p>Tidak ada JavaScript yang disediakan jaringan iklan yang diizinkan untuk berjalan di dalam dokumen AMP</p>

Memasang Gambar di Dalam Postingan

Salin kode dibawah ini jika ingin memasang gambar di bagian paragraf.

<amp-img alt="title images" height="300" layout="responsive" src="https://URL-GAMBAR.jpg" width="430"></amp-img>

Jika ingin gambar sesuai ukuran layar maka gunakan kode layout='responsive', tapi jika ingin ukuran gambar sesuai dengan kemauan kamu, maka hapus kode layout='responsive'

Memasang Konten Instagram, Facebook dan Twitter di Postingan AMP

Sematkan beberapa post sosial media di laman menggunakan elemen amp-twitter amp-facebook amp-instagram.

Pasang kode script dibawah ini, letakan dibagian bawah kode <head>:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"/>
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"/>
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"/>

Memasang Post Twett di Artikel Blog valid AMP

Tweet saat ini otomatis diatur agar sesuai dengan ukuran yang disediakan, namun cara ini dapat menghasilkan tampilan yang kurang pas.

Maka Sesuaikan lebar dan tinggi yang diberikan secara manual atau gunakan atribut media untuk memilih rasio aspek berdasarkan lebar layar.

<amp-twitter width="500"
  height="583"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

Ganti ID yang saya beri warna merah dengan ID pos twitter kamu

Memasang Foto Instagram di Postingan Blog Valid AMP

Sertakan data-shortcode Instagram yang ditemukan di URL foto Instagram. Misalnya, pada https://instagram.com/p/rianseo13, rianseo13 adalah data-shortcode-nya.

Salin kode dibawah ini untuk bisa menampilkan foto instagram dalam postingan.

<amp-instagram data-shortcode="rianseo13"
  width="320"
  height="392"
  layout="responsive">
</amp-instagram>

Ganti ID shortcode dengan shortcode foto Instagram kamu

Memasang post atau video Facebook di Artikel blog Valid AMP

Salin kode dibawah ini

<amp-facebook width="486" height="657"
    layout="responsive"
    data-href="https://www.facebook.com/rianseo/posts/kucikkucik">
</amp-facebook>

Ganti yang saya beri tanda merah, dengan alamat postingan atau video facebook kamu

Tool Cek Halaman Valid AMP

Alat yang sangat perlu kamu gunakan saat menggunakan halaman AMP adalah AMP Validator Extensions yang bisa kamu pasang secara gratis di browser Google Chrome. Baca juga — Pelajari tentang memasang AMP Validator Extensions. Alat ini akan sangat berguna buat kamu untuk meninjau halaman yang valid AMP atau juga mengatasi halaman blog yang tidak valid AMP yang nantinya akan diberikan pentunjuk untuk memperbaiki AMP yang eror.

Cara Menggunakan AMP Validator di Google Chrome

Cara menggunakannya bisa kamu lihat contoh singkat dibawah ini :

1. Buka halaman AMP di browser Google Chrome dan pastikan sudah memasang Extensions AMP Validator.
2. Tambahkan kode "#development=1" ke akhir URL, misalnya, http://localhost:8000/released.amp.html#development=1.
3. Buka DevTools Chrome dan periksa apakah ada error validasi.

Contoh gambar halaman yang eror AMP

Images by ampproject

Berikut Contoh halaman Laporan yang tidak valid AMP yang bisa kamu perbaiki sesuai tanda yang diberikan.

Validator AMP dapat diakses langsung dari toolbar browser menggunakan ekstensi browser. Saat kamu menjelajah halaman sendiri atau orang lain, Maka Validator AMP akan otomatis memvalidasi setiap halaman AMP yang dikunjungi dan memberikan indikasi visual terkait validitas halaman dengan ikon berwarna. Baca juga — Pelajari tentang memperbaiki halaman AMP.

Akhir Kata

Demikian tutorial yang dapat kami sampaikan terkait dengan tentang masalah membuat postingan blog valid AMP. Jika ada yang ingin ditanyakan jangan ragu untuk menulis komentarnya.

Berbagi :