إنضم لنا

Panduan Menggunakan AMP pada blogger





Mau tidak mau itulah kenyatannya jaman sudah berubah mereka tidak peduli, sepertinya Ini menjadi awal yang bagus menurut mereka dan kenyataan yang manis buat kita,


Pada waktu lalu google telah meluncurkan proyek AMP pada 24 Februari bersamaan dengan meluncur nya situs, Wall Street Journal, dan Washington BuzzFeed dan google akan mengutamakan AMP di hasil pencarian, Dan Artikel juga akan muncul Selain melalui Google Search, artikel AMP juga akan dapat diakses melalui Twitter, Pinterest, LinkedIn dan Google+ dilangsir melalui metrotvnews Dan Pinterest menjadi Awal percobaan

Sekarang Sudah saatnya kita mengikuti perkembangan zaman Untuk memulai sesuatu yang cepat dari situs kalian melalu Google AMP, Saya akan memandu kalian menggunakan AMP pada blogger,

Di mulai dari artikel

Yang pertama:Saya menganggap kalian sudah memasang Template AMP, Yah itu syarat yang pertama yang harus kalian lakukan karna tanpa template AMP kalian tidak akan berhasil, Kalian bisa download langsung dari google drivDisini

Karna Artike Adalah aset dari sebuah blog maka saya akan memulai dari sini, saya yakin jika sebelumnya kalian telah terbiasa dengan program HTML5 kalian tidak terlalu kesulitan beralih Ke AMP

1. Untuk format gambar seperti ini
 <img src="image.png"/>
Nampaknya sudah usang maka kalian ganti Dengan format seperti ini
 <amp-img alt="" height="250" layout="responsive" src="image.png" width="900"></amp-img> 
Nilai height dan width itu nilai wajib yang harus di sertakan jika tidak maka akan mendapat peringatan di mulai dari angka 0 sampai 10000, cara ini tidak berlaku untuk gambar tumbnail untuk membuat gambar tumbail buat lah seperti ini
<noscript>
<img src="gambar.png" alt="" />
</noscript>


2. <div dir="ltr" style="text-align: left;" trbidi="on">
Sudah tidak lagi di butuh kan maka kalian harus menggantinya dengan <div> kemudian di tutup dengan </div>

3. Style tertentu pada html misalnya  <span style="background-color: yellow;"> Atau <span style="color: red;"> Itu tidak di izinkan maka kalian harus membuat sebuah class pada css kalian bisa lihat di artikel saya sebelumnya di siniCara membuat style warna pada AMP

Setelah kalian melakukan seting artikel dengan cara di atas kalian sudah berhasil membuat Artikel yang valid AMP

Hindari javascript

Saya akan tetep memandu kalian supaya nanti tidak nyasar di tengah jalan, Google AMP melarang menggunakan ekstensi Javascript pihak ketiga, Artinya kalian tidak boleh memasang javacript selain dari Google AMP sendiri,

Google webmaster nampaknya ingin menciptakan css bersih dan murni Akhirnya Google webmaster memasang lalu lintas seperti peringatan AMP kritis dan AMP setara kritis, pada awal lalu lintas ini di keluarkan Google memaparkan Setara kritis akan tetap tampil sebagai halaman AMP di hasil pencarian Google, berbeda dengan AMP kritis, AMP kritis di anggap masalah serius oleh Google webmaster maka Google search tidak menampilkan Artikel AMP di hasil pencarianya tapi tetap akan muncul sebagai Artikel non-AMP, Tapi sekarang keduanya tidak bisa di anggap main main karna Keduanya sudah di sama kan, Kritis dan setara kritis sama sama mendapatkan hasil pencarian non-AMP

Untuk masalah ini kalian masih bisa menggunakan Amp-ifram untuk menopang sebuah javascript

Penting!
a. Kalian hindari javascript yang muncul tanpa kita sadari contohnya contact from email, Google memang belum memperbaruinya jadi jangan di pasang karna tidak suport Untuk AMP dan masih menggunakan javascript di dalamnya


b. Komentar google plus dan komentar blogger juga sama tidak valid pada AMP maka kalian tidak perlu memasangnya kalian punya dua pilihan untuk masalah ini kalian gunakan komentar disqus atau facebook keduanya sudah valid amp , jika kalian tetap ngotot ingin memasang komentar google plus kalian bisa baca cara memasang komentar google plus pada AMP


c. Hapus <b:include name='quickedit'/> setiap kali kalian membuat gadget baru karna ini muncul bareng setelah Gadget baru di buat dan tidak valid pada AMP

d. Jika kalian menambahkan css pada template pastikan css tersebut tidak mengandung karakter !important Karna karater ini tidak di izinkan, segera kalian hapus


CSS pada template non-AMP Di Tempatkan menjadi satu pada tag ]]><b:skin> Berbeda dengan CSS yang terdapat pada AMP

CSS AMP di bagi menjadi 6
1. <style amp-custom='amp custom'>
<--css tampilan homepage mobile-->

2.<style amp-custom='amp custom'>
<--css tampilan homepage Dekstop-->

3.<style amp-custom='amp custom'>
<--css tampilan postingan mobile-->

4.<style amp-custom='amp custom'>
<--css tampilan postingan dekstop-->

5.<style amp-custom='amp custom'>
<--css tampilan stactic mobile-->

6.<style amp-custom='amp custom'>
<--css tampilan stactic dekstop-->

Semua di pisah melalui tag kondcional jadi jika kalian ingin menambahkan sebuah css tentukan target yang tepat untuk menambahkan css, karna yang menjadi masalah Google membatasi penambahan css harus tidak lebih dari 50000 karakter dan kurang dari 50kb jika lebih maka Google memberi peringatan AMP tidak valid

Sampe di sini semoga membantu

Seperti bisa salam hangat dan terimakasih #happy
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail