Panduan Cara Pasang AMP Google di Blog Untuk Tampilan Cepat di Perangkat Seluler / Mobile

Warungbaca.com – Mungkin di antara teman Blogger ada yang sudah mendapakan email dari Google sebagai berikut ini:

Google telah mendeteksi bahwa situs Anda memiliki banyak laman yang mungkin bermanfaat untuk ditampilkan sebagai laman AMP. Laman Seluler yang Dipercepat (Accelerated Mobile Pages - AMP) adalah laman HTML yang dioptimalkan agar dimuat dengan cepat di perangkat seluler. Pelajari lebih lanjut tentang manfaat AMP pada sumber daya di bawah.


Laman AMP yang valid di situs Anda akan memenuhi syarat untuk ditampilkan di hasil penelusuran dan mendapatkan lencana khusus di hasil penelusuran. Dan seterusnya.

Untuk membuat laman AMP pertama di blog maka perlu beberapa penempatan kode, seperti di bawah 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,minimum-scale=1,initial-scale=1">
    <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 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>

</html>

Untuk langkah selanjutnya dan selengkapnya silahkan kunjungi langsung di laman https://www.ampproject.org/docs/get_started/about-amp.html. Semoga bemanfaat bagi teman-teman blogger semua.
Reaksi:

Posting Komentar

MKRdezign

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.
Javascript DisablePlease Enable Javascript To See All Widget