Cara Membuat Blogger Valid Amp Dalam 5 Menit

Cara membuat blogger valid amp tapi sebelum itu terlebih dahulu anda harus mengetahui tentang apa sih amp itu yang sesungguhnya, blog amp merupakan salah satu pilihan dalam membuat blog anda mudah ditemukan dimesin pencari, selain itu dengan menerapkan amp (Accelerated Mobile Pages) blog anda dapat memiliki kecepatan yang sangat cepat apabila dibandingkan dengan blog non amp dan perlu anda ketahui blog amp akan diberikan perhatian lebih oleh google ketimbang blog non amp sebab pihak goo*le sendiri memang sangat merekomendasikan fitur yang satu ini.

Seperti dari namanya Accelerated Mobile Pages atau amp hal ini sendiri bertujuan untuk menambah kecepatan blog anda khususnya pengguna hanephone, dan salah satu keunggulan dari menggunakan amp adalah blog anda dapat dijangkau lebih luas oleh banyak pengguna karena memang amp sangat direkomendasikan oleh goo*le apalagi dalam hal SEO amp sangatlah berpengaruh banyak pasalnya salah satu yang perlu anda perhatikan dalam penerapan SEO baik diblog ataupun website anda ialah kecepatan website, apabila kecepatan website anda sangat lambat otomati skor SEO anda akan berkurang sehingga blog anda akan sulit ditemukan lain halnya dengan menerapkan amp blog anda akan memiliki kecepatan yang sangat cepat sehingga dapat mempengaruhi blog anda dari segi SEO.

Apabila anda ingin menerapkan amp pada blog anda ada dua cara yang dapat anda lakukan yaitu dengan mendownload plugin atau dengan menerapkan template amp, untuk plugin sendiri anda dapat terapkan jika anda menggunakan platform wordpress jika anda ingin membuat blog anda valid cukup aktifkan pluginnya saja, namun lain halnya apabila anda menggunakan platform Blogger terlebih dahulu anda harus menerapkan template yang valid amp atau anda dapat membuat template anda valid amp yaitu dengan mengedit template anda.

Langkah Langkah Penerapan Blog Amp

Dalam penerapan blog amp khususnya Blogger tidaklah mudah khususnya bagi anda yang masih pemula dengan ilmu coding pastinya hal ini sangat meribetkan bagi anda jadi ikutilah langkah demi langkah berikut ini.

1. Mengatasi Error Attribute:'xmlns'

Langkah awal yang perlu anda atasi untuk menerapkan blog amp ialah mengatasi Error Attribute:'xmlns' ini merupakan keeroran yang sangat sering terjadi pada blog yang ingin anda terapkan amp, untuk mengatasi masalah tersebut ubah kode dibawah


<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ubah kode yang bewarna merah diatas untuk langkah awal mengubah template anda valid amp.

2. Memasukkan kode request amp

Langkah kedua yang harus anda lakukan ialah memasukkan kode request amp seperti yang dibawah ini.


<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>

Letakkan kode diatas persis diatas <head> pada struktur template anda, setalah itu simpan kode tersebut.

3. Masukkan Kode Blog Amp

Sampailah kita ketahap yang dimana blog anda akan dimasukkan kode yang sangat berperan penting dalam validnya template blog anda.


<!-- JavaScript Google AMP -->
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
<script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<b:else/>
<link expr:href='data:blog.url + &quot;?m=1&quot;' rel='amphtml'/>
</b:if>

<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta charset='utf-8'/>
<b:include data='blog' name='all-head-content'/>

Masukkan kode diatas pas dibawah kode <head> setelah itu simpan template anda.

4. Sembunyikan Komentar Default (Bawaan)

Langkah empat yang dapat anda lakukan untuk membuat blog anda valid amp adalah sembunyikan komentar default.

Anda dapat menyembunyikan komentar default blog anda seperti pada gambar diatas, mengapa disembunyikan karena komentar default dari blogger itu tidak valid terhadap amp kecuali anda telah mengeditnya tetapi dengan cara yang begitu rumit, tetapi anda tetap dapat meletakkan coment diblog anda dengan menggunakan coment Facebook ataupun Disqus.

5. Hapus kode CSS atau Script tidak berguna

Permasalahan ini sedikit rumit karena terlebih dahulu anda harus mengubah atau menghapus kode CSS dan Script yang tidak berguna, pasalnya tidak semua kode CSS dan Script valid terhadap amp jadi alangkah baiknya jika anda menghapus code CSS dan juga Script yang tidak valid amp.

6. Edit Semua Artikel Di Blog valid amp

Cara ini merupakan cara yang paling tidak disukai oleh pengguna blog yang sudah memiliki artikel ratusan bahkan ribuan sebab terlebih dahulu anda harus mengedit semua artikel yang ada diblog anda punyai untuk lebih lengkapnya bisa lihat pada postingan berikut ini.

Jika semua langkah langkah diatas sudah anda ikuti dengan baik maka langkah selanjutnya adalah dengan cara mengetes blog anda apakah sudah valid atau tidak, jika tidak maka lebih baik anda menggunakan template yang sudah valid saja agar anda tidak lagi kesusahan dalam mengedit template.

*Catatan:

Jika sudah menjalankan semua tutorial diatas atau malah anda menggunakan template diatas, sudahlah itu semua tidak masalah tetapi jika anda ingin mengetahui apakah memang blog anda sudah valid terhadap amp atau belum maka anda dapat mengeceknya dengan cara searcing amp dan memasukkan url blog anda.

Jika blog anda valid maka tampilan pada amp test akan seperti gambar yang ada pada bawah ini akan tampil teks bewarna hijau sedangkan apabila tidak valid maka akan memiliki teks bewarna merah.

Kesimpulan

Perlu anda perhatikan meskipun anda mendownload template yang valid amp tetapi template tersebut belum tentu valid terhadap amp mengapa demikian?, Sebab anda terlebih dahulu harus mealukan serangkaian pengeditan terhadap template anda sebelum benar benar template yang anda buat valid terhadap amp, contohnya saja blog ini template blog ini sudah mengalami 5 - 10 kali pengeditan sebelum ahkirnya tempale ini dinyatakan valid oleh amp test pada hal seharusnya template ini seharusnya sudah valid karena template ini sendiri merupakan template flexible buatan kompi ajaib namun sayang pada saat diterapkan tidak langsung valid sehingga harus diedit terlebih dahulu dan akhirnya valid juga.

Oke sekian dulu Cara Membuat Blogger Valid Amp jika anda mengalami masalah terhadap template atau kode diatas anda dapat membahasasalah anda pada kolom komentar ataupun pada halaman forum Semoga informasi ini dapat mengedukasi anda sampai jumpa diartikel selanjutnya.

0 Response to "Cara Membuat Blogger Valid Amp Dalam 5 Menit"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel