Cara Membuat Postingan di Blog Menjadi Valid AMP Dengan Pihak Ketiga

Apa itu AMP ? Tentu begi yang mengenal blog atau mulai terjun pada dunia blogger tentu sangatlah bingung menganai hal tersebut. Saya sendiri bertahun - tahun ngeblog aja masih bingung dan masih belajar mengenai AMP ini. 

Banyak portal berita sekarang yang sudah beralih ke AMP, tentu ini ada alasannya mengapa pindah ke AMP karena berpengaruh juga pada SEO. 

AMP sendiri meniliki singkatan Accelereted Mobile Page yang mana berfungsi sebagai menambah kecepatan dari sebuah blog ini sendiri. 

Pengertian AMP (Umum) 

AMP memiliki singkatan Accelerated Mobile Page, yang mana di perkenalkan pada 2016 yang lalu. AMP ini sendiri adalah open source oleh Google yang mana menambah kecepatan loading blog saat di akses. 

Tujuan di buat halaman ini sendiri supaya halaman yang dimuat pada perangkat Mobile menjadi sangatlah cepat ketimbang tidak menggunakan AMP. 

Intinya halaman yang sudah AMP akan lebih cepat ketimbang halaman Non AMP saat diakses pada ponsel smartphone. Dengan menggunakan hal ini ada peraturan tertentu untuk menggunakan kode HTML. 

Selain itu kamu harus menggunakan kode CSS lebih efisien lagi ketimbang kamu menggunakan Template Non AMP. Kamu tidak bisa menggunakan kode CSS secara bebas apabila sudah menggunakan AMP HTML ini. 

Javascript juga tidak disarankan apabila kamu sudah menggunakan AMP HTML ini. Apabila kamu ingin menggunakan Javascript maka harus menggunakan Library Javascript. 

Memahami Cara Kerja AMP

Bagaimana cara kerja AMP ini? Tentu dari banyak orang sendiri tau mengenai AMP ini akan tetapi tidak mengetahui bagaimana cara kerja dari AMP ini sendiri cara kerja AMP adalah me-render halaman yang mana dioptimasi agar lebih cepat lagi saat diakses melalui mobile phone. 

Halaman - halaman ini dipercepat saat loading dimana HTML yang memperlambat sudah di hilangkan. 

Apabila kalian menggunakan Javascript yang tidak disarankan pada AMP maka halaman kalian tidak akan valid menjadi AMP. 

Jadi AMP ini sangat berperan penting untuk loading blog saat ini, jadi tidak heran apabila banyak yang beralih ke Google AMP

Pertama bagi kalian yang ngeblog menggunakan plafrom wordpress tentu sudah tidak usah lagi susah payah otak atik HTML nya cukup gunakan Plug In Wordpress supaya bisa AMP. 

Plugin AMP untuk Blog Wordpress

Bagi kalian yang menggunakan wordpress bisa gunakan 3 plug in ini supaya valid AMP :

Dengan ketiga plug in ini maka kamu sudah bisa membuat halaman menjadi valid AMP tanpa harus otak - atik lagi kode HTML nya. 

Apakah Plug In diatas berbayar? 

Tentu Tidak

Kamu bisa menggunakan plug in wordpresss valid AMP ini dengan gratis, dengan membuat artikel di Wordpress maka akan otomatis sudah Valid AMP tanpa harus otak - atik kode HTML nya, tentu ini tidaklah kerepotan atau bikin puyeng khususnya buat blogger pemula. 

Berbeda ceritanya apabila kalian menggunakan platfrom Blogger dimana harus ganti template menjadi Valid AMP agar blog kamu menjadi AMP. 

Ditambah lagi kamu harus edit secara manual postingan kamu supaya menjadi valid AMP jadi akan menambah kepuyengan mu saat otak - atik HTML nya. 

Cara Membuat Blogger Valid AMP

Agar blog kamu menjadi valid AMP tentu kamu harus menggunakan template blogger yang sudah valid AMP terlebih dahulu. 

Pastikan kamu ingin menjadi valid AMP maka harus blog baru apabila kamu menggunakan blog lawas yang mana artikelnya sudah mencapai 1000 artikel maka akan capek editnya. 

Tentu dengan edit satu persatu artikel dengan jumlah sebanyak itu maka akan capek tentu nya. 

Cara Membuat Postingan di Blogger Valid AMP

Berbeda dengan menggunakan blogspot yang mana kamu harus edit secara menual beda apabila menggunakan wordpress. 

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.

Akan tetapi kebanyakkan para blogger pemula tidak mengerti mengenai hal tersebut yang penting asal edit aja pada mode HTML. 

Memasang Gambar Thumbanil valid AMP


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

Kode dibawah ini adalah untuk gambar sampul artikel kamu jadi jangan asal kasih url sembarangan khusus gambar sampul saja
<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/sudar.blogger, sudar.blogger adalah data-shortcode-nya.

Salin kode dibawah ini untuk bisa menampilkan foto instagram dalam postingan.
<amp-instagram data-shortcode="sudar.blogger"
  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 Validor AMP Google Chrome

Untuk menggunakan nya kalian bisa simak aja tutorial dibawah ini :

  1. Buka halaman AMP pada Google Chrome pastikan kamu juga sudah install  Exstensiont AMP Validor
  2. Tambahkan kode "#development=1" Ke akhir URL misalnya seperti : https://www.sudarcell.com/p/about-us.html#developement=1
  3. Selanjutnya buka DevTools Chrome apakah ada validasi yang error atau tidak. 

Contoh halaman error pada AMP bisa dilihat pada gambar dibawah ini. 


Berikut ini adalah halaman AMP yang error dimana bisa kamu perbaiki sesui intruksi yang diberikan. 


Validor AMP ini sendiri bisa kamu akses dengan ekstensi Chrome, saat kamu jelajah atau orang lain maka ekstensi chrome ini akan mevalidasi setiap halaman AMP yang mana apabila akan ada icon berwarna. 

Kamu bisa pelajari lebih lanjut lagi di perbaikan halaman AMP

Akhir Kata

Itulah sedikit totorial mengenai membuat halaman postingan valid AMP apabila ingin ditanya langsung aja di kolom komentar. 

© Sudar Cell. All rights reserved. Developed by Jago Desain