Skip to main content
← Back to blog

Panduan SEO Langkah 5: UX / Pengalaman Pengguna — Bagaimana Pengalaman Pengunjung di Situs Anda Mempengaruhi Peringkat

·16 min read·by LANGR SEO

Panduan SEO Langkah 5: UX / Pengalaman Pengguna

Ini adalah Langkah 5 dari Panduan SEO 13 Langkah. Pengalaman pengguna kini menjadi faktor peringkat langsung — Google mengukur bagaimana pengunjung berinteraksi dengan situs Anda dan memberikan penghargaan kepada situs yang menawarkan pengalaman yang cepat, dapat diakses, dan menyenangkan.


Strategi konten (Langkah 3) menentukan apa yang Anda terbitkan. Linkbuilding (Langkah 4) membuktikan otoritas Anda. Namun, jika pengunjung mendarat di halaman Anda dan langsung meninggalkan karena lamban, rusak di perangkat seluler, atau tidak dapat diakses — semua itu tidak berarti. Google melacak sinyal-sinyal ini dan menggunakannya untuk menyesuaikan peringkat.

Sejak 2021, pembaruan Pengalaman Halaman Google menjadikan UX sebagai faktor peringkat yang terkonfirmasi. Pada 2024, INP (Interaction to Next Paint) menggantikan FID sebagai Core Web Vital. Pada 2026, sinyal-sinyal ini menjadi semakin penting saat Google semakin memprioritaskan metrik kepuasan pengguna dibandingkan sinyal tradisional.

Apa Saja yang Dicakup UX untuk SEO

Optimisasi UX untuk SEO mencakup 6 area:

  1. Core Web Vitals — Metrik UX resmi Google (LCP, INP, CLS)
  2. Optimisasi Seluler — Desain responsif, target sentuh, viewport
  3. Aksesibilitas (WCAG) — Membuat situs Anda dapat digunakan oleh semua orang
  4. Sinyal Pengalaman Halaman — HTTPS, tanpa interstitial, penjelajahan yang aman
  5. Pola Navigasi — Struktur situs yang membantu pengguna dan crawler
  6. Optimisasi di Atas Lipatan — Apa yang dilihat pengguna tanpa menggulir

1. Core Web Vitals (CWV)

Core Web Vitals adalah tiga metrik UX yang terukur dari Google. Metrik ini dilacak dalam data Chrome User Experience Report (CrUX) dan secara langsung mempengaruhi peringkat.

Tiga metrik tersebut:

MetrikUkuranBaikPerlu PeningkatanBuruk
LCP (Largest Contentful Paint)Kecepatan muat< 2,5s2,5s - 4,0s> 4,0s
INP (Interaction to Next Paint)Responsivitas< 200ms200ms - 500ms> 500ms
CLS (Cumulative Layout Shift)Stabilitas visual< 0,10,1 - 0,25> 0,25

LCP — Largest Contentful Paint

LCP mengukur seberapa cepat konten utama halaman Anda menjadi terlihat. "Konten terbesar" biasanya adalah gambar hero Anda, judul utama, atau blok terbesar yang terletak di atas lipatan.

Masalah LCP umum dan solusinya:

MasalahDampakSolusi
Gambar hero yang tidak dioptimalkan+2-5sFormat WebP, ukuran yang tepat, fetchpriority="high"
CSS/JS yang memblokir rendering+1-3sInline CSS penting, tunda pemrosesan yang tidak penting
Respons server yang lambat (TTFB)+1-4sCDN, caching server, penyebaran tepi
Font web yang memblokir rendering+0.5-2sfont-display: swap, preload font penting
Skrip pihak ketiga+1-3sTunda widget analitik/chat, lazy load iklan

Prioritas optimisasi LCP:

<!-- 1. Preload gambar LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. Inline CSS penting (14KB pertama) -->
<style>/* Gaya di atas lipatan saja */</style>

<!-- 3. Tunda CSS yang tidak penting -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. Gambar hero dengan dimensi eksplisit -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Teks alt deskriptif">

