Cara Mudah dan Lengkap Membuat Blog Valid AMP HTML

Cara Memasang Blog Amp atau Accelerated Mobile Pages Menggunakan Blogspot

Cara Membuat Blog AMP - Ingin membuat blog AMP atau Accelerated Mobile Pages(Laman Seluler Yang di Percepat) ?tapi bingung bagaiman cara membuatnya?.

Jangan kuatir,cara membuat blog valid amp html untuk blogspot ini juga sama saja dengan membuat blog pada umumnya.

Membuat blogspot menjadi blog Amp memang sedikit rumit,jauh berbeda jika Anda memakai platform Wordpress.

Agar blogspot Anda valid ketika di cek menggunakan Amp Validator,ada beberapa hal yang memang harus dilakukan.

Ini mengharuskan Anda untuk mengerti sedikit tentang coding.

Problem ini tidak akan Anda temukan jika Anda memakai Wordpress.

Karena Plugin Amp Wordpress sudah tersedia.

Anda hanya perlu menginstall dan mengaktifkan plugin tersebut.

Ingat...!tak ada problem tanpa solusi.

Hanya saja butuh ketelatenan dan kesabaran untuk mempelajarinya.

Namun,sebelum lebih lanjut membahas cara-caranya,perlu untuk Anda pertimbangkan lagi resiko yang harus Anda terima.

Karena jika Anda ingin migrasi dari blog Non-AMP ke blog Custom AMP,resiko ini yang akan Anda dapatkan,

Akan sedikit menghabiskan waktu,Karena setiap postingan yang ada wajib di edit ulang.

Memeras otak,Apalagi Anda yang belum faham betul seputar AMP HTML.

dan memforsir tenaga.jangabn salah,ngeblog juga butuh tenaga ekstra.

Yang jelas,Anda harus mengedit ulang semua kode dalam blog sebelumnya,baik template maupun postingan blog.

Sebagai uji coba,disarankan Anda membuat Blog yang baru saja.

Jika sudah faham bagaimana cara membuat Blogspot menjadi Halaman Mobile Yang Dipercepat ala Google ini.

Sehingga Anda akan lebih mudah proses editing Blog lama Anda.

Berikut adalah cara sederhana dan paling mudah untuk memasang atau membuat blogspot menjadi Amp atau Accelerated Mobile Pages.

Daftar Isi :

Memakai Template Valid AMP
Membuat Postingan Blog Valid AMP
Memasang Script Google Analytics
Memasang Video Youtube
Menyematkan atau Menempelkan Tweet Pada Postingan
Menempelkan Status Facebook dalam Postingan
Memasan Widget Fanspage Facebook
Memasang Kode Iklan Adsense
Membuat Sitemap Valid AMP
Membuat Widget Berlanggan Via Email
Cara Membuat Artikel Terkait atau Related Posts untuk Blog AMP

Ok,langsung saja Anda simak cara membuat Blog Amp versi saya berikut ini.

Accelerated Mobile Pages Icon

1. UNTUK MEMBUAT BLOG AMP GUNAKAN TEMPLATE YANG VALID AMP HTML

Blog Custom AMP kian banyak peminatnya,tak terkecuali saya pribadi.

cara pembuatanya pun sama seperti biasanya.

Hanya saja,untuk penggunaan kode penyusun template blog berbeda.

Kalau pada blog Non-Amp Anda bisa saja menggunakan template bawaan blogger.

Penyebabnya kode mark Up yang di pakai masih dalam bentuk HTML biasa,sedangkan untuk Amp Blog harus berupa AMP HTML.

Tapi jangan kuatir! blogger Indonesia memang luar biasa,

Selain mahir mengotak-atik kode-kode HTML untuk membuat template,mereka juga dengan ikhlas berbagi template hasil kreasi mereka dengan percuma alias GRATIS.

Meski ada versi berbayarnya,

Namun dengan menggunakan template yang versi gratisan saja kita sudah bisa memaksimalkan kegiatan blogging.

Template yang di bagikan juga termasuk template Valid AMP.

Jadi Anda tidak perlu lagi repot-repot membuat sendiri.

Karena untuk membuat design template blog sendiri bukan pekerjaan yang remeh temeh.

Anda harus tahu,prosesnya Tidak cukup 1 atau 2 jam saja.

Bahkan,menurut beberapa designer,template bisa rampung setidaknya memakan waktu sebulan lamanya.

Tahu ini,Anda masih eman mengelurkan imbalan untuk jasa Mereka? Kebangetan...!

Kecuali jika Anda sudah faham betul tentang Kode HTML maupun Amp HTML,mendesign template sendiri tentu akan menjadi sebuah kepuasan yang sudah pasti membanggakan.

Namun,bagi Anda yang masih berkategori pemula,Seperti Saya ini.

Anda hanya perlu mencarinya di internet kemudian di download untuk di gunakan di dalam blog Anda.

2. MEMBUAT POSTINGAN BLOG VALID AMP

Untuk membuat postingan blog yang Valid AMP,tentu tidak sama seperti pada blog Non-AMP.

Anda harus menghapus dan mengubah beberapa kode HTML menjadi AMP HTML.

Biasanya secara otomatis akan muncul kode Seperti ini ;
<div style="text-align: justify;"></div> pada setiap kolom editor postingan blog.agar bisa valid AMP HTML,hapus saja kode tersebut.
(beberapa saat yang lalu kode perataan ini sudah lolos amp validator)

Selain kode di atas,sesuai pengalaman saya,ada beberapa kode lain yang tidak sesuai dengan AMP HTML.

di antaranya Kode Variasi ukuran dan warna huruf yang langsung di letakkan pada postingan.seperti (<font color>,<font size>,<style color>),Border untuk tabel atau gambar,misal <table border="1">,dan lain-lain.

Untuk menyisipkan gambar ada dua jenis gambar yang akan tampil pada setiap postingan blog pada versi Amp ini.

Pertama,Thumbnail gambar yang akan tampil sebagai gambar utama di atas artikel.

Cara peletakanya sama seperti biasanya,hanya saja kode gambar harus di apit kode <noscript> dan </noscript>.

Kode yang harus di pakai nantinya seperti ini :

<noscript><img src='URL GAMBAR' alt='Nama Alternatif Gambar'/></noscript>

Contoh :

<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvB-kh90pIGVp5Kg5MQT-6nKGioOZjDonyXcK0RujlvXf-c0XsPfQXIbb98Sd4hQC1JqQ9mqkHkq5w9lyJoBe7iiolHRUQZ8NMRDgvuMJpeVqxKO092-Nru53ewDzOkUFqdsKl4wJPvQX/s640/%255BUNSET%255D" alt='cara membuat blog amp'/></noscript>

Kedua,gambar pelengkap yang biasanya akan di pasang di tengah atau bawah artikel amp blog.

Cara pemasanganya,ganti kode img menjadi amp-img.

Gunakan kode di bawah ini,untuk pemasanganya.

<amp-img alt='Nama Alternatif gambar' src='URL Gambar' tabindex='0' layout='responsive'></amp-img>

Contoh :

<amp-img alt='nama alternatif gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvB-kh90pIGVp5Kg5MQT-6nKGioOZjDonyXcK0RujlvXf-c0XsPfQXIbb98Sd4hQC1JqQ9mqkHkq5w9lyJoBe7iiolHRUQZ8NMRDgvuMJpeVqxKO092-Nru53ewDzOkUFqdsKl4wJPvQX/s640/%255BUNSET%255D' tabindex='0' layout='responsive'><amp-img>

3. MEMASANG SCRIPT GOOGLE ANALYTICS VALID AMP HTML

Kode Google Analytics di perlukan untuk memantau kinerja blog yang meliputi jumlah kunjungan,keyword perujuk,bounce rate(Rasio Pentalan),dan lain-lain.

