TRIK JITU MENERAPKAN ACCELERATED MOBILE PAGES [AMP] PADA BLOG
![TRIK JITU MENERAPKAN ACCELERATED MOBILE PAGES [AMP] PADA BLOG](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnUg8YBwvXLsVWDR1P9wsZv8MoWSltZ4js5mhoKm-c0vUp0wty7yPdiw0W9msO8RCP1aifrC9hU1-drD9Nrkgqon4r7VMgrmhqPYyaHGJj3EEzIxa5WUSGcMJtRntSAm5C6DxUi1F84JFL/w600/Untitled-1.jpg "TRIK JITU MENERAPKAN ACCELERATED MOBILE PAGES [AMP] PADA BLOG")
 |
| AMP vs Blogger |
Sudah
diketahui bahwa template yang mendukung validasi Akselerasi mobile di blogger memiliki
kecepatan dan cepat terindex di halaman pencarian Google. Menjadi alasan logis
sebagian blogger menggunakan AMP.
Tetapi
tanpa harus mencari template blog lain yang mendukung AMP, anda bias menerapkan
di template blog tanpa harus mengutak atik seluruh isi blog.
Sekarang
kamu bias menerapkan AMP [Accelerated Mobile Pages] ke blog kesayanganmu dengan
perubahan sederhana pada template HTML anda. Ini sangat mudah dan tidak
memerlukan keahlian khusus apapun dan kamu bias melakukanya sendiri.
Pertama-tama
pergi ke editor template. Theme ⇒ Edit HTML dan
ikuti panduan implementasi langkah-demi-langkah ini. Jika Anda menerapkan
AMP untuk blog Anda, blog Anda akan berjalan lebih cepat dari sebelumnya.
Langkah-1
: UBAH HTML
Untuk membuat blog anda AMP friendly, cari dan
ganti kode <html> dengan kode berikut:
<html amp='amp'>
Langkah
ke-2 : UBAH CHARSE & VIEWPORT
Periksa untuk tag meta charset dan viewport di
editor template blog Anda. Jika tidak ada, copy dan paste kode berikut
setelah <head> .
<meta
charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
Langkah
ke-3 : LINK CANONICAL
Jadikan blog Anda mudah ditemukan menggunakan tag
kanonik. Sekarang,
Google menggunakan versi AMP dari halaman web sebagai sinyal untuk peringkat
SEO. Periksa
untuk tag link kanonik. Jika
tidak hadir, tambahkan link kanonik seperti berikut yang hanya akan menunjuk
pada dirinya sendiri.
<link rel="canonical"
href="https://www.aubsp.com/article-metadata.html" />
Copy
dan paste kode berikut setelah tag viewport diupdate di atas pada langkah 2
untuk blogger amp.
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url' rel='canonical'/>
Langkah
ke-4 : UBAH HEAD [KEPALA]
Setelah itu, cari dan ganti kode </ head>
dengan kode berikut dan buat blog Anda mobile friendly oleh AMP:
<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-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>
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-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>
Langkah
ke-5 : UBAH TAG GAMBAR
Biasanya, kita menggunakan tag <img> untuk
gambar tapi di AMP Anda harus menggunakan amp-img dan bukan hanya img. Karena
itu, ganti tag img menjadi tag amp-img seperti contoh berikut:
<amp-img src="AmpImage.jpg"
alt="amp-img" height="500"
width="500"></amp-img>
Itulah langkah – langkah untuk membuat sebuah blog menjadi SEO friendly
dan mendukung akselerasi mobil.
Apabila sudah diterapkan, lalu bagaimana cara mengetahui agar blog kita
valid AMP? Berikut metode validasi halaman AMPnya.
Metode-1:
Buka halaman AMP Anda di browser Chrome, misalnya : http://www[dot]rastunarebel[dot]com/p/amp-page[dot]html, tambahkan "#development=1" [tanpa tanda petik] ke URL.
Buka halaman AMP Anda di browser Chrome, misalnya : http://www[dot]rastunarebel[dot]com/p/amp-page[dot]html, tambahkan "#development=1" [tanpa tanda petik] ke URL.
Hasilnya
nanti seperti ini : http://www[dot]rastunarebel[dot]com/p/amp-page[dot]html#=1.
Klik
kanan dan buka konsol Google Chrome DevTools dan periksa letak kesalahan
validasi.
Metode-2:
Buka lamanya AMP Project di : www[dot]ampproject[dot]org, masukkan nilai URL ke dalam kolom ‘URL’ misalnya : http://www[dot]rastunarebel[dot]com/p/amp-page[dot]html
Buka lamanya AMP Project di : www[dot]ampproject[dot]org, masukkan nilai URL ke dalam kolom ‘URL’ misalnya : http://www[dot]rastunarebel[dot]com/p/amp-page[dot]html
Disitu akan terlihat setiap perubahan pada sumber
html yang dibuat dalam hasil editor interaktif. [Perhatikan, tulisan DOT yang berwarna kuning itu ganti dengan TITIK.
Demikian tutorial untuk membuat dan menerapkan
halaman blog valid AMP dan SEO friendly. Semoga bermanfaat.