Poin cepat: Jalankan PageSpeed Insights di halaman utama Anda. Lihat elemen LCP yang diidentifikasi. Jika itu adalah gambar, konversi ke format WebP, setel lebar/tinggi eksplisit, dan tambahkan fetchpriority="high". Ini saja sering mengurangi LCP hingga 1-2 detik.

INP — Interaction to Next Paint

INP mengukur seberapa cepat halaman Anda merespons saat pengguna berinteraksi (klik, ketuk, ketik). Ini melacak interaksi terburuk selama kunjungan halaman dan menggunakan itu sebagai skor.

Masalah INP umum dan solusinya:

MasalahDampakSolusi
Tugas JavaScript yang panjang+200-1000msPecah menjadi tugas yang lebih kecil, gunakan requestIdleCallback
Pengendali acara yang berat+100-500msDebounce, throttle, gunakan requestAnimationFrame
Pelacakan layout+50-300msBatch pembacaan/penulisan DOM, gunakan will-change
Skrip pihak ketiga+100-500msTunda, muat setelah interaksi, gunakan Web Workers
Panggilan API sinkron+200-2000msAsync/await, state loading, UI optimis

Teknik optimisasi INP:

// Buruk: Memblokir thread utama
button.addEventListener('click', () => {
  const data = heavyComputation(); // Memblokir selama 400ms
  updateDOM(data);
});

// Baik: Memberi jalan pada thread utama
button.addEventListener('click', async () => {
  // Tampilkan umpan balik seketika
  button.textContent = 'Memuat...';

  // Pecah pekerjaan berat menjadi bagian
  await scheduler.yield();
  const data = heavyComputation();

  await scheduler.yield();
  updateDOM(data);
});

Poin cepat: Buka Chrome DevTools > tab Performa. Klik melalui situs Anda dan cari "Long Tasks" (segitiga merah). Ini menghalangi thread utama. Tugas panjang terbesar biasanya adalah skrip pihak ketiga — tunda atau muat setelah interaksi pertama.

CLS — Cumulative Layout Shift

CLS mengukur stabilitas visual — seberapa banyak konten halaman melompat saat dimuat. Tidak ada yang lebih frustrasi daripada mengklik sebuah tombol dan halaman bergerak sehingga Anda mengklik yang lain.

Masalah CLS umum dan solusinya:

MasalahDampak CLSSolusi
Gambar tanpa dimensi0.1-0.5Selalu atur width dan height
Iklan yang dimuat terlambat0.1-0.3Cadang ruang dengan min-height
Font web yang menyebabkan reflow0.05-0.2font-display: optional atau fallback yang disesuaikan
Penyisipan konten dinamis0.1-0.4Cadang ruang, gunakan content-visibility
Banner cookie yang mendorong konten0.05-0.2Desain overlay (bukan push-down)

Daftar periksa pencegahan CLS:

<!-- Selalu tetapkan dimensi untuk media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Cadang ruang untuk konten dinamis -->
<div style="min-height: 250px;">
  <!-- Iklan akan dimuat di sini tanpa pergeseran -->
</div>

<!-- Gunakan aspect-ratio untuk media responsif -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Poin cepat: Tambahkan atribut lebar width dan height yang eksplisit pada setiap dan di 10 halaman teratas Anda. Perubahan tunggal ini menghilangkan masalah CLS yang paling umum — gambar yang dimuat dan mendorong konten ke bawah.

2. Optimisasi Seluler

Google menggunakan pengindeksan berbasis seluler — pengalaman seluler Anda adalah pengalaman peringkat Anda. Jika situs Anda rusak di seluler, tidak ada artinya seberapa sempurna versi desktopnya.

Daftar periksa optimisasi seluler:

