Tutorial Blog Valid AMP HTML



Sebelum nya saya membahas tentang seo untuk blogger dan yang lain nya dan kali ini saya akan membahas tentang AMP , karna google sudah merili tentang AMP HTML jadi saya akan memberikan sedikit tutorial tentang Blog yang sudah valid dengan AMP HTML seperti blog saya ini template yang saya gunakan sudah valid AMP jadi lumayan ringan sih , kabar nya jika pengguna template seperti saya ini maka pengunjung dari blog saya ini akan merasakan sensasi kecepatan dalam load website , jadi jika tidak percaya silakan buka blog saya dengan menggunakan Ponsel anda

Visi dari AMP HTML adalah agar webmaster bisa merancang halaman web yang loading cepat, tanpa banyak pengaruh JS atau lainnya. AMP HTML memprioritaskan pengguna Web Mobile.

Untuk CSS tidak ada perubahan apapun, untuk HTML ada sedikit struktur berbeda dalam penulisan, diantaranya seperti tag img atau video menjadi amp-img dan amp-video.


  • Dimulai dengan <!doctype html>
  • Menyertakan <html ⚡> atau <html amp>.
  • Menyertakan <link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui
    versi AMP HTML.
  • Menyertakan <meta charset="utf-8">.
  • Menyertakan <meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head.
  • Menyertakan AMP Javascript Library <script async src="https://cdn.ampproject.org/v0.js"></script> pada tag head.
  • Menyertakan <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> pada tag head.
Maka contoh HTML dasar dari AMP HTML kurang lebih seperti ini :

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>

Lalu Tag yang harus dihindari di postingan
Hindari penggunaan tag HTML dengan CSS inline seperti <div style="text-align: justify;">...</div> ataupun lainnya. atau memasukan javascript atau CSS style ke dalam postingan.

  • Tidak boleh ada dua tag <style>, apabila ada penambahan maka gunakan <style amp-custom>, itupun hanya satu saja yang diizinkan.
  • Tidak boleh membuat inline CSS seperti <aside class='sidebar' style='margin-top:0;padding:10px'>.
  • Script harus external dan menggunakan async.
  • Script tidak diperbolehkan menggunakan attribute type='text/javascript'
  • Seperti di atas, tidak boleh menggunakan tag img tapi harus amp-img
Nanti kita lanjut membahas tentang Tutorial Blog Valid AMP HTML


Use parse tool to easy get the text style on disqus comments:

Show ParserHide Parser