{"id":13369,"date":"2024-01-05T07:42:11","date_gmt":"2024-01-05T07:42:11","guid":{"rendered":"https:\/\/zaferinadigital.com\/optimaise\/?p=13369"},"modified":"2024-01-06T09:27:25","modified_gmt":"2024-01-06T09:27:25","slug":"6-cara-mengatur-amp-untuk-meningkatkan-pengalaman","status":"publish","type":"post","link":"https:\/\/zaferinadigital.com\/optimaise\/6-cara-mengatur-amp-untuk-meningkatkan-pengalaman\/","title":{"rendered":"Terapkan 6 Cara Mengatur AMP untuk Meningkatkan Pengalaman Pengguna"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Sebagai upaya meningkatkan pengalaman pengguna di situs webmu, penerapan <em>Accelerated Mobile Pages<\/em> (AMP) menjadi sebuah langkah yang penting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apalagi dalam era yang didominasi oleh perangkat <em>mobile<\/em> ini, pengalaman pengguna yang optimal bisa dianggap sebagai landasan utama kesuksesan sebuah situs web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Melalui AMP yang dioptimalkan, situs webmu dapat meraih keunggulan dalam hal kecepatan akses dan ketersediaan konten yang memastikan bahwa pengunjung dapat dengan mudah menavigasi dan menikmati informasi dengan efisien, bahkan ketika menggunakan perangkat <em>mobile<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Peningkatan kecepatan pemuatan halaman tidak hanya mendukung kepuasan pengguna, tetapi juga dapat memiliki dampak positif pada peringkat pencarian sehingga akhirnya bisa meningkatkan visibilitas situsmu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dengan memahami konsep dasar dan mengikuti panduan langkah demi langkah ini, kamu dapat memastikan bahwa situs webmu tidak hanya bersaing dalam hal konten, tetapi juga dalam hal kecepatan dan pengalaman pengguna.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h4>Table of Contents<\/h4><nav><ol><li><a href=\"#apa-itu-amp\">Apa itu AMP?<\/a><\/li><li><a href=\"#bagaimana-cara-kerja-amp\">Bagaimana Cara Kerja AMP?<\/a><\/li><li><a href=\"#kelebihan-dan-kelemahan-accelerated-mobile-pages\">Kelebihan dan Kelemahan Accelerated Mobile Pages<\/a><\/li><li><a href=\"#cara-mengatur-accelerated-mobile-pages-di-website\">Cara Mengatur Accelerated Mobile Pages di Website<\/a><ol><li><a href=\"#cara-membuat-halaman-amp-dengan-markup-html\">Cara Membuat Halaman AMP dengan Markup HTML<\/a><ol><li><a href=\"#kode-dasar\">Kode Dasar<\/a><\/li><li><a href=\"#menambahkan-gambar\">Menambahkan Gambar<\/a><\/li><li><a href=\"#menambahkan-gaya\">Menambahkan Gaya<\/a><\/li><li><a href=\"#java-script\">JavaScript<\/a><\/li><li><a href=\"#review-dan-validasi\">Review dan Validasi<\/a><\/li><\/ol><\/li><li><a href=\"#cara-membuat-halaman-amp-dengan-cms\">Cara Membuat Halaman AMP dengan CMS<\/a><\/li><\/ol><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"apa-itu-amp\">Apa itu AMP?<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/apa-itu-amp.webp\" alt=\"Apa itu AMP?\" class=\"wp-image-13435\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/apa-itu-amp.webp 960w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/apa-itu-amp-300x169.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/apa-itu-amp-768x432.webp 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">Apa itu AMP?<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">AMP atau yang sebelumnya dikenal sebagai <em>Accelerated Mobile Pages<\/em> adalah suatu kerangka kerja HTML yang bersifat sebagai sumber terbuka yang dirancang khusus untuk menciptakan halaman web yang dioptimalkan untuk perangkat seluler dan dapat dimuat dengan cepat. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dapat dianggap bahwa halaman <em><a href=\"https:\/\/www.semrush.com\/blog\/amp-pages\/\" data-type=\"link\" data-id=\"https:\/\/www.semrush.com\/blog\/amp-pages\/\" rel=\"nofollow noopener\" target=\"_blank\">Accelerated Mobile Pages<\/a><\/em> pada dasarnya merupakan versi yang lebih ringkas dan efisien dari halaman web konvensional. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Proyek ini pertama kali digagas oleh Google sebagai respons terhadap Facebook Instant Articles dan Apple News. Kedua platform tersebut memungkinkan penerbit untuk membuat konten yang dapat diakses dengan cepat dan mudah dikonsumsi oleh pengguna. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Google memperkenalkan halaman <em>Accelerated Mobile Pages <\/em>dalam hasil pencarian seluler pada tahun 2016 yang terbatas pada bagian &#8220;Berita Utama&#8221; di bagian atas halaman hasil pencarian. Meskipun awalnya ditujukan untuk penerbit berita, <em>Accelerated Mobile Pages<\/em> sejak itu berkembang untuk mencakup berbagai jenis halaman web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bagaimana-cara-kerja-amp\">Bagaimana Cara Kerja AMP?<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"677\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/bagaimana-cara-kerja-amp-1024x677.jpg\" alt=\"Bagaimana Cara Kerja AMP?\" class=\"wp-image-13437\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/bagaimana-cara-kerja-amp-1024x677.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/bagaimana-cara-kerja-amp-300x198.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/bagaimana-cara-kerja-amp-768x508.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/bagaimana-cara-kerja-amp-1536x1015.jpg 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/bagaimana-cara-kerja-amp.jpg 1937w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Bagaimana Cara Kerja AMP?<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Kerangka kerja AMP atau <em>Accelerated Mobile Pages<\/em> dirancang dengan tiga komponen dasar yang berperan penting dalam meningkatkan kecepatan dan responsivitas halaman web pada perangkat seluler:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML AMP<\/strong> adalah varian HTML yang dioptimalkan khusus untuk memastikan halaman dapat dimuat dengan cepat. HTML AMP mengandung batasan tertentu dengan menghilangkan atau memodifikasi elemen dan atribut tertentu yang dapat memperlambat pemuatan halaman. Dengan menggunakan HTML AMP, pembuat situs dapat menciptakan halaman web yang lebih efisien dan responsif.<\/li>\n\n\n\n<li><strong>JavaScript AMP<\/strong> mencakup penggunaan JavaScript yang dioptimalkan untuk meningkatkan kinerja halaman web. JavaScript AMP dirancang agar bekerja secara efisien pada perangkat seluler untuk memastikan bahwa interaktivitas halaman tetap cepat dan lancar tanpa mengorbankan kecepatan pemuatan.<\/li>\n\n\n\n<li><strong>AMP Cache<\/strong> adalah layanan penyimpanan <em>cache<\/em> yang disediakan oleh <em>Accelerated Mobile Pages<\/em>. Ini memungkinkan konten halaman web <em>Accelerated Mobile Pages<\/em> disimpan dan diambil dengan lebih cepat oleh server <em>cache<\/em>, mengurangi waktu yang diperlukan untuk memuat halaman saat pengguna mengaksesnya. Dengan menggunakan AMP Cache, konten dapat diakses lebih efisien, terutama pada koneksi internet yang lambat.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Secara bersama-sama, ketiga komponen ini bekerja untuk menciptakan pengalaman pengguna yang lebih baik pada perangkat seluler dengan memastikan halaman web dimuat dengan cepat dan merespons dengan lancar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"kelebihan-dan-kelemahan-accelerated-mobile-pages\">Kelebihan dan Kelemahan Accelerated<em> <\/em>Mobile Pages<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/kelebihan-dan-kelemahan-accelerated-mobile-pages-1024x683.webp\" alt=\"Kelebihan dan Kelemahan Accelerated Mobile Pages\" class=\"wp-image-13439\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/kelebihan-dan-kelemahan-accelerated-mobile-pages-1024x683.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/kelebihan-dan-kelemahan-accelerated-mobile-pages-300x200.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/kelebihan-dan-kelemahan-accelerated-mobile-pages-768x512.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/kelebihan-dan-kelemahan-accelerated-mobile-pages-1536x1024.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/kelebihan-dan-kelemahan-accelerated-mobile-pages.webp 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Kelebihan dan Kelemahan Accelerated Mobile Pages<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Dalam mengejar pengoptimalan performa dan responsivitas laman web, penggunaan <em>Accelerated Mobile Pages<\/em> telah menjadi pilihan yang penting. Namun, sebagaimana halnya dengan teknologi apapun, AMP juga membawa sejumlah kelebihan dan kelemahan yang perlu dipertimbangkan dengan cermat.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk membimbing keputusanmu dengan bijak dalam mengimplementasikan <em>Accelerated Mobile Pages<\/em>, mari eksplorasi lebih lanjut kelebihan dan kelemahan yang menyertainya. Berikut ini adalah beberapa kelebihannya:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Halaman <em>Accelerated Mobile Pages <\/em>dapat dimuat seketika sehingga meningkatkan waktu respon dan mengoptimalkan pengalaman pengguna.<\/li>\n\n\n\n<li>Proses pembuatan halaman ini relatif mudah, memungkinkan pembuat situs dengan berbagai tingkat keahlian untuk mengadopsinya.<\/li>\n\n\n\n<li>Secara khusus dirancang untuk meningkatkan pengalaman pengguna pada perangkat seluler yang membantu mengatasi kendala kecepatan akses di platform mobile.<\/li>\n\n\n\n<li>Meskipun terbatas, halaman <em>Accelerated Mobile Pages<\/em> tetap memungkinkan penggunaan desain khusus yang dapat disesuaikan dengan kebutuhan situs.<\/li>\n\n\n\n<li>Berbagai platform, termasuk mesin pencari, seperti Google dan Bing, mendukung <em>Accelerated Mobile Pages<\/em> sehingga memberikan visibilitas yang lebih besar.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Baca juga: <a href=\"https:\/\/zaferinadigital.com\/optimaise\/catat-9-cara-menurunkan-bounce-rate\/\" data-type=\"link\" data-id=\"https:\/\/zaferinadigital.com\/optimaise\/catat-9-cara-menurunkan-bounce-rate\/\">Catat! 9 Cara Menurunkan Bounce Rate<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Di sisi lain, beberapa kekurangan <em>Accelerated Mobile Pages<\/em> bisa kamu ketahui melalui penjelasan berikut ini:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Google tidak lagi menampilkan ikon lencana <em>Accelerated Mobile Pages<\/em> di hasil pencariannya sehingga mengurangi identifikasi konten <em>Accelerated Mobile Pages<\/em>.<\/li>\n\n\n\n<li>Elemen desain pada halamannya sangat dibatasi untuk mempertahankan fokus pada kecepatan sehingga membatasi fleksibilitas desain situs.<\/li>\n\n\n\n<li>Halamannya hanya memperbolehkan satu tag iklan per halaman. Membatasi opsi monetisasi dan penempatan iklan yang kompleks.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cara-mengatur-accelerated-mobile-pages-di-website\">Cara Mengatur Accelerated Mobile Pages di Website<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-mengatur-accelerated-mobile-pages-di-website-1024x1024.webp\" alt=\"Cara Mengatur Accelerated Mobile Pages di Website\" class=\"wp-image-13447\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-mengatur-accelerated-mobile-pages-di-website-1024x1024.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-mengatur-accelerated-mobile-pages-di-website-300x300.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-mengatur-accelerated-mobile-pages-di-website-150x150.webp 150w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-mengatur-accelerated-mobile-pages-di-website-768x768.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-mengatur-accelerated-mobile-pages-di-website.webp 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Mengatur Accelerated Mobile Pages di Website<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Kamu dapat membuat halaman AMP dengan mengikuti <em>markup<\/em> HTML atau menggunakan CMS melalui <em>plugin<\/em> atau fungsi khusus. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dengan mengadopsi pendekatan manual menggunakan markup HTML, kamu memiliki kendali penuh atas setiap elemen pada halaman <em>Accelerated Mobile Pages<\/em> yang memungkinkan penyesuaian yang lebih mendalam sesuai kebutuhan spesifik situsmu. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Baca juga: <a href=\"https:\/\/zaferinadigital.com\/optimaise\/7-kelebihan-dan-kekurangan-aged-domain-yuk-simak\/\" data-type=\"post\" data-id=\"13451\">7+ Kelebihan dan Kekurang Aged Domain, Yuk Simak!<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sementara itu, banyak CMS menyediakan <em>plugin<\/em> atau fungsi khusus yang memungkinkan pembuat situs membuat halaman <em>Accelerated Mobile Pages<\/em> tanpa perlu menguasai secara detail markup HTML. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pilihan antara pendekatan manual dan menggunakan CMS tergantung pada tingkat kendali dan kenyamanan yang diinginkan oleh pengguna. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nah, kalau kamu menggunakan salah satu di antara keduanya ataupun keduanya sekalipun, berikut ini adalah panduan cara mengatur <em>Accelerated Mobile Pages<\/em> di website. Simak lebih lanjut, yuk!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cara-membuat-halaman-amp-dengan-markup-html\">Cara Membuat Halaman AMP dengan Markup HTML<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"871\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-markup-html.webp\" alt=\"Cara Membuat Halaman AMP dengan Markup HTML\" class=\"wp-image-13442\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-markup-html.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-markup-html-300x255.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-markup-html-768x653.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Membuat Halaman AMP dengan Markup HTML<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Dengan memahami dasar-dasar penulisan <em>markup<\/em> HTML yang mengikuti pedoman <em>Accelerated Mobile Pages<\/em>, kamu dapat memberikan pengalaman pengguna yang optimal pada perangkat seluler. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mari kita telaah cara membuat halaman AMP dengan <em>markup<\/em> HTML, memulai dari kode dasar hingga penataan gaya, dan memastikan halaman kamu memenuhi standar mesin pencari.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"kode-dasar\">Kode Dasar<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk memulai penggunaan <em>Accelerated Mobile Pages<\/em>, berikut adalah kode dasar untuk markup halaman <em>Accelerated Mobile Pages<\/em>. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html&gt;\n&lt;html amp lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"utf-8\"&gt;\n&lt;script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"&gt;&lt;\/script&gt;\n&lt;title&gt;Hello, AMPs&lt;\/title&gt;\n&lt;link rel=\"canonical\" \nhref=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/start\/create\/basic_markup\/\"&gt;\n&lt;meta name=\"viewport\" \ncontent=\"width=device-width,minimum-scale=1,initial-scale=1\"&gt;\n&lt;style amp-boilerplate&gt;body{-webkit-animation:-amp-start 8s \nsteps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s \nsteps(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 \n-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes \n-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes \n-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes \n-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes \n-amp-start{from{visibility:hidden}to{visibility:visible}}&lt;\/style&gt;&lt;noscript&gt;&lt;style \namp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-\nanimation:none;animation:none}&lt;\/style&gt;&lt;\/noscript&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1 id=\"hello\"&gt;Hello AMPHTML World!&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Pada bagian kepala halaman, terdapat tag <code>&lt;head&gt; <\/code>yang berisi informasi penting seperti pengaturan karakter, tautan ke <em>script<\/em> <em>Accelerated Mobile Pages<\/em> dasar, judul halaman, dan tautan ke versi biasa HTML dari halaman tersebut. Selain itu, ada tag <code>&lt;style amp-boilerplate&gt; <\/code>yang bertanggung jawab untuk efek animasi sebelum halaman sepenuhnya dimuat.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Secara keseluruhan, kode ini dirancang untuk memastikan halaman dapat dimuat dengan cepat di perangkat seluler dengan memanfaatkan fitur-fitur khusus dari <em>Accelerated Mobile Pages<\/em>. Meskipun tampak sederhana, keberadaan tag dan atribut tertentu mendukung kecepatan pemuatan dan responsivitas halaman.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"menambahkan-gambar\">Menambahkan Gambar<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Jika kamu ingin menyisipkan gambar ke dalam halaman <em>Accelerated Mobile Pages<\/em>, kamu perlu mengganti tag HTML biasa dengan tag yang sesuai dengan <em>Accelerated Mobile Pages<\/em>, yaitu <code>&lt;amp-img&gt;<\/code> sebagai pengganti dari <code>&lt;img&gt;<\/code>. Untuk mencoba fungsionalitas ini, kamu bisa menyalin dan menempelkan kode berikut ke dalam bagian badan (<code>&lt;body&gt;<\/code>) halaman <em>Accelerated Mobile Pages<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;amp-img src=\"https:\/\/source.unsplash.com\/random\/600x400\" width=\"600\" height=\"400\"&gt;&lt;\/amp-img&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Kode tersebut menggunakan <code>&lt;amp-img&gt;<\/code> untuk menampilkan gambar yang diambil secara acak dari Unsplash dengan ukuran 600&#215;400 piksel. Kamu dapat menyesuaikan atribut src, <em>width<\/em>, dan <em>height<\/em> sesuai dengan gambar yang ingin kamu tampilkan. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"menambahkan-gaya\">Menambahkan Gaya<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Langkah berikutnya adalah menambahkan gaya atau tata letak halamanmu. Pemformatan gaya ini biasanya dilakukan menggunakan properti CSS. Namun, dalam konteks <em>Accelerated Mobile Pages<\/em>, semua CSS ditempatkan dalam tag khusus bernama <code>&lt;style amp-custom&gt;<\/code> yang terletak di dalam tag <code>&lt;head&gt; <\/code>dokumenmu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contohnya, kamu dapat mencoba menambahkan gaya berikut ke halamanmu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style amp-custom&gt;\n    h1 {\n      margin: 1rem;\n    }\n     body {\n      background-color: blue;\n    }\n  &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dalam contoh ini, gaya CSS diterapkan pada elemen <code>&lt;h1&gt; <\/code>dan elemen <code>&lt;body&gt;<\/code>. Aturan CSS menentukan bahwa judul level satu (<code>&lt;h1&gt;<\/code>) memiliki margin sebesar 1rem, sementara latar belakang seluruh halaman (<code>&lt;body&gt;<\/code>) diberikan warna hijau.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"java-script\">JavaScript<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">AMP memberikan dukungan khusus untuk penggunaan JavaScript melalui komponen bernama <code>&lt;amp-script&gt;<\/code>. Ini memberikan kemampuan untuk menulis dan menjalankan kode JavaScript milikmu sendiri dengan memastikan bahwa kinerja <em>Accelerated Mobile Pages<\/em> tetap terjaga.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keunggulan dari penggunaan <code>&lt;amp-script&gt;<\/code> adalah memungkinkan kamu membuat halaman secara cepat tanpa perlu mengkodekan JavaScript atau menggunakan perpustakaan eksternal yang mungkin dapat mempengaruhi kinerja halaman.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dengan kata lain, <em>Accelerated Mobile Pages<\/em> menyediakan alat yang memungkinkan pengembang memanfaatkan JavaScript secara spesifik, memastikan bahwa penerapan tersebut tidak mengorbankan kecepatan dan responsivitas halaman. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Baca juga:<a href=\"https:\/\/zaferinadigital.com\/optimaise\/8-cara-menggunakan-canonical-url-untuk-beragam-cms\/\" data-type=\"link\" data-id=\"https:\/\/zaferinadigital.com\/optimaise\/8-cara-menggunakan-canonical-url-untuk-beragam-cms\/\"> 8 Cara Tepat Menggunakan Canonical URL untuk Berbagai CMS<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kamu dapat memeriksa panduan <em>Accelerated Mobile Pages<\/em> yang merinci cara menggunakan JavaScript khusus, dan mengikuti tutorial AMP JS untuk memulai penggunaan fitur ini dengan lebih mendalam.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"review-dan-validasi\">Review dan Validasi<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Halaman AMP yang valid menunjukkan bahwa halaman tersebut mengikuti pedoman ketat, memastikan bahwa hal itu memenuhi syarat untuk disimpan dalam <em>cache<\/em> dan memberikan pengalaman pengguna yang optimal. Sebelum memvalidasi halaman <em>Accelerated Mobile Pages<\/em>, penting untuk mengikuti praktik terbaik berikut:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Jika kamu mengoptimalkan untuk Google, patuhi pedoman resmi mereka untuk halaman <em>Accelerated Mobile Pages<\/em>.<\/li>\n\n\n\n<li>Pastikan terdapat tautan dari halaman AMP ke versi non-AMP (canonical) atau sebaliknya.<\/li>\n\n\n\n<li>Gunakan <em>markup<\/em> data terstruktur yang serupa di halaman AMP dan versi non-AMP, serta pastikan untuk menguji fungsionalitasnya dengan Rich Results Test.<\/li>\n\n\n\n<li>Periksa file robots.txt untuk memastikan tidak ada pemblokiran terhadap halaman AMP.<\/li>\n\n\n\n<li>Ikuti panduan <a href=\"https:\/\/zaferinadigital.com\/optimaise\/panduan-belajar-seo\/\" data-type=\"link\" data-id=\"https:\/\/zaferinadigital.com\/optimaise\/panduan-belajar-seo\/\">SEO<\/a> internasional hreflang jika diperlukan.<\/li>\n\n\n\n<li>Sebelum melakukan peninjauan, gunakan AMP Test Tool untuk memverifikasi bahwa halamanmu mematuhi semua persyaratan.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk panduan lebih rinci, kamu dapat merujuk ke tutorial resmi <em>Accelerated Mobile Pages<\/em> tentang cara memvalidasi halaman <em>Accelerated Mobile Pages<\/em>. Jika kamu masih baru dalam pengembangan web, ada pula kursus AMP dari Google yang dapat membantumu memahami konsep ini dengan lebih baik.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cara-membuat-halaman-amp-dengan-cms\">Cara Membuat Halaman AMP dengan CMS<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-cms-1024x651.webp\" alt=\"Cara Membuat Halaman AMP dengan CMS\" class=\"wp-image-13445\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-cms-1024x651.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-cms-300x191.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-cms-768x488.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-cms-1536x977.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2024\/01\/cara-membuat-halaman-amp-dengan-cms.webp 1588w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Membuat Halaman AMP dengan CMS<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Jika kamu mengelola konten melalui sistem manajemen konten (CMS), seperti Drupal, Joomla, atau WordPress, kamu dapat memanfaatkan keuntungan <em>Accelerated Mobile Pages<\/em> untuk meningkatkan responsivitas dan kecepatan halaman. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sebagai contoh, mari kita lihat bagaimana kamu dapat menggunakan <em>Accelerated Mobile Pages<\/em> dengan WordPress.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Buka dasbor WordPress.<\/li>\n\n\n\n<li>Pergi ke &#8220;Plugin&#8221; dan klik &#8220;Tambah Baru&#8221;.<\/li>\n\n\n\n<li>Cari &#8220;AMP&#8221; di kotak pencarian.<\/li>\n\n\n\n<li>Temukan plugin &#8220;AMP for WordPress&#8221; (umumnya dikembangkan oleh Automattic) dan instal serta aktifkan.<\/li>\n\n\n\n<li>Setelah mengaktifkan plugin, buka atau tambahkan halaman baru atau posting di WordPress.<\/li>\n\n\n\n<li>Di dalam editor, kamu akan melihat opsi &#8220;Mulai Pembuat Halaman AMP&#8221;. Klik pada opsi ini untuk masuk ke pembuat halaman khusus untuk AMP.<\/li>\n\n\n\n<li>Dalam pembuat halaman <em>Accelerated Mobile Pages<\/em>, kamu dapat memilih tata letak yang sudah ada atau membuat tata letak khusus sendiri. Beberapa plugin menyertakan elemen seret dan lepas, memudahkan kamu mengatur struktur halaman tanpa perlu pengetahuan koding yang mendalam.<\/li>\n\n\n\n<li>Klik ikon roda gigi atau opsi pengaturan setiap elemen halaman untuk mengeditnya.<\/li>\n\n\n\n<li>Pastikan untuk menyimpan setiap perubahan yang kamu buat saat mengonfigurasi tata letak dan elemen halaman.<\/li>\n\n\n\n<li>Setelah selesai mengonfigurasi halaman, publikasikan halaman tersebut. <\/li>\n\n\n\n<li>Kamu kemudian dapat melihat versi <em>Accelerated Mobile Pages<\/em> dari halaman tersebut dengan menambahkan &#8220;amp&#8221; di akhir URL halaman (contoh: https:\/\/namadomain.com\/namahalaman\/amp).<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah mengaplikasikan beberapa cara membuat halaman <em>Accelerated Mobile Pages<\/em> di website ini, tahap selanjutnya tentu memantau dan meningkatkan halaman <em>Accelerated Mobile Pages<\/em> melalui audit situs secara berkala menjadi praktik terbaik untuk memastikan kinerja optimal dan pengalaman pengguna yang baik.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mengoptimalkan halaman AMP bukan hanya tentang kepatuhan terhadap pedoman, tetapi juga tentang meningkatkan efisiensi dan kinerja keseluruhan situs. Dalam menghadapi kompleksitas ini, pilihan yang bijak adalah mencari bantuan dari penyedia <a href=\"https:\/\/zaferinadigital.com\/optimaise\/jasa-seo\/\" data-type=\"link\" data-id=\"https:\/\/zaferinadigital.com\/optimaise\/jasa-seo\/\">jasa SEO<\/a> yang berpengalaman. Jangan ragu untuk menjelajahi layanan dari <a href=\"https:\/\/zaferinadigital.com\/optimaise\/\" data-type=\"link\" data-id=\"https:\/\/zaferinadigital.com\/optimaise\/\">Optimaise<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sebagai upaya meningkatkan pengalaman pengguna di situs webmu, penerapan Accelerated Mobile Pages (AMP) menjadi sebuah<\/p>\n","protected":false},"author":12,"featured_media":13434,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"categories":[24,25],"tags":[21,36,11,37],"class_list":["post-13369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing","category-seo","tag-digital-marketing","tag-edukasi","tag-seo","tag-website","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"acf":[],"_links":{"self":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts\/13369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/comments?post=13369"}],"version-history":[{"count":0,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts\/13369\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media\/13434"}],"wp:attachment":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media?parent=13369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/categories?post=13369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/tags?post=13369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}