Cara Membuat dan Menggunakan AMP di Blogger

Pembahasan Artikel BabaKBeluR.com kali ini, Cara Membuat dan Menggunakan AMP di Blogger

AMP website

AMP adalah Kode sumber terbuka yang menyediakan cara mudah untuk membuat halaman website yang menarik, halus, dan memuat secara instan bagi pengguna. Halaman AMP hanya halaman website yang dapat Anda tautkan dan dikontrol oleh Anda.

AMP dibangun di atas keahlian dan kerangka kerja yang ada untuk membuat halaman website. AMP didukung oleh banyak platform berbeda, dan kompatibel di semua browser.

Hubungan Timbal Balik AMP mencakup 25 juta domain, 100+ penyedia teknologi, dan platform terkemuka, yang menjangkau area penerbitan, periklanan, e-commerce, bisnis lokal dan kecil, dan banyak lagi!

Halaman AMP dibangun dengan 3 Dasar komponen inti:

1. HTML AMP

HTML AMP adalah HTML dengan beberapa batasan untuk kinerja yang andal.

HTML AMP pada dasarnya adalah HTML yang diperpanjang dengan properti AMP khusus. File HTML AMP paling sederhana terlihat seperti ini di bawah ini:

Spoiler:

Hint


<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>Hello World!</body>
</html>

Meskipun sebagian besar tag di halaman HTML AMP adalah tag HTML biasa, beberapa tag HTML diganti dengan tag khusus AMP (lihat juga Tag HTML dalam spesifikasi AMP). Elemen khusus ini, yang disebut komponen HTML AMP, membuat pola umum mudah diterapkan dengan cara yang praktis.

Misalnya, tag amp-img menyediakan dukungan srcset lengkap bahkan di browser yang belum mendukungnya. Pelajari cara membuat halaman HTML AMP pertama Anda.

Halaman AMP ditemukan oleh mesin pencari dan platform lain melalui tag <  link rel  =" "  > HTML. Kalian boleh memilih untuk memiliki versi non-AMP dan versi AMP halaman Anda, atau hanya versi AMP. Pelajari lebih lanjut dalam Membuat Halaman Anda Dapat Ditemukan.

Recommended Author


2. AMP JS

Kode JS AMP memastikan perenderan cepat dari halaman HTML AMP.

Kode JS AMP menerapkan semua praktik kinerja terbaik AMP, mengelola pemuatan sumber daya dan memberi Anda tag khusus yang disebutkan di atas, semua untuk memastikan perenderan cepat halaman Anda.

Di antara pengoptimalan terbesar adalah kenyataan bahwa ia membuat segala sesuatu yang berasal dari sumber eksternal tidak sinkron, sehingga tidak ada apa pun di halaman yang dapat memblokir apa pun dari perenderan.

Teknik kinerja lainnya termasuk sandboxing semua iframes, pra-perhitungan tata letak setiap elemen di halaman sebelum sumber daya dimuat dan menonaktifkan pemilih CSS yang lambat.

3. Cache AMP

Cache AMP Google dapat digunakan untuk menayangkan halaman HTML AMP yang disimpan dalam cache.

Google AMP Cache adalah jaringan pengiriman konten berbasis proxy untuk mengirimkan semua dokumen AMP yang valid. Ini mengambil halaman HTML AMP, meng-cache mereka, dan meningkatkan kinerja halaman secara otomatis. Saat menggunakan Google AMP Cache, dokumen, semua file JS dan semua gambar memuat dari asal yang sama yang menggunakan HTTP 2.0 untuk efisiensi maksimum. Cache ini juga dilengkapi dengan sistem validasi built-in yang menegaskan bahwa halaman dijamin berfungsi, dan itu tidak bergantung pada sumber daya eksternal. Sistem validasi menjalankan serangkaian pernyataan yang menegaskan bahwa markup halaman memenuhi spesifikasi HTML AMP.

Versi lain validator hadir dibundel dengan setiap halaman AMP. Versi ini dapat mencatat kesalahan validasi langsung ke konsol browser saat halaman dirender, memungkinkan Anda untuk melihat bagaimana perubahan kompleks dalam kode Anda dapat memengaruhi kinerja dan pengalaman pengguna.

Baca Artikel Tentang Cara Memasang Iklan Adsense Ditengah Postingan Valid AMP DI SINI
Related Keyword: amp website, cara menggunakan google amp, google amp check, amp blog, gambar amp, cara membuat blog amp, tag amp, cara membuat template amp, test amp blog, cara amp blogger, cara membuat halaman amp
Reaction:

BabaK BeluR Channel Merupakan Sumber Informasi dan Pengetahuan Serta Sarana Untuk Membangun Masyarakat Yang Gemar Membaca Sehingga Menjadikan Masyarakat Gemar Menulis

Disqus Comments

This website uses cookies to ensure you get the best experience on our website. More Info