Cara memasanganya,pada dasarnya ada dua macam.

Namun khusus untuk blog custom AMP gunakan cara manual dengan meletakkan script analytics di dalam themplate blog.

Caranya :

Cari kode </head>,Kemudian letakkan script berikut di atas kode </head> tersebut.

<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/>
langkah berikutnya cari kode <body> atau <body itemscope='itemscope' itemtype='http://schema.org/WebPage'> pada edit HTML template.dan letakkan script analytics berikut ini tepat di bawah kode tersebut.

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'> { "vars": { "account": "UA-82888704-1" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script>
</amp-analytics>

Ganti kode analytics yang berwarna merah di atas dengan kode analytics blog Anda.

Kalau mengalami masalah validaitas,silahkan baca solusinya disini

4. MENYEMATKAN ATAU MEMASANG VIDEO YOUTUBE PADA BLOG AMP

Video youtube juga sering di gunakan oleh blogger sebagai pelengkap artikel.

Biasanya video tersebut berupa tutorial,berita,dan lain-lain.

Terserah Anda meletakkan Video untuk apa? Itu urusan Anda,Bukan urusan Saya.

Penyematan atau pemasangan video youtube pada blog Custom AMP berbeda dengan cara biasanya.

Anda tidak bisa begitu saja meletakkan kode embed youtube di dalam postingan.

Meski masih tetap bisa tampil di dalam postingan blog Accelerated Mobile Pages,namun pemasangannya akan menjadi penyebab terjadinya error.

Maka,kita harus menggunakan AMP Youtube,caranya sebagai berikut :

Cari kode </head> pada themplate blog sobat.kemudian pastekan script di bawah ini tepat di atas kode </head> tersebut.

<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
Selanjutnya pilih Video youtube yang ingin sobat letakkan pada postingan blog.lihat dan copy URL video youtube tersebut.

Contoh Url Youtube : https://youtu.be/Sl-_NuDxiFQ

Lihat ID youtube pada URL yang berwarna merah,ID tersebut yang akan kita pakai.
kemudian,gunakan kode seperti di bawah ini :

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

Ganti ID youtube yang berwarna merah dengan ID youtube yang sobat inginkan.

5. MENYEMATKAN ATAU MENEMPELKAN TWEET PADA POSTINGAN BLOG AMP

Contoh Hasil Embed Tweet

Menyematkan,melekatkan atau embed tweet tertentu pada postingan blog AMP memang sedikit agak rumit.

Ingat,cuma sedikit.Asal Anda mau belajar,pasti gampang.

Prosesnya sedikit rumit Jika di banding dengan blog Non-AMP yang tinggal Copy kode embed dari twitter dan paste di posting blog.

Namun pada blog Custom AMP,kode embed dari twitter harus sedikit di modifikasi agar valid AMP HTML.

Caranya ikuti langkah-langkahnya di bawah ini.

Pada edit HTML template,cari kode </head>,dan letakkan script di bawah ini tepat di atasnya.

<script async='async' custom-element='amp-twitter' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js'/>
kemudian untuk penyematan atau peletakkan Tweet pada posting amp blog,gunakan kode ini :

<amp-twitter width=486 height=657 layout="responsive" data-tweetid="Letakkan ID TWEET disini" data-cards="hidden">
</amp-twitter>

Amati contoh URL tweet di bawah ini

<blockquote placeholder class="twitter-tweet" data-lang="en">
<p lang="en" dir="ltr">
We can confirm that the club has agreed a new contract with Arsène Wenger <a href="https://t.co/YZcmNufFrS">https://t.co/YZcmNufFrS</a></p>
— Arsenal FC (@Arsenal) <a href="https://twitter.com/Arsenal/status/869894000542707712">31 Mei 2017</a></blockquote>

Angka yang berwarna merah adalah ID Tweet,angka-angka itu yang nanti kita gunakan,kode lain abaikan saja.

Hasilnya akan terlihat seperti contoh kode di bawah ini :

