Home » , , , , , » Cara Mudah dan Lengkap Membuat Blog Valid AMP HTML

Cara Mudah dan Lengkap Membuat Blog Valid AMP HTML

Ingin membuat blog AMP atau Accelerated Mobile Pages(Laman Seluler Yang di Percepat) ?tapi bingung bagaiman cara membuatnya?.jangan kuatir,cara membuat Amp Blog juga sama dengan membuat blog seperti biasanya.

Berikut ini akan saya bagikan cara mudah dan lengkap membuat blog Amp,Amp Blog atau Accelerated Mobile Pages.

Namun,saran saya buatlah blog baru saja,karena jika sobat ingin migrasi dari blog Non-AMP ke blog Custom AMP akan sedikit ribet.

kita harus mengedit ulang semua kode dalam blog kita.baik themplate maupun postingan blog.

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


cara mudah membuat blog amp
Accelerated Mobile Pages Icon

1. GUNAKAN THEMPLATE BLOG VALID AMP

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

cara pembuatanya pun sama seperti biasanya.hanya saja,untuk penggunaan themplate blog berbeda.

Kalau pada blog Non-Amp kita bisa saja menggunakan themplate bawaan blogger karena kode mark Up yang di pakai masih dalam bentuk HTML,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 kita tidak perlu lagi repot-repot membuat sendiri.karena untuk membuat design template blog sendiri bukan pekerjaan yang remeh.tidak cukup 1 atau 2 jam saja.bahkan,menurut beberapa designer,template bisa rampung setidaknya memakan waktu sebulan lamanya.

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

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.

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 blog 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://lh3.googleusercontent.com/-aXSIjZxp6Ss/WTwgEwVQeyI/AAAAAAAAGNI/AtrGY2_5l8Qtum8axFv9AgngGx7EfKnAwCHM/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://lh3.googleusercontent.com/-aXSIjZxp6Ss/WTwgEwVQeyI/AAAAAAAAGNI/AtrGY2_5l8Qtum8axFv9AgngGx7EfKnAwCHM/s640/%255BUNSET%255D' tabindex='0' layout='responsive'><amp-img>

3. MEMASANG SCRIPT GOOGLE ANALYTICS VALID AMP BLOG

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

Cara memasanganya,ada dua macam.namun khusus untuk blog custom AMP gunakan cara manual dengan meletakkan script analytics di dalam themplate blog.

Caranya :

  1. 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'/>
  2. langkah berikutnya cari kode <body> atau <body itemscope='itemscope' itemtype='http://schema.org/WebPage'> pada edit HTML themplate.dan letakkan script analytics berikut ini tepat di bawah kode tersebut.

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


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

    Kalau

4. MENYEMATKAN ATAU MENEMPELKAN VIDEO YOUTUBE PADA AMP BLOG

Video youtube juga sering di gunakan oleh blogger sebagai pelengkap artikel.biasanya video tersebut berupa tutorial,berita,dan lain-lain.

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 AMP,namun pemasangannya akan menyebabkan error.

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

  1. 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'/>
  2. 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.
  3. 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 AMP BLOG

cara menyematkan tweet pada blog amp
Contoh Hasil Embed Tweet

Menyematkan,melekatkan atau embed tweet tertentu pada postingan blog AMP memang sedikit agak 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.

  1. Pada edit HTML themplate,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'/>
  2. 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&egrave;ne Wenger <a href="https://t.co/YZcmNufFrS&quot;>https://t.co/YZcmNufFrS</a></p>
    &mdash; 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 twitter,postingan Facebook juga sering di sematkan atau di lekatkan pada postingan blog.berikut ini caranya :

  1. 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'/>
  2. 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 kita.

Bisa di bilang seperti symbiosis Mutualisme.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 memperberat loading blog,lebih baik tidak di perlu di pasang saja.

Caranya silahkan copy dan paste kode di bawah ini di dalam blog AMP sobat.bisa di bagian foooter,sidebar,di bawah postingan blog dan lain-lain.letakkan di tempat yang menurut sobat 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 menbahkan 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 :

  1. 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'/>
  2. 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 sobat.

9. MEMBUAT SITEMAP UNTUK AMP BLOG

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 kita,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.

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 mengerjakan itu semua,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 kita.

Caranya sebagai berikut :

  1. Pada edit HTML Themplate,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'/>
  2. 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://1.bp.blogspot.com/-fPlS3N0B2LM/WPhouSSCtGI/AAAAAAAAMeM/lNXFHM_SHXw6iA26u2XBm80CqcE-pfyHACLcB/s1600/sitemap.jpg"></amp-img>
    </amp-iframe>


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

10. MEMBUAT FOLLOW BY EMAIL VALID AMP

membuat follow by email valid amp
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 kita 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 :

  1. 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}
  2. 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=&#039;follow-by-email&#039;>
    <h5>Get updates in your Mailbox</h5>
    <input name=&#039;email&#039; placeholder=&#039;Enter your email&#039; type=&#039;text&#039;/>
    <a href=&#039;https://feedburner.google.com/fb/a/mailverify?uri=artasindo&amp;loc=en_US&#039; target=&#039;_blank&#039;>Subscribe</a>
    </div>
Ganti ID FeedBurner saya yang berwarna merah tersebut dengan ID FeedBurner Anda.

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?asal mau belajar seperti saya,tentu tidak ada kata repot.

Thanks for reading & sharing Cara Mudah dan Lengkap Membuat Blog Valid AMP HTML

Previous
« Prev Post

0 komentar:

Post a Comment