» » Cara membuat Template Blogger/Blogspot menjadi AMP (Accelerated Pages Ponsel) Bagian 1

Cara membuat Template Blogger/Blogspot menjadi AMP (Accelerated Pages Ponsel) Bagian 1


Cara membuat Template Blogger/Blogspot menjadi AMP (Accelerated Pages Ponsel)

Cara Membuat Google AMP Blogger?

Apa AMP? / Apa Accelarated Pages Ponsel?

AMP adalah cara untuk membangun halaman mobile untuk konten statis yang membuat cepat. AMP JS perpustakaan menjamin render cepat halaman web AMP. Google memperkenalkan AMP dengan visi yang penerbit dapat membuat konten mobile dioptimalkan sekali dan telah itu memuat langsung di mana-mana.

Apa Google AMP Cache?

Cara membuat Template Blogger/Blogspot menjadi AMP (Accelerated Pages Ponsel) Bagian 1


Google AMP Cache hanyalah sebuah jaringan pengiriman konten berbasis proxy yang memberikan semua dokumen AMP valid. Ini mengambil AMP halaman HTML, cache mereka, dan meningkatkan kinerja halaman secara otomatis. Google AMP Cache memuat dokumen, semua gambar dan file JS dari asal yang sama yang menggunakan HTTP 2.0 untuk memberikan efisiensi maksimum. 
Contoh - 
URL dari halaman blog ini host di Blogger Platform - amprandom.blogspot.in/p/amp- blogger.html - Loading Time - 627ms 
URL halaman blog ini host di Google AMP Cache - www.google.co.in/amp/amprandom.blogspot.in/p/amp-blogger.html - Loading Time - 406ms
Mengapa tidak ada AMP Blogger?

Meskipun Pages Ponsel Dipercepat adalah proyek Google yang didukung dan Blogspot adalah platform blogging Google, "Blogger saat ini tidak mendukung AMP HTML." Jadi itu untuk Google untuk menjawab. Tapi kita tidak bisa membiarkan hal itu menjadi seperti itu, Bisakah? Jadi ikuti langkah-langkah dan menciptakan merek Anda baru AMP Blog.


Langkah Pertama
Buat Halaman Page AMP Pertama

Tidak yakin bagaimana untuk memulai? Dalam tutorial ini, Anda akan belajar bagaimana untuk membuat halaman AMP HTML dasar, bagaimana tahap dan memvalidasi bahwa itu AMP compliant, dan akhirnya bagaimana untuk mendapatkannya siap untuk publikasi dan distribusi.

1. Buat Halaman Page AMP HTML

Markup berikut adalah titik awal yang layak atau boilerplate. Copy ini dan simpan ke sebuah file dengan ekstensi .html.


<! doctype html> 
<html  amp  lang = "en" > 
  <head> 
    <meta  charset = "utf-8" > 
    <script async  src = "https://cdn.ampproject.org/v0.js" > </ script> 
    <title> Hello, AMP </ title> 
    <link  rel = "canonical"  href = "http://example.ampproject.org/article-metadata.html"  /> 
    <meta  name = "viewport"  content = " width = perangkat-lebar, minimal skala = 1, awal skala = 1 " > 
    <script type = " application / ld + json " > 
      { 
        " @context " :  " http://schema.org " , 
        " @type " :  " NewsArticle " , 
        " judul " :  " kerangka open-source untuk menerbitkan konten " , 
        " DatePublished " :  " 2015-10-07T12: 02: 41Z " , 
        " gambar " :  [ 
          " logo.jpg " 
        ] 
      } 
    </ script> 
    <style amp-boilerplate > body { - webkit - animasi : - amp - mulai  8s  langkah ( 1 , end )  0s  1  yang normal  kedua ; - moz - animasi : - amp - mulai  8s  langkah ( 1 , end )  0s  1  yang normal  kedua ; - ms - animasi : - amp - mulai  8s  langkah ( 1 , end )  0s  1  yang normal  kedua ; animasi : - amp - mulai  8s  langkah ( 1 , end )  0s  1  yang normal  kedua } @ -webkit-keyframes  -amp-start { dari { visibility : hidden } ke { visibility : terlihat }} @ -moz-keyframes  -amp-start { dari { visibility : hidden } ke { visibility : terlihat }} @ -MS-keyframes  -amp-start { dari { visibilitas : tersembunyi } ke { visibility : terlihat }} @ -o-keyframes  -amp-start { dari { visibility : hidden } ke { visibility : terlihat }} @keyframes  -amp-start { dari { visibility : hidden } ke { visibility : terlihat }} </ style> <noscript> <style amp-boilerplate > body { - webkit - animasi : none ; - moz - animasi : none ; - ms - animasi : none ; animasi : none } </ style> </ noscript > 
  </ head> 
  <body> 
    <h1> Selamat datang di web mobile </ h1> 
  </ body> 
</ html>
Isi di dalam tubuh, sejauh ini, cukup sederhana. Tapi ada banyak kode tambahan di kepala halaman yang mungkin tidak segera jelas. Mari kita mendekonstruksi diperlukan mark-up.

Diperlukan Mark-Up
dokumen HTML AMP HARUS:
  • Mulailah dengan DOCTYPE <!doctype html>.
  • Mengandung tingkat atas <html ⚡>tag ( <html amp>diterima juga).
  • Mengandung <head>dan <body>tag (Mereka adalah opsional dalam HTML).
  • Mengandung <meta charset="utf-8">tag sebagai anak pertama dari mereka <head>tag.
  • Mengandung <script async src="https://cdn.ampproject.org/v0.js"></script>tag sebagai anak kedua dari mereka <head>tag (termasuk dan beban perpustakaan AMP JS).
  • Berisi <link rel="canonical" href="$SOME_URL" />tag di dalam mereka <head>tag yang menunjuk ke versi HTML biasa dari dokumen AMP HTML atau untuk dirinya sendiri jika ada versi HTML seperti itu.
  • Berisi <meta name="viewport" content="width=device-width,minimum-scale=1">tag di dalam mereka<head>tag. Ini juga dianjurkan untuk menyertakan awal skala = 1.
  • Berisi sebagai berikut di mereka <head>tag: <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>

Optimal Meta Data
Selain persyaratan telanjang, sampel kami juga mencakup definisi Schema.org di kepala, yang bukan merupakan persyaratan ketat untuk AMP, tetapi adalah suatu kebutuhan untuk mendapatkan konten Anda didistribusikan di tempat-tempat tertentu, misalnya di Google berita Pencarian Demo carousel (coba di ponsel) .
Untuk mempelajari lebih lanjut tentang semua meta-data yang Anda perlukan di berbagai tempat lainnya, yaitu Twitter, mengeksplorasi sampel kami . Untuk mempelajari secara khusus tentang AMP di Google Search, lihat Top Stories dengan AMP .
Kabar baik! Itu saja yang kita butuhkan untuk membuat halaman AMP pertama kami, tapi tentu saja, tidak ada banyak hal yang terjadi di dalam tubuh belum. Pada bagian berikutnya, kita akan membahas bagaimana menambahkan dasar-dasar seperti gambar, elemen AMP kustom, bagaimana gaya halaman Anda dan bekerja di luar tata letak responsif.

loading...
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Related Post:

Back To Top