Tutorial Blog AMP
Assalamualaikum teman-teman . Saat kamu sedang google-ing menggunakan smartphone, Mungkin kamu pernah menemui sebuah halaman website pada google search engine yang terdapat logo lingkran dan petir didalamnya, logo ini tepat berada pada bagian depan sebelum nama website tersebut, dan logo ini tampil hanya pada perangkat selullar saja. ketika kamu membuka website tersebut maka kamu akan menemui sebuah logo tautan atau url yang bergambar rantai diatas header dari website tersebut. Website inilah yang dinakaman Website AMP atau sebuah website yang valid AMP, saat ini blogspot sudah mendukung vitur ini dengan beberapa fitur yang sangat menarik tentunya. Blog AMP kini sudah banyak diadaptasi oleh beberapa website terkenal diseluruh dunia, lalu apakah kamu tahu apa itu AMP ?
AMP adalah kependekan dari Accelerated Mobile Pages, sebuah halaman yang di optimasi untuk perangkat selullar, mengingat pengguna internet kini sudah dominan menggunakan perangkat selullar untuk kegiatan berselancarnya, AMP sendiri adalah sebuah Project Google yang diumumkan secara global pada oktober 2015 silam, Proyek ini memungkinkan pembuatan situs dan iklan dengan berperforma tinggi, cepat, dan konsisten di berbagai perangkat dan platform distribusi.
Untuke pembuatan Blog yang berskema AMP terbilang gampang-gampang susah, kamu tidak boleh memasang widged yang berlebihan, selain dapat mempengaruhi kecepatan loading blog beberapa kode HTML widged blm dapat diimplemantasikan ke dalam blog AMP seperti Widged Histat, DMCA, dan yang lainnya, jika kamu memaksakan memasang widged yang tidak valid AMP maka blog tersebut akan dianggap blog biasa oleh google. Selain itu kamu juga harus menjaga agar semua artikel yang kamu buat mendukung skema AMP karna hal ini akan mempengaruhi hasil pencarian website kamu pada mesin pencarian google,
1. Gambar Thumbnail, gambar ini digunakan hanya untuk tampilan thumbnail setiap artikel pada halaman utama blog dan bagian atas artikel tepat dibawah judul, dan gambar tidak akan tampil pada isi halaman artikel,
Sebelum menggunakan scrip AMP Youtube pastikan template kamu sudah mengaktifkan costum element AMP Youtube, jika belum kamu harus menambahkannya terlebih dahulu element tersebut seperti dibawah ini sebelum kode </head> atau </head><!--<head/>-->
Google Analytics Untuk Blog AMP
Untuk memasang google analytics sebelumnya kamu harus sudah mendaftarkan blog yang kamu kelola pada layanan tersebut dan memasang kode AMP pada template kamu seperti biasa. berikut ini adalah kode AMP untuk Google Analytics.
Sebelum menyisipkan kode AMP google analystics pastikan didalam template kamu sudah tersedia costum element untuk google analystics, jika berlum silahkan tmbahkan kode dibawah ini di atas kode </head> atau </head><!--<head/>-->
atau bisa juga dengan kode seperti ini
kamu hanya cukup mengganti Id dan URL yang tertera dengan Id google analystic dan URL kamu.
Penutup
Untuk saat ini website saya YMobile4 ini belum menggunakan AMP namun saya membuat blog lain yang bertemakan AMP pada blog tersebut dan memang terasa lebih ringan jika diakses melalui perangkat selullar, tentunya hal yang sama dapat dirasakan juga saat diakses melalui komputer, blog terasa lebih ringan dan tidak membutuhkan waktu lama untuk meload halaman tersebut.
Akhir kata dari saya semoga Tutorial Blog AMP ini bisa membantu untuk kamu yang ingin mengenal dunia blogging lebih dalam, semoga artikel ini bermanfaat dan terima kasih atas kunjungannya.
 |
| Contoh Blog AMP pada Mobile4 |
Pengertian AMP
AMP adalah kependekan dari Accelerated Mobile Pages, sebuah halaman yang di optimasi untuk perangkat selullar, mengingat pengguna internet kini sudah dominan menggunakan perangkat selullar untuk kegiatan berselancarnya, AMP sendiri adalah sebuah Project Google yang diumumkan secara global pada oktober 2015 silam, Proyek ini memungkinkan pembuatan situs dan iklan dengan berperforma tinggi, cepat, dan konsisten di berbagai perangkat dan platform distribusi.
Kelebihan Blog AMP
- Untuk fitur yang dimiliki Blog bersifat AMP tentunya memiliki bayak kelebihan dibandingkan blog biasa (Non AMP), terutama jika blog tersebut diakses melalui ponsel terutama dari segi kecepatan loading blog
- Blog yang bersifat AMP lebih mobile friendly, hal ini tentunya akan membuat pengunjung merasa betah saat mengunjungi blog stersebut
- Lebih disukai oleh mesin pencarian Google, dan artikel akan cepat terindex
- Pengguna Internet saat ini relatif berselancar menggunakan perangkat selullar dan besar kemungkinan pengunjung akan selalu diarahkan ke blog AMP yang kamu kelola dibanding blog Non AMP
Kekurangan Blog AMP
- Blog yang menggunakan AMP tidak dapat menggunakan fitur komentar blogger untuk mengatasi hal ini pembuat template AMP sudah menyediakan fitur komentar menggunakan Disqus
- Untuk menyisipkan gambar perlu beberapa penanganan khusus untuk mengganti kode HTML dengan kode AMP, namun tidak serumit yang anda bayangkan, di akhir artikel saya menyediakan kode AMP untuk menyisipkan gambar
- Jika ingin menggunakan Blog AMP kamu harus menggunakan template AMP dan postingan artikel yang valid AMP, dengan tidak menggunakan kode-kode HTML yang tidak diijinkan oleh AMP
- Untuk blog yang sudah memiliki artikel banyak akan memakan waktu untuk merubah semua artikel yang sudah ada menjadi valid AMP dengan tidak menggukan kode-kode yang tidak diijinkan oleh AMP
Hal Yang Dilarang Dalam Blog AMP
Karena AMP memang dikhususkan untuk perangkat selullar, maka penggunaan kode HTML yang berlebihan dibatasi agar postingan didalam artikel tidak menguragi performance, beberapa kode HTML yang tidak di ijinkan oleh AMP seperti align justify, center, left, right, dan pemformatan lainnya yang menggunakan table div seperti contoh: <div style="text-align: justify;">Isi Text</div>Tutorial AMP
Untuke pembuatan Blog yang berskema AMP terbilang gampang-gampang susah, kamu tidak boleh memasang widged yang berlebihan, selain dapat mempengaruhi kecepatan loading blog beberapa kode HTML widged blm dapat diimplemantasikan ke dalam blog AMP seperti Widged Histat, DMCA, dan yang lainnya, jika kamu memaksakan memasang widged yang tidak valid AMP maka blog tersebut akan dianggap blog biasa oleh google. Selain itu kamu juga harus menjaga agar semua artikel yang kamu buat mendukung skema AMP karna hal ini akan mempengaruhi hasil pencarian website kamu pada mesin pencarian google,
Template Blog AMP
Sebelum membangun blog berskema AMP hal yang harus kamu lakukan terlebih dahulu adalah membuat template kamu valid AMP, atau kamu bisa juga menggunakan template yang beredar di website-website penyedia template blogspot baik itu yang berbayar maupun yang gratisan. Beberapa template yang support AMP ialah AMPNews, Vletters AMP, Kompi AMP, BlanterdeAMP, MDCamp, AMP HTML, dan masih banyak template lainnya yang berderan di website penyedia tempate, semua bisa kalian dapatkan secara gratis tanpa dipungut sepeserpun.Cara menyisipkan Gambar Pada Blog AMP
Berbeda dengan Blog AMP yang hanya perlu mengunggah gambar dan menyesuaikannya melalui Editor biasa, untuk blog yang berskema AMP kamu harus merubah kode IMG HTML menjadi AMP-IMG, pada langkah pertama unggah gambar seperti biasa, setelah gambar berhasil di unggah / upload kamu harus mengambil URL atau Alamat dari gambar tersebut, kemudian rubah kode HTML tersebut seperti contoh dibawah ini.1. Gambar Thumbnail, gambar ini digunakan hanya untuk tampilan thumbnail setiap artikel pada halaman utama blog dan bagian atas artikel tepat dibawah judul, dan gambar tidak akan tampil pada isi halaman artikel,
<noscript><img width="640" height="610" alt='nama gambar' src='url gambar anda'/></noscript>2. Gambar didalam Artikel atau Posting, gambar yang akan kalian gunakan pada setiap isi artikel menggunakan kode seperti dibawah ini, dimana kalian harus mengisi secara manual Url dan ukuran gambar
<amp-img alt=" Mungkin kamu pernah menemui sebuah halaman website pada google search engine yang terdapa Tutorial Blog AMP"
src="Url-IMG.jpg"
width="900"
height="675"
layout="responsive">
</amp-img>
Cara menyisipkan Vidio Youtube Pada Blog AMP
Sebelum menggunakan scrip AMP Youtube pastikan template kamu sudah mengaktifkan costum element AMP Youtube, jika belum kamu harus menambahkannya terlebih dahulu element tersebut seperti dibawah ini sebelum kode </head> atau </head><!--<head/>-->
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>Dan untuk menyisipkan vidio youtube pada postingan amp menggunakan kode seperti berikut
<amp-youtubekode tersebut kamu tuliskan dalam mode HTML pada editor blogger, kemudian kamu hanya perlu merubah ukuran vidio dan url ID vidio yang terdapat pada youtube , sebagai contoh ID vidio yang saya terapkan pada kode diatas adalah ShegIiSBqeM yang di ambil dari Url https://www.youtube.com/watch?v=ShegIiSBqeM .
data-videoid="ShegIiSBqeM"
height="270"
layout="responsive"
width="480">
</amp-youtube>
Google Analytics Untuk Blog AMP
Untuk memasang google analytics sebelumnya kamu harus sudah mendaftarkan blog yang kamu kelola pada layanan tersebut dan memasang kode AMP pada template kamu seperti biasa. berikut ini adalah kode AMP untuk Google Analytics.
Sebelum menyisipkan kode AMP google analystics pastikan didalam template kamu sudah tersedia costum element untuk google analystics, jika berlum silahkan tmbahkan kode dibawah ini di atas kode </head> atau </head><!--<head/>-->
<script async="async" custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>dan berikut ini adalah kode AMP untuk google Google Analytics
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageviewWithCustomUrl": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My page",
"documentLocation": "https://www.examplepetstore.com/pets.html"
}
}
}
}
</script>
</amp-analytics>
atau bisa juga dengan kode seperti ini
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
kamu hanya cukup mengganti Id dan URL yang tertera dengan Id google analystic dan URL kamu.
Penutup
Untuk saat ini website saya YMobile4 ini belum menggunakan AMP namun saya membuat blog lain yang bertemakan AMP pada blog tersebut dan memang terasa lebih ringan jika diakses melalui perangkat selullar, tentunya hal yang sama dapat dirasakan juga saat diakses melalui komputer, blog terasa lebih ringan dan tidak membutuhkan waktu lama untuk meload halaman tersebut.
Akhir kata dari saya semoga Tutorial Blog AMP ini bisa membantu untuk kamu yang ingin mengenal dunia blogging lebih dalam, semoga artikel ini bermanfaat dan terima kasih atas kunjungannya.