HOSTING CEPATDOMAIN MURAHSSL GRATISSUPPORT 24/7UPTIME 99.9%SERVER INDONESIAHOSTING CEPATDOMAIN MURAHSSL GRATISSUPPORT 24/7UPTIME 99.9%SERVER INDONESIA
Tutorial

AMP untuk Website Indonesia: Panduan Implementasi Accelerated Mobile Pages

Tim HostingEkspres|8 Juni 2026|12 menit baca
amp untuk websiteaccelerated mobile pagesamp wordpressamp htmlamp seomobile web performanceamp indonesiagoogle amp
AMP untuk Website Indonesia: Panduan Implementasi Accelerated Mobile Pages
📚 Baca juga: Cara Optimasi Website | Cara Membuat Website | Cara Membuat Blog

AMP untuk Website: Apa Itu dan Mengapa Sempat Sangat Populer?

AMP untuk website - singkatan dari Accelerated Mobile Pages - adalah framework open-source yang dikembangkan Google dan diluncurkan pada Oktober 2015 dengan satu tujuan utama: membuat halaman web dimuat secepat mungkin di perangkat mobile. AMP mencapai ini dengan membatasi penggunaan JavaScript kustom, mewajibkan CSS inline dengan batas ukuran 50KB, dan memanfaatkan sistem caching Google yang menyimpan konten AMP di server Google sendiri agar bisa disajikan hampir instan.

Pada masa puncaknya (2017-2020), AMP menjadi standar de facto untuk website berita dan konten di seluruh dunia, termasuk Indonesia. Media besar seperti Kompas, Detik, Tribun, dan Tempo semuanya mengimplementasikan AMP untuk meningkatkan kecepatan loading di mobile dan mempertahankan posisi di Google News Carousel - fitur Google yang sempat mensyaratkan AMP.

Namun lanskap AMP telah berubah drastis. Panduan ini akan menjelaskan cara implementasi AMP untuk website secara teknis, kapan AMP masih relevan, dan kapan Anda sebaiknya memilih alternatif lain.

Bagaimana AMP Bekerja: Arsitektur Teknis

AMP untuk website bekerja melalui tiga komponen utama yang saling berkaitan:

amp untuk website
Ilustrasi amp untuk website

1. AMP HTML

AMP HTML adalah subset HTML dengan beberapa aturan dan pembatasan ketat:

  • Tag <img> diganti dengan <amp-img>
  • Tag <video> diganti dengan <amp-video>
  • JavaScript kustom tidak diperbolehkan - semua interaktivitas melalui komponen AMP resmi
  • CSS harus inline (di tag <style amp-custom>) dengan batas maksimal 75.000 byte
  • Semua elemen dengan dimensi yang diketahui harus memiliki atribut width dan height
  • Harus menyertakan boilerplate AMP di bagian head

2. AMP JavaScript Library

Library JavaScript AMP bertanggung jawab untuk mengelola loading resource secara asinkron, mengimplementasikan lazy loading otomatis, dan mengelola prioritas rendering. Library ini di-load dari CDN Google dan tidak bisa dimodifikasi.

3. AMP Cache

Google AMP Cache adalah CDN berbasis proxy yang menyimpan salinan halaman AMP yang valid di server Google. Ketika halaman AMP dimuat dari Google Search, konten disajikan dari cache Google - itulah mengapa loading terasa instan. URL halaman yang di-cache terlihat seperti: https://www-domainanda-com.cdn.ampproject.org/c/s/www.domainanda.com/artikel/

Cara Membuat Halaman AMP dari Nol (AMP HTML)

Berikut struktur minimal halaman AMP untuk website yang valid:

<!doctype html>
<html amp lang="id">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Judul Halaman AMP</title>
  <link rel="canonical" href="https://www.domainanda.com/halaman-asli/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

  <!-- AMP Boilerplate Code (WAJIB, jangan dimodifikasi) -->
  <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}}@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>

  <!-- CSS kustom (maksimal 75.000 byte) -->
  <style amp-custom>
    body {
      font-family: system-ui, sans-serif;
      font-size: 18px;
      line-height: 1.7;
      color: #1a1a1a;
      max-width: 780px;
      margin: 0 auto;
      padding: 0 16px;
    }
    h1 { font-size: 28px; line-height: 1.3; margin: 24px 0 16px; }
    h2 { font-size: 22px; line-height: 1.4; margin: 32px 0 12px; }
    p  { margin: 0 0 16px; }
    a  { color: #1a73e8; }
  </style>
</head>
<body>
  <article>
    <h1>Judul Artikel</h1>

    <!-- Gunakan amp-img, bukan img biasa -->
    <amp-img
      src="/gambar-artikel.jpg"
      alt="Deskripsi gambar artikel"
      width="800"
      height="450"
      layout="responsive">
    </amp-img>

    <p>Konten artikel Anda di sini...</p>
  </article>
</body>
</html>
Penting: Setiap halaman AMP harus memiliki tag <link rel="canonical"> yang menunjuk ke halaman non-AMP asli. Sebaliknya, halaman non-AMP asli harus memiliki <link rel="amphtml"> yang menunjuk ke versi AMP-nya.

Komponen AMP yang Paling Sering Digunakan

AMP menyediakan komponen siap pakai untuk berbagai kebutuhan. Berikut komponen yang paling relevan untuk website Indonesia:

amp-img: Gambar Responsive

<!-- Gambar dengan lazy loading otomatis -->
<amp-img
  src="/foto-produk.jpg"
  srcset="/foto-produk-480.jpg 480w, /foto-produk-800.jpg 800w"
  alt="Foto produk"
  width="800"
  height="600"
  layout="responsive"
  loading="lazy">
  <!-- Fallback jika gambar gagal dimuat -->
  <div fallback>Gambar tidak tersedia</div>
</amp-img>

amp-video: Video Responsive

<script async custom-element="amp-video"
  src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

<amp-video
  src="/video-promo.mp4"
  poster="/thumbnail-video.jpg"
  width="1280"
  height="720"
  layout="responsive"
  controls>
  <div fallback>Browser Anda tidak mendukung video HTML5.</div>
</amp-video>

amp-youtube: Embed YouTube

<script async custom-element="amp-youtube"
  src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

<amp-youtube
  data-videoid="ID_VIDEO_YOUTUBE"
  layout="responsive"
  width="16"
  height="9">
</amp-youtube>
<script async custom-element="amp-carousel"
  src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="3000">
  <amp-img src="/slide-1.jpg" width="400" height="300" layout="responsive" alt="Slide 1"></amp-img>
  <amp-img src="/slide-2.jpg" width="400" height="300" layout="responsive" alt="Slide 2"></amp-img>
  <amp-img src="/slide-3.jpg" width="400" height="300" layout="responsive" alt="Slide 3"></amp-img>
</amp-carousel>

amp-analytics: Tracking Analytics

<script async custom-element="amp-analytics"
  src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXXXXXX",
    "config": {
      "G-XXXXXXXXXX": {
        "groups": "default"
      }
    }
  }
}
</script>
</amp-analytics>

amp-social-share: Tombol Berbagi

<script async custom-element="amp-social-share"
  src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

<!-- Tombol share WhatsApp -->
<amp-social-share type="whatsapp" width="60" height="44"></amp-social-share>

<!-- Tombol share Facebook -->
<amp-social-share type="facebook"
  data-param-app_id="ID_APP_FACEBOOK"
  width="60"
  height="44">
</amp-social-share>

<!-- Tombol share Twitter/X -->
<amp-social-share type="twitter" width="60" height="44"></amp-social-share>
Baca Juga: Cara Optimalkan Website untuk Mobile: Panduan Mobile-First Design dan SEO

Cara Implementasi AMP di WordPress

Cara termudah mengimplementasikan AMP untuk website berbasis WordPress adalah menggunakan plugin resmi. Ada dua pilihan utama:

Plugin AMP (Official)

Plugin AMP yang dikembangkan langsung oleh AMP Project dan Google adalah pilihan paling komprehensif. Plugin ini memiliki tiga mode operasi:

  • Standard mode: Seluruh website diubah menjadi AMP-native. Satu URL untuk semua perangkat. Mode ini paling sederhana secara arsitektur tapi paling membatasi karena semua JavaScript kustom dan banyak plugin tidak kompatibel.
  • Transitional mode: Website memiliki dua versi - URL normal (non-AMP) dan URL AMP (dengan ?amp=1 atau /amp/ suffix). Google menggunakan versi AMP untuk mobile di Search.
  • Reader mode: Hanya konten artikel (post) yang dibuatkan versi AMP dengan template yang sangat disederhanakan. Ini adalah mode paling terbatas secara tampilan tapi paling kompatibel.
// Setelah install dan aktifkan plugin AMP:
// 1. Buka WordPress Admin → AMP → Settings
// 2. Pilih template mode (Standard, Transitional, atau Reader)
// 3. Tentukan post type apa yang akan di-AMP-kan
// 4. Konfigurasi desain dan komponen
// 5. Gunakan AMP Validation tool bawaan plugin untuk cek error

Plugin AMP for WP

Alternatif populer dengan interface yang lebih user-friendly dan dukungan lebih baik untuk berbagai page builder WordPress seperti Elementor dan Divi. Tersedia versi gratis dengan fitur dasar dan versi premium dengan lebih banyak template dan opsi kustomisasi.

Langkah instalasi umum untuk plugin AMP WordPress:

  1. Install plugin dari WordPress repository (Plugins → Add New → cari "AMP")
  2. Aktifkan plugin
  3. Ikuti wizard setup awal untuk memilih mode dan template
  4. Cek halaman AMP dengan menambahkan /amp/ atau ?amp=1 di akhir URL artikel
  5. Validasi dengan Google AMP Validator
amp untuk website
Ilustrasi amp untuk website

Cara Validasi AMP dan Debugging Error

Halaman AMP yang tidak valid tidak akan mendapat manfaat cache Google dan bisa berdampak negatif pada SEO. Selalu validasi setelah implementasi:

Metode 1: Chrome DevTools

Tambahkan #development=1 di akhir URL AMP dan buka Chrome DevTools (F12) → Console. Pesan validasi akan muncul di sana - error ditandai merah, warning ditandai kuning.

Contoh URL untuk debugging: https://www.domainanda.com/artikel/?amp=1#development=1

Metode 2: AMP Validator Online

Kunjungi validator.ampproject.org dan masukkan URL halaman AMP Anda. Validator akan menampilkan daftar error dan warning lengkap beserta baris kode yang bermasalah dan penjelasan cara memperbaikinya.

Error AMP yang Paling Sering Ditemui

Error Penyebab Solusi
The tag 'img' may only appear as a descendant of tag 'noscript' Menggunakan <img> biasa Ganti dengan <amp-img>
The attribute 'style' may not appear in tag Inline style di elemen HTML Pindahkan ke <style amp-custom>
Custom JavaScript is not allowed Ada tag <script> kustom Hapus atau ganti dengan komponen AMP
CSS too long CSS melebihi 75.000 byte Kurangi dan optimasi CSS

AMP dan SEO: Situasi Terkini di 2026

Pemahaman tentang hubungan AMP dan SEO telah berubah sangat signifikan sejak Google mengumumkan bahwa AMP bukan lagi syarat wajib untuk tampil di Google News Carousel atau mendapatkan Top Stories badges di hasil pencarian mulai Juni 2021. Sejak saat itu, halaman non-AMP yang memenuhi syarat Core Web Vitals bisa mendapatkan posisi yang sama dengan halaman AMP.

Apakah AMP Masih Memberikan Keuntungan SEO?

Secara langsung sebagai faktor ranking, Google menyatakan AMP bukan faktor ranking. Yang menjadi faktor ranking adalah Core Web Vitals (LCP, INP, CLS) - dan halaman AMP yang ter-cache di Google biasanya memiliki nilai Core Web Vitals yang baik karena dimuat dari server Google.

Keuntungan AMP yang masih relevan di 2026:

  • Halaman AMP yang valid dan ter-cache tetap memuat sangat cepat dari Google Search
  • Untuk publisher berita yang terdaftar di Google News, AMP masih membantu distribusi konten
  • Di pasar dengan koneksi internet lambat (beberapa daerah di Indonesia), kecepatan AMP masih terasa signifikan

Namun, ada konsekuensi negatif AMP yang harus dipertimbangkan:

  • URL yang ditampilkan di Google Search adalah URL cache Google, bukan URL domain Anda sendiri - ini bisa membingungkan pengguna dan melemahkan brand recognition
  • Kompleksitas tambahan dalam pemeliharaan dua versi halaman (AMP dan non-AMP)
  • Keterbatasan kustomisasi yang bisa mengurangi konversi (tidak bisa menggunakan JavaScript kustom, banyak fitur interaktif tidak tersedia)
  • Analytics lebih kompleks karena traffic dari AMP cache terpisah dari traffic langsung

AMP vs PWA vs Optimasi Standar: Pilih Mana?

Pertanyaan paling umum: kapan harus menggunakan AMP untuk website dan kapan lebih baik memilih alternatif?

Aspek AMP PWA Optimasi Standar
Kecepatan loading awal Sangat cepat (dari cache Google) Cepat (setelah kunjungan pertama) Bervariasi
Kontrol desain Sangat terbatas Penuh Penuh
Fitur interaktif Terbatas pada komponen AMP Penuh (termasuk offline) Penuh
Kompleksitas implementasi Sedang Tinggi Rendah-Sedang
Cocok untuk Website berita/konten Web app, e-commerce Semua jenis website

Rekomendasi untuk 2026:

  • Website berita/media: AMP masih relevan jika terdaftar di Google News dan memprioritaskan distribusi konten dari Google
  • Blog dan website konten umum: Fokus pada optimasi Core Web Vitals standar tanpa AMP - hasilnya bisa setara dengan lebih sedikit kerumitan
  • Website e-commerce: Hindari AMP karena keterbatasan JavaScript akan menghambat fitur checkout, filter produk, dan kustomisasi yang penting untuk konversi
  • Web app: Gunakan PWA sebagai alternatif yang jauh lebih powerful
Baca Juga: Cara Membuat PWA (Progressive Web App): Panduan Lengkap

Monitoring Performa Halaman AMP

Setelah implementasi AMP untuk website, pantau performa menggunakan:

  • Google Search Console: Menu AMP di bagian Enhancements menampilkan error validasi AMP yang ditemukan saat Googlebot mengrayapi website Anda. Ini adalah sumber data paling otoritatif untuk masalah AMP.
  • AMP Analytics: Implementasikan amp-analytics dengan Google Analytics 4 untuk tracking pengunjung halaman AMP. Perhatikan bahwa data dari AMP cache perlu dikonfigurasi terpisah di GA4.
  • PageSpeed Insights: Bandingkan skor performa halaman AMP vs halaman non-AMP untuk mengukur perbedaan yang sebenarnya.
  • Search Console Performance Report: Filter data berdasarkan "Search Appearance: AMP" untuk melihat traffic yang datang dari hasil pencarian AMP.

Hosting Cepat untuk Website AMP dan Non-AMP

Apapun pilihan teknologi Anda - AMP, PWA, atau optimasi standar - hosting yang cepat adalah fondasi segalanya. Server SSD NVMe, SSL gratis, HTTP/2, dan Gzip/Brotli otomatis. Mulai dari Rp 15.000/bulan.

Lihat Paket Hosting

FAQ: Pertanyaan Umum tentang AMP untuk Website

Apakah AMP masih relevan di 2026?

AMP masih relevan untuk use case tertentu, terutama publisher berita yang terdaftar di Google News dan memprioritaskan distribusi konten dari Google Search. Untuk kebanyakan website lain - blog, company profile, e-commerce, portfolio - fokus pada optimasi Core Web Vitals standar dan mobile-friendly design lebih direkomendasikan karena memberikan kontrol penuh tanpa keterbatasan AMP, dengan hasil performa yang kini bisa setara atau bahkan lebih baik.

Apakah AMP menjadi faktor ranking Google?

Tidak secara langsung. Google secara resmi menyatakan bahwa menggunakan AMP bukan faktor ranking. Yang menjadi faktor ranking adalah Core Web Vitals (LCP, INP, CLS) dan sinyal Page Experience lainnya. Halaman AMP yang ter-cache di Google seringkali mendapat nilai Core Web Vitals yang baik karena kecepatan loading dari server Google, tapi efek ranking tersebut berasal dari nilai Core Web Vitals-nya, bukan dari fakta bahwa halaman tersebut adalah AMP.

Apakah bisa menggunakan Google Analytics di halaman AMP?

Ya, menggunakan komponen amp-analytics. Konfigurasi Google Analytics 4 di AMP memerlukan setup khusus karena halaman AMP yang di-cache berjalan di domain Google, bukan domain Anda. Pastikan menggunakan measurement ID GA4 (G-XXXXXXXXXX) dan ikuti dokumentasi resmi AMP untuk konfigurasi yang benar agar data tidak terduplikasi atau terlewat.

Bagaimana cara mengecek apakah halaman sudah terindeks sebagai AMP di Google?

Ada tiga cara: (1) Ketik URL website Anda di Google Search - jika ada petir kecil di samping URL, halaman tersebut adalah AMP. (2) Gunakan Google Search Console → Enhancements → AMP untuk melihat status indexing dan error. (3) Gunakan URL Inspection tool di Google Search Console dan masukkan URL halaman AMP Anda untuk melihat detail status indexing.

Apakah AMP mendukung e-commerce dan form?

AMP mendukung form dasar melalui komponen amp-form, dan ada komponen untuk e-commerce dasar seperti amp-list untuk menampilkan produk dinamis. Namun, untuk e-commerce kompleks dengan keranjang belanja, filter produk, checkout, dan integrasi payment gateway, AMP sangat terbatas dan tidak direkomendasikan. Website e-commerce sebaiknya menggunakan optimasi mobile standar atau PWA.

Apakah URL AMP berbeda dari URL normal?

Ya, halaman AMP yang disajikan dari Google AMP Cache memiliki URL dengan format: https://www-domainanda-com.cdn.ampproject.org/c/s/ diikuti URL asli halaman. Ini bisa membingungkan pengguna yang tidak mengenali URL tersebut sebagai website Anda. Sejak 2020, Google menyediakan "AMP Real URL" yang menampilkan URL domain asli di address bar, tapi implementasinya memerlukan konfigurasi tambahan (signed exchange/SXG).

Bisakah menggunakan WordPress page builder (Elementor, Divi) dengan AMP?

Secara native, tidak - page builder menggunakan JavaScript kustom yang tidak diperbolehkan di AMP. Plugin AMP untuk WordPress memiliki validator kompatibilitas yang akan menampilkan daftar konflik dengan plugin dan page builder yang terpasang. Dalam praktiknya, membuat halaman AMP yang kompatibel dengan Elementor sangat sulit dan sering menghasilkan tampilan yang jauh berbeda dari desain original. Untuk pengguna page builder, lebih direkomendasikan fokus pada optimasi performa standar tanpa AMP.

Artikel Terkait

Tutorial

Cara Optimalkan Website untuk Mobile: Panduan Mobile-First Design & SEO

Panduan lengkap cara optimalkan website untuk mobile, mulai dari prinsip mobile-first design, teknik responsive layout, optimasi kecepatan di perangkat mobile, hingga strategi Mobile SEO agar website Anda mendominasi pencarian dari smartphone.

Baca Selengkapnya →
Tutorial

Cara Optimasi Website: 15 Teknik Ampuh Tingkatkan Performa & SEO

Panduan lengkap cara optimasi website untuk meningkatkan kecepatan loading, peringkat SEO, dan pengalaman pengguna. 15 teknik terbukti yang bisa langsung Anda terapkan.

Baca Selengkapnya →
Web Development

Cara Membuat PWA (Progressive Web App): Panduan Lengkap 2026

Panduan cara membuat PWA dari nol hingga siap diinstall pengguna. Pelajari cara setup Service Worker, Web Manifest, strategi caching, push notification, dan audit Lighthouse step-by-step.

Baca Selengkapnya →

Butuh Hosting untuk Website Anda?

Dapatkan hosting cepat, aman, dan terpercaya dengan harga terjangkau. Gratis domain, SSL, dan support 24/7.

Lihat Paket HostingHubungi Kami

Jangan Ketinggalan Promo!

Subscribe newsletter kami dan dapatkan diskon hingga 50% untuk pembelian pertama kamu.

Gratis, tanpa spam. Bisa unsubscribe kapan saja.