Trik Jitu Menerapkan Accelerated Mobile Pages (AMP) pada Blog
Trik Jitu Menerapkan Accelerated Mobile Pages (AMP) pada Blog
| Halo sobat GudangTutorial, pada kesempatan kali ini admin akan membagikan sebuah trik jitu menerapkan AMP untuk blog sobat. 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 sobat bisa menerapkan AMP [Accelerated Mobile Pages] ke blog kesayangan sobat 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'/>
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>
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.
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
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.
Sumber: www.rastunarebel.com
0 Response to "Trik Jitu Menerapkan Accelerated Mobile Pages (AMP) pada Blog"
Post a Comment