<amp-twitter width=486 height=657 layout="responsive" data-tweetid="869894000542707712" data-cards="hidden">
</amp-twitter>

6. MENEMPELKAN STATUS FACEBOOK PADA AMP BLOG

Seperti halnya Menyematkan atau Menempelkan Tweet Pada artikel,postingan Status Facebook juga sering di sematkan atau di lekatkan pada postingan blog.

Berikut ini caranya :

Cari kode </head> pada edit HTML Themplate,dan letakkan script berikut di atasnya.

<script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>
selanjutnya gunakan kode di bawah ini untuk pelekatan status facebook pada postingan blog .

<amp-facebook width="552" height="303" layout="responsive" data-href="LETAKKAN URL STATUS FACEBOOK DI SINI"></amp-facebook>

Contohnya seperti ini :

<amp-facebook width="552" height="303" layout="responsive" data-href="https://www.facebook.com/kopralkoclok/posts/10102593740125791"></amp-facebook>

7. MEMASANG WIDGET FACEBOOK FANSPAGE

Memasang facebook fanspage di dalam blog memang terkadang di perlukan juga.

Tujuanya tentu untuk menarik kunjungan dari facebook.sekaligus mendapat pengunjung loyal pada blog Anda.

Bisa di bilang seperti symbiosis Mutualisme.Sama-sama diuntungkan.

Karena baik Fanspage maupun Blog sama-sama di untungkan.

Fanspage akan berpotensi mendapatkan Like dari pengunjung blog,

Sementara blog akan mendapat kunjungan dari followers fanspage.

Namun,jika di rasa keberadaan Fanspage memperberat loading blog,baiknya Anda pertimbangkan lagi untuk memasangnya.

Caranya silahkan copy dan paste kode di bawah ini di dalam blog AMP Anda.

Bisa Anda letakkan di bagian foooter,sidebar,di bawah postingan blog dan lain-lain.

Letakkan widget ini di tempat yang menurut Anda paling tepat.

<amp-iframe width="300"
height="214"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
scrolling="no"
src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/like-boxfb.html?page=ISI ID FANSPAGE DISINI">
</amp-iframe>

Penting :

Setiap kali menambahkan Gadget,secara otomatis akan muncul ikon obeng untuk edit gadget tersebut.

Pada blog Custom Amp,hal ini akan menyebabkan error.

Oleh sebab itu,hapus ikon obengnya.

Caranya,pada edit HTML Themplate cari dan hapus kode ini
<b:include name='quickedit'/>

Kode di atas adalah hasil kreasi master Saya,Mas Ady Suryadi.untuk lebih lengkapnya silahkan kunjungi situsnya kompiajaib.com

8. MEMASANG IKLAN ADSENSE PADA AMP BLOG

Salah satu sumber penghasilan bagi blogger adalah dari pemasangan iklan.

dan yang menjadi primadona adalah iklan dari google adsense.

Untuk cara pemasanganya pada blog Custom AMP,silahkan ikuti langkahnya berikut ini :

Cari kode </head> dan letakkan script berikut di atas kode </head>

<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
kemudian setiap kali memasang kode adsense,gunakan kode seperti di bawah ini.

<amp-ad layout="fixed-height" height="250" type="adsense" data-ad-client="ca-pub-1111222233334444" data-ad-slot="369369" >
</amp-ad>

Warna merah adalah ID Adsense dan data slot iklanya.silahkan sesuaikan dengan milik Anda.

9. MEMBUAT SITEMAP UNTUK BLOG AMP

Apa sih sitemap itu?

Dan apa pula manfaatnya bagi Situs web atau blog?

Sepengetahuan saya,Sitemap adalah peta atau daftar isi situs yang menyajikan seluruh isi konten di dalam web atau blog,tanpa terkecuali.

Mulai dari konten yang paling lama hingga yang terbaru akan di tampilkan dalam sitemap ini.

Manfaat membuat sitemap dalam blog adalah menudahkan pengunjung untuk "mengobrak-abrik" seluruh isi atau konten blog.

Selain itu,dengan adanya sitemap tentu juga memudahkan robot mesin pencarian seperti Google,Yahoo,Bing,Baidu dan Yandex untuk merayapi blog Anda,untuk di tampilkan pada hasil pencarian.

Sehingga akan memberi peluang lebih besar untuk mendatangkan pengunjung.

Itu artinya,sitemap sangat berpengaruh bagi SEO blog itu sendiri.

Setidaknya itu yang sedikit saya ketahui.Anda boleh beda pendapat.

Lalu bagaimana cara membuat sitemap (untuk Amp Blog)?

Membuat sitemap pada blog Custom AMP kita harus menggunakan amp-iframe.

Memang agak rumit dan butuh ketelatenan.

Untuk membuatnya Anda harus meng-hosting kode sitemap terlebih dahulu dengan URL hosting dan memakai protokol HTTPS seperti halnya Github dan cdn.ragwit.

Mengapa harus Protokol HTTPS?

Karena ada beberapa komponen dari AMP HTML yang hanya bisa berjalan melalui protokol HTTPS.

Salah satu contohnya adalah amp-iframe.

amp-iframe inilah yang nantinya kita pakai untuk membuat sitemap pada Blog AMP.

Namun jangan kuatir,Anda tak perlu bersusah payah untuk membuatnya sendiri.

Karena sudah banyak blogger yang bersedia mengambil peran sebagai tukang coding.

dan yang lebih membahagiakan lagi,Mereka dengan sukarela membagikan kode sitemap hasil karyanya untuk di pakai oleh Blogger lain.

Anda hanya perlu melakukan sedikit edit kode tersebut sebelum di pakai pada blog AMP.

Caranya sebagai berikut :

Pada edit HTML Template,cari kode </head> dan letakkan script di bawah ini tepat di atasnya.

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
Langkah berikutnya buatlah halaman baru dengan nama sitemap atau peta situs.

Gunakan mode HTML dan pastekan kode di bawah ini di dalamnya.

<amp-iframe allowfullscreen="" frameborder="0" height="600" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://cdn.rawgit.com/w4hyou/host/f475d7e9/5itemap.html?url=//www.artasindo.com" width="500">
<amp-img layout="fill" placeholder="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ihOwZfzR2vI95SSmaAW0A3_TSa-PdARJVKgn7YW0rz2WVaTHXEBPmNWZZI8lYdT1gZmUD3ozXF6vZ_Ehf5lsC8RrQSsDd8PpiLDUmowHyfy0MF0hPS1U8cD2dh8G5TBiFqezcM-Auws/s1600/sitemap.jpg"></amp-img>
</amp-iframe>

Ganti URL yang berwarna merah (www.artasindo.com) dengan URL blog Anda,kemudian klik Publikasikan

10. MEMBUAT FOLLOW BY EMAIL VALID AMP (Subcribe Via Email)

Contoh Hasil Follow By Email

Follow by Email atau ikuti lewat email adalah fitur berlangganan artikel dari suatu blog.

Setiap kali blog membuat update postingan,maka secara otomatis akan terkirim juga ke para pelanggan dari blog tersebut.

Cara pembuatannya juga sangat mudah.

Karena disini Anda akan menggunakan jasa FeedBurner,maka terlebih dahulu Anda harus mempunyai ID FeedBurner.

Agar mempersingkat artikel ini,saya anggap Anda sudah memiliki ID FeedBurner ya...

Sekarang ikuti langakah-langkah pemasangan fitur Follow By Email di bawah postingan blog berikut ini :

Pertama,silahkan Anda Copy dulu CSS di bawah ini,kemudian pastekan di style amp-custom bagian postingan.

.follow-by-email{background:#444;border-radius:4px;margin:6px 0 0;float:left;text-align:center;padding:12px 0;width:100%}
.follow-by-email input{border:0;background:#303030;font-size:13.5px;border:0;margin:0;padding:6px 0;text-align:center;color:#999;width:88%}
.follow-by-email a{background:#303030;font-size:13px;border-radius:4px;display:inline-block;margin:8px 0 0;width:82px;height:27px;line-height:27px}
.follow-by-email h5{font-size:15px;color:#aaa;margin:0 0 12px}
Kedua,Copy kode berikut dan letakkan di bawah <data:post.body/> pada edit HTML Themplate Blog.Biasanya akan ada dua atau tiga <data:post.body/>,untuk sementara sobat pilih yang kedua,jika tidak terlihat silahkan pilih yang ketiga.

<div class='follow-by-email'>
<h5>Get updates in your Mailbox</h5>
<input name='email' placeholder='Enter your email' type='text'/>
<a href='https://feedburner.google.com/fb/a/mailverify?uri=artasindo&loc=en_US' target='_blank'>Subscribe</a>
</div>

Ganti ID FeedBurner saya yang berwarna merah tersebut dengan ID FeedBurner Anda.

11. CARA MEMBUAT ARTIKEL TERKAIT ATAU RELATED POSTS UNTUK BLOG AMP

Related Post atau Artikel terkait merupakan daftar beberapa artikel berdasarkan label atau kategori artikel.

Widget ini biasanya di letakkan di bawah postingan blog.

Namun tak jarang diletakkan dibagian tengah artikel.

Selain memudahkan visitor untuk menjelajahi artikel dengan topik yang sama, related post atau artikel terkait untuk blog AMP ini juga bertujun untuk memenuhi satu kriteria artikel SEO Friendly, yakni internal link.

Apabila Anda sedang membuat Blog accelerated mobile page,dan ingin memasang widget artikel terkait dalam postingan blog AMP,maka silahkan ikuti tutorialnya berikut ini :

1. Silahkan masuk ke akun blogger.
2. Pilih Tema atau Themplate
3. Klik Edit HTML
Kemudian letakkan CSS di bawah pada bagian Style Amp Costum.

.related-post{margin:20px 20px 0;padding:0}
.related-post h4{background-color:#394264;font-size:20px;margin:0 0 10px;}
.clear{clear:both;}
@media screen and (max-width:414px){
.related-post {margin-bottom:0;}
}

4. Cari kode <data:post.body/>.jika kode tersebut lebih dari satu(biasanya ada 2 atau 3),maka coba cari yang paling akhir.kemudian letakkan kode berikut di bawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='related-post'>
<h4>ARTIKEL TERKAIT :</h4>
<b:if cond='data:post.labels'>
 
<b:loop index='x' values='data:post.labels' var='label'>    
<b:if cond='data:x==0'>
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/relatedposts_light.html?url=www.artasindo.com&label=" + data:label.name' frameborder='1' height='300' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>    </b:if>  </b:loop></b:if></div>
<div class='clear'/> </div> </b:if>

pengaturan :

ganti URL www.artasindo.com dengan URL blog Anda
jika tidak berfungsi,coba ubah versi blog http ke versi https.

Perlu di ingat bahwa,ini hanya berfungsi untuk blog versi AMP/accelerated Mobile Page.tidak akan berfungsi jika di gunakan pada blog non AMP.

Widget ini adalah kreasi dari Sang Master Kang Ady Suryadi.untuk lebih jelasnya silahkan kunjungi blognya langsung di sini KompiAjaib.com.

Blog Custom AMP nantinya pada hasil pencarian Google akan di tandai dengan Ikon Petir.

Namun tidak semua browser mendukung fitur ini.

beberapa browser yang terintegrasi seperti Chrome dan Browser bawaan Android atau gadget lain.

Nah,itu dia cara mudah dan lengkap membuat blog Custom Amp,amp blog,atau Accelerated Mobile Pages Versi Saya.

Cukup mudah bukan cara membuat blog Amp ini?asal mau belajar seperti saya,tentu tidak ada kata sulit.