Cara Memasang AMP Di Blogger Beserta Manfaatnya - Cari Aja Disini

Cara Memasang AMP Di Blogger Beserta Manfaatnya


Cara Memasang AMP Di Blogger Beserta Manfaatnya

Belakangan ini saya banyak sekali mendengar bahwa algoritma google telah di perbaharui yaitu google florida 2, mereka mengeluh tiba tiba grafik visitor menurun drastis dan ada pula yang senang karena visitor naik secara signifikan. Namun disini saya menyimpulkan bukan karena algoritma nya yang berubah membuat trafik blog menurun, itu dikarenakan situs blognya yang tidak mobile friendly. Karena di balik itu google sedang mengoptimalkan untuk mendukung proyek yang sedang di kembangkan yaitu AMP (Accelerated Mobile Pages).

AMP diluncur kan karena dikabarkan untuk bersaing dengan artikel instan facebook dan berita apple yang telah menggunakan teknologi terbaru untuk menampilkan feed lebih cepat, sehingga inilah yang membuat google gencar-gancarnya mempromosikan Google AMP.

Apa itu Google AMP ?

AMP merupakan library open source milik google yang memberikan kemudahan untuk membuat sebauh halaman yang menarik, lancar dan di muat secara instan bagi pengguna. AMP hanyalah halaman tempat untuk menautkan konten yang dapat di kontrol.

AMP ini merupakan proyek yang sudah lama dikembangkan oleh google untuk membuat laman web dapat dirender lebih cepat saat di akses di seluler. Hal ini karena pengguna google terbesar berasal dari perangkat seluler, dan ini yang menyebabkan google mengubah yang tadinya pengindeksan berdasarkan desktop first index menjadi mobile first index.

Apa pengaruh Google AMP untuk blog?

Ya tentunya kalian banyak yang bertanya demikian, tentunya hal ini sangat berpengaruh terhadap trafik blog. Jika situs blog yang tidak ramah atau tidak mobile friendly maka akan menurunkan ranking di pencarian google. Hal ini yang menyebabkan kenapa visitor kalian tiba tiba menurun.

Jika kita tidak cepat beradaptasi dengan metode algoritma yang terbaru ini, maka semakin lama blog kita akan kehilangan pengunjung. Nah diperlukan untuk menggunakan google AMP ini untuk menempatkan blog di posisi teratas pencarian google.

Lalu manfaat Google AMP apa ?

Manfaat jika memasang AMP di blogger terntunya adalah meningkatkan performa blog saat di akses di seluler, dengan semakin baik dan cepat sebuah web maka akan disukai oleh sistem pencararian google dan menaikan pengunjung secara signifikan, tentu ini sangat menguntungkan.

Bagaimana cara memasang AMP di blogger?

Untuk memasang AMP di blogger caranya sedikit rumit karena kita harus mengedit manual template blog. Karena google belum menyediakan fitur khusus agar blogger support AMP seperti halnya wordpress yang memiliki plugin AMP sendiri.

Caranya akan dijelaskan dibawah ini, harap ikuti setiap stepnya dan pahami agar tidak bingung.

1. Buka blogger, kemudian Edit HTML

2. Rubah kode <HTML> menjadi seperti berikut:

<html amp lang="en">

3. Pastekan kode charset dan viewport, jika sudah ada ganti dengan kode berikut di bawah <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

4. Pastekan kode canonical berikut

<link expr:href='data:blog.url' rel='canonical'/>

5. Letakkan kode berikut tepat di atas kode </head>

<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>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>

6. Rubah semua tag image menjadi amp-image

<amp-img src="gambarkamu.jpg" alt="amp-img" height="500" width="500"></amp-img>

Nah cara di atas merupakan syarat blog dapat support AMP, meskipun ada banyak hal yang harus di perhatikan, namun rasanya tidak cukup satu artikel untuk menjelaskan keseluruhan. Dan hal penting yang harus diperhatikan AMP tidak memperbolehkan menggunakan javascript, dan style css di dalam postingan.

Baca juga: Download Template Blogger AMP Responsive dan SEO Friendly

Kesimpulan

Saya akui memang sedikit rumit, namun untuk dipeajari lebih lanjut kalian bisa membaca panduannya di Google AMP Project, atau bisa memasang template yang sudah valid AMP. Saya sarankan bagi kamu yang tidak paham HTML sebaiknya membeli template AMP atau bisa download yang gratisan.

Jangan lupa bagikan artikel ini ya!

Berikan pendapatmu tentang artikel ini
Notification
Ini adalah popup notifikasi.
Done