ElemenPersyaratanKegagalan umum
Meta viewportwidth=device-width, initial-scale=1Sepenuhnya hilang
Target sentuhMinimum 44x44pxTautan kecil, tombol sesak
Ukuran fontMinimum 16px untuk teks tubuh12px tidak terbaca di seluler
Lebar kontenTidak ada scrolling horizontalElemen lebar tetap
Jarak ketuk8px minimum antara targetTautan bersebelahan saling menempel
Gambar responsifsrcset dengan ukuran yang sesuaiGambar berukuran desktop di seluler

Pola desain responsif:

/* Pendekatan mobile-first */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Target ramah sentuh */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Tipografi responsif */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }

/* Tidak ada overflow horizontal */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Sinyal SEO seluler yang diperiksa Google:

  • Teks terbaca tanpa memperbesar
  • Tautan/tombol tidak terlalu dekat
  • Konten sesuai dengan lebar viewport (tidak ada scroll horizontal)
  • Tidak ada teknologi Flash atau yang tidak didukung
  • Interstitial tidak memblokir konten saat masuk
  • Halaman dimuat dengan cepat di koneksi 4G/3G

Poin cepat: Buka situs Anda di ponsel. Coba klik setiap tombol dan tautan. Jika Anda secara tidak sengaja mengetuk hal yang salah karena target terlalu dekat, atau jika Anda perlu memperbesar untuk membaca teks — itulah perbaikan yang harus diprioritaskan.

3. Aksesibilitas (WCAG)

Aksesibilitas bukan hanya etika — ini adalah sinyal SEO. Algoritma Google lebih menyukai situs yang dapat digunakan oleh semua orang, termasuk pengguna dengan pembaca layar, navigasi hanya dengan keyboard, atau gangguan visual. Kepatuhan WCAG (Pedoman Aksesibilitas Konten Web) berkorelasi dengan peringkat yang lebih baik.

Persyaratan aksesibilitas kritis:

ElemenPersyaratanDampak SEO
Teks alt pada gambarTeks deskriptif untuk semua gambar yang berartiLangsung (SEO gambar + aksesibilitas)
Hierarki headingH1 → H2 → H3 tanpa melompatiLangsung (struktur konten)
Kontras warna4.5:1 untuk teks normal, 3:1 untuk teks besarTidak langsung (kebergunaan)
Navigasi keyboardSemua elemen interaktif dapat dijangkau melalui TabTidak langsung (kebergunaan)
Label ARIALabel untuk ikon, tombol tanpa teksTidak langsung (UX pembaca layar)
Indikator fokusCincin fokus yang terlihat pada navigasi keyboardTidak langsung (kebergunaan)
Label formulirSetiap input memiliki yang terkaitTidak langsung (kebergunaan)
Teks tautanDeskriptif (bukan "klik di sini")Langsung (SEO teks jangkar)

Proses pengujian aksesibilitas:

  1. Pemindaian otomatis — Jalankan Lighthouse, axe-core, atau WAVE (menangkap ~30-50% masalah)
  2. Tes keyboard — Navigasi seluruh situs Anda hanya menggunakan Tab, Enter, Escape
  3. Tes pembaca layar — Gunakan VoiceOver (Mac) atau NVDA (Windows) pada halaman kunci
  4. Kontras warna — Periksa semua teks terhadap latar belakang (gunakan pemeriksa kontras DevTools)
  5. Tes zoom — Zoom hingga 200% — apakah semuanya masih berfungsi?

Perbaikan aksesibilitas umum:

<!-- Gambar: teks alt deskriptif -->
<img src="chart.png" alt="Diagram batang menunjukkan peningkatan 40% dalam lalu lintas organik dari Januari hingga Maret 2026">

<!-- Tombol: label yang jelas -->
<button aria-label="Tutup menu navigasi">
  <svg>...</svg> <!-- Tombol dengan ikon saja perlu aria-label -->
</button>

<!-- Formulir: label yang terkait -->
<label for="email">Alamat email</label>
<input type="email" id="email" name="email" required>

<!-- Tautan: teks deskriptif -->
<a href="/guide">Baca panduan SEO lengkap</a>
<!-- BUKAN: <a href="/guide">Klik di sini</a> -->

<!-- Lewati navigasi untuk pengguna keyboard -->
<a href="#main-content" class="skip-link">Lewati ke konten utama</a>

Poin cepat: Jalankan Lighthouse di halaman utama Anda dengan kategori Aksesibilitas. Perbaiki semua yang diberi skor "Fails" terlebih dahulu — ini biasanya berupa teks alt yang hilang, label formulir yang hilang, dan teks dengan kontras rendah. Perbaikan ini sering memakan waktu 30 menit dan meningkatkan skor Anda lebih dari 20 poin.

4. Sinyal Pengalaman Halaman

Selain Core Web Vitals, Google mengevaluasi beberapa sinyal pengalaman halaman lainnya yang mempengaruhi peringkat.

Faktor pengalaman halaman:

SinyalPersyaratanPeriksa
HTTPSSeluruh situs disajikan melalui HTTPSKonten campuran merusaknya
Tanpa interstitial intrusifJangan memblokir konten saat datangPopup yang menutupi >30% di seluler
Penjelajahan yang amanTanpa malware, phishing, konten menipuStatus Penjelajahan Aman Google
Ramah selulerLulus tes ramah selulerTes Ramah Seluler Google
Tanpa iklan menipuIklan tidak menyerupai kontenTombol unduh yang tersembunyi

Pedoman interstitial (apa yang diperbolehkan vs. yang dihukum):

DiperbolehkanDihukum
Verifikasi usia (diperlukan secara hukum)Popup layar penuh saat masuk halaman
Persetujuan cookie (diperlukan secara hukum)Pendaftaran email menutupi seluruh konten
Tembok login untuk konten berbayar"Unduh aplikasi kami" memblokir konten
Banner kecil menggunakan <30% layarTimer hitung mundur sebelum akses konten
Setelah pengguna menggulir/berinteraksiSebelum pengguna melihat konten apapun

Daftar periksa HTTPS:

  • [ ] Sertifikat SSL valid dan tidak kadaluarsa
  • [ ] Semua halaman mengalihkan HTTP → HTTPS (301)
  • [ ] Tidak ada konten campuran (sumber HTTP pada halaman HTTPS)
  • [ ] Header HSTS diaktifkan (dengan includeSubDomains)
  • [ ] Tautan internal menggunakan HTTPS (bukan HTTP)
  • [ ] Sitemap menggunakan URL HTTPS
  • [ ] Tag kanonik menggunakan HTTPS

Poin cepat: Periksa konten campuran — buka Konsol DevTools di halaman kunci Anda. Setiap peringatan "Mixed Content" berarti Anda memuat sumber HTTP di halaman HTTPS. Perbarui URL tersebut ke HTTPS. Ini adalah salah satu masalah pengalaman halaman yang paling umum.

5. Pola Navigasi

Navigasi yang baik membantu baik pengguna maupun mesin pencari. Pengguna menemukan apa yang mereka butuhkan dengan cepat. Crawler Google memahami hierarki situs Anda dan mendistribusikan PageRank secara efisien.

Praktik terbaik navigasi:

PolaManfaatImplementasi
Arsitektur datarHalaman dalam 3 klik dari berandaHalaman hub, breadcrumbs
BreadcrumbsPengguna tahu di mana mereka beradaMarkup skema + jejak yang terlihat
Struktur URL logisJalur yang dapat diprediksi/kategori/subkategori/halaman
Navigasi footerHalaman sekunder dapat diaksesLegal, tentang, kontak, sitemap
Pencarian internalPengguna menemukan konten spesifikKotak pencarian dengan saran
Konten terkaitMengurangi bounce, meningkatkan kedalamanBagian "Artikel Terkait"

Arsitektur situs ideal:

Beranda (1 klik dari semuanya yang penting)
├── /produk/ (hub kategori — tautan ke semua produk)
│   ├── /produk/kategori-a/
│   │   ├── /produk/kategori-a/produk-1
│   │   └── /produk/kategori-a/produk-2
│   └── /produk/kategori-b/
├── /blog/ (hub konten — tautan ke semua posting)
│   ├── /blog/topik-cluster-1/ (halaman pilar)
│   │   ├── /blog/subtopik-1a
│   │   └── /blog/subtopik-1b
│   └── /blog/topik-cluster-2/
├── /alat/ (halaman utilitas)
└── /tentang/ (halaman kepercayaan)

Implementasi breadcrumb:

<!-- Breadcrumb yang terlihat -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Beranda</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">Panduan SEO Langkah 5</li>
  </ol>
</nav>

<!-- Markup skema (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Beranda", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "Panduan SEO Langkah 5" }
  ]
}
</script>

Bendera merah navigasi:

  • Halaman lebih dari 4 klik dari beranda (terlalu dalam)
  • Tidak ada breadcrumbs (pengguna dan Google kehilangan konteks)
  • Navigasi hanya dengan JavaScript (crawler mungkin melewatkan tautan)
  • Halaman yatim piatu (tidak ada tautan internal yang mengarah ke mereka)
  • Menu mega dengan lebih dari 200 tautan (mengencerkan nilai setiap tautan)

Poin cepat: Periksa halaman konversi terpenting Anda — seberapa banyak klik dari beranda? Jika lebih dari 3, tambahkan tautan langsung dari beranda Anda atau halaman hub kategori. Setiap klik yang lebih dalam mengurangi baik kunjungan pengguna maupun frekuensi crawl.

6. Optimisasi di Atas Lipatan

Apa yang dilihat pengguna sebelum menggulir menentukan apakah mereka tetap atau pergi. Konten di atas lipatan harus segera menyampaikan nilai dan sesuai dengan kueri pencarian yang membawa mereka ke sana.

Hal-hal yang harus ada di atas lipatan:

ElemenMengapaKegagalan umum
Judul yang jelas (H1)Mengonfirmasi relevansi dengan kueriGenerik atau hilang
Proposisi nilaiMengapa mereka harus tetap?Terkubur di bawah lipatan
CTA utamaApa yang harus mereka lakukan selanjutnya?Tersembunyi atau tidak jelas
Gambar/media heroKeterlibatan visualMemuat lambat, menyebabkan masalah LCP
Sinyal kepercayaanMengapa mereka harus mempercayai Anda?Tidak ada logo, ulasan, atau kredensial

Pola tata letak di atas lipatan:

Desktop (viewport 1440px):
┌──────────────────────────────────────┐
│ Bilah navigasi                        │
├──────────────────────────────────────┤
│                                      │
│  H1: Judul yang jelas sesuai kueri   │
│  Subjudul: Proposisi nilai           │
│                                      │
│  [Tombol CTA Utama]                  │
│                                      │
│  Sinyal kepercayaan: logo, statistik, lencana │
│                                      │
├──────────────────────────────────────┤
│ ↓ Konten berlanjut di bawah lipatan  │
└──────────────────────────────────────┘

Mobile (viewport 375px):
┌────────────────────┐
│ Nav (hamburger)    │
├────────────────────┤
│                    │
│ H1: Judul          │
│ (lebih pendek di mobile) │
│                    │
│ [Tombol CTA]      │
│ (lebar penuh, 44px+)│
│                    │
│ Lencana kepercayaan│
│                    │
├────────────────────┤
│ ↓ Gulir untuk lebih banyak│
└────────────────────┘

Aturan kritis di atas lipatan:

  • H1 harus terlihat tanpa menggulir (cocok dengan kueri pencarian)
  • CTA harus terlihat tanpa menggulir (mengurangi bounce)
  • Tidak ada pergeseran tata letak dalam konten di atas lipatan (pembunuh CLS)
  • Gambar hero harus memuat cepat (biasanya elemen LCP)
  • Mobile: kurangi konten di atas lipatan (ruang viewport yang lebih sedikit)

Poin cepat: Ambil tangkapan layar beranda Anda di mobile (lebar 375px). Apakah H1 terlihat? Apakah tombol CTA terlihat? Dapatkah Anda mengetahui apa yang dilakukan situs dalam waktu 2 detik? Jika ada jawaban "tidak", Anda kehilangan pengunjung sebelum mereka menggulir.

Daftar Periksa Audit UX

Jalankan ini untuk halaman teratas Anda:

  • [ ] LCP di bawah 2,5 detik (gambar hero dioptimalkan, CSS penting di-inline)
  • [ ] INP di bawah 200ms (tidak ada tugas JavaScript panjang yang memblokir interaksi)
  • [ ] CLS di bawah 0,1 (semua gambar memiliki dimensi, tidak ada pergeseran pemuatan terlambat)
  • [ ] Ramah seluler (target sentuh 44px, teks 16px+, tidak ada scroll horizontal)
  • [ ] Aksesibel (teks alt, hierarki heading, kontras warna, navigasi keyboard)
  • [ ] HTTPS di mana-mana (tidak ada konten campuran, HSTS diaktifkan)
  • [ ] Tidak ada interstitial intrusif (overlay persetujuan OK, popup yang memblokir konten tidak)
  • [ ] Breadcrumbs ada (dengan skema BreadcrumbList)
  • [ ] Kedalaman navigasi di bawah 4 klik ke halaman penting
  • [ ] Di atas lipatan dioptimalkan (H1 terlihat, CTA terlihat, LCP cepat)

Bagaimana LANGR Memindai UX Anda

Modul pemindaian terkait UX LANGR mencakup:

  • Modul Core Web Vitals — Mengukur LCP, INP, CLS dari Chrome User Experience Report (data pengguna nyata)
  • Modul PageSpeed — Audit kinerja Lighthouse lengkap dengan skor mobile dan desktop
  • Modul Seluler — Konfigurasi viewport, ukuran target sentuh, keterbacaan teks
  • Modul Aksesibilitas — Pengecekan kepatuhan WCAG, penggunaan ARIA, kontras warna
  • Modul Pemindaian Tata Letak — Evaluasi berbasis AI dari tata letak mobile dan desktop
  • Modul Pengalaman Halaman — Deteksi interstitial, status HTTPS, penjelajahan aman

Modul-modul ini berjalan di setiap pemindaian, memberi Anda gambaran lengkap tentang bagaimana pengunjung mengalami situs Anda — dan apa yang perlu diperbaiki untuk peringkat yang lebih baik.

Kesalahan UX Umum (Dikategorikan Berdasarkan Dampak)

  1. Mengabaikan mobile — 60%+ pencarian adalah mobile; mobile yang rusak = peringkat yang rusak
  2. Gambar yang tidak dioptimalkan — Penyebab nomor 1 dari LCP lamban (dan seringkali perbaikan yang termudah)
  3. Tidak ada dimensi gambar eksplisit — Pergeseran tata letak menghancurkan skor CLS
  4. Bloat skrip pihak ketiga — Widget chat, analitik, iklan yang memblokir INP
  5. Dasar-dasar aksesibilitas yang hilang — Tidak ada teks alt, tidak ada hierarki heading, tidak ada kontras
  6. Interstitial yang memblokir konten — Popup layar penuh sebelum pengguna melihat konten
  7. Arsitektur situs yang dalam — Halaman penting terkubur 5+ klik dari beranda
  8. Tidak ada nilai di atas lipatan — Pengguna tidak dapat mengetahui apa yang dilakukan situs tanpa menggulir

Apa Selanjutnya?

Langkah 6: Monitoring & Peringkat — Anda tidak bisa memperbaiki apa yang tidak Anda ukur. Posisi kata kunci, pelacakan skor, laporan perubahan, dan pemantauan waktu aktif.


Panduan ini adalah bagian dari seri 13 langkah SEO LANGR. Lakukan audit gratis untuk melihat posisi situs Anda di semua 13 disiplin.

Want to know where your site stands?

Run a free SEO audit — it takes under 60 seconds.

Related articles