Pengertian Viewport Meta Tag
Viewport meta tag adalah elemen HTML yang mengontrol bagaimana halaman web ditampilkan di perangkat mobile. Tag ini memastikan tampilan website menyesuaikan ukuran layar (responsif), bukan hanya mengecilkan versi desktop di HP.
Viewport adalah area tampilan (visible area) dari browser tempat konten website ditampilkan. Di desktop, ukuran viewport besar (misal 1920px), sedangkan di HP bisa cuma 360px.
Tanpa viewport meta tag, browser mobile akan menampilkan halaman seperti di desktop, tapi mengecil — sehingga teks sulit dibaca dan tata letak berantakan.
Contoh tag yang benar dan umum digunakan:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Fungsi Utama Viewport Meta Tag
Berikut beberapa fungsi pentingnya:
- Menyesuaikan skala tampilan di perangkat mobile Browser menyesuaikan lebar halaman agar sesuai dengan ukuran layar pengguna.
- Mendukung desain responsif (responsive design) Bersama CSS media query, halaman otomatis menyesuaikan layout di berbagai ukuran layar.
- Meningkatkan pengalaman pengguna (UX) Teks tidak perlu di-zoom, navigasi lebih mudah, dan konten terbaca rapi di semua perangkat.
- Mendukung performa SEO mobile-friendly Google menilai mobile usability sebagai faktor peringkat. Tanpa viewport, situs bisa gagal dalam Mobile-Friendly Test.
Parameter Umum dalam Viewport Tag
| Parameter | Fungsi | Contoh |
|---|---|---|
width=device-width | Menyesuaikan lebar halaman sesuai perangkat | Umum digunakan |
initial-scale=1.0 | Menentukan zoom awal (tanpa pembesaran) | Direkomendasikan |
minimum-scale | Batas zoom-out terendah | Opsional |
maximum-scale | Batas zoom-in tertinggi | Opsional |
user-scalable=no | Mencegah pengguna memperbesar halaman | Tidak disarankan (kurangi aksesibilitas) |
Contoh Implementasi Viewport dalam HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Viewport Tag</title>
</head>
<body>
<h1>Halo, dunia mobile!</h1>
<p>Halaman ini sudah responsif di semua perangkat.</p>
</body>
</html>
Dampak Viewport Meta Tag terhadap SEO
- Meningkatkan skor Core Web Vitals (LCP & CLS) Karena layout tampil stabil tanpa zoom atau resize paksa.
- Memastikan halaman lolos uji Mobile-Friendly Google Tanpa tag ini, situs dianggap “tidak mobile-friendly.”
- Meningkatkan pengalaman pengguna dan waktu kunjungan Pengguna betah lebih lama → sinyal positif bagi algoritma page experience.
Kesimpulan
Viewport meta tag adalah fondasi utama desain responsif. Tanpa elemen ini, halaman mobile akan tampil kecil dan sulit dibaca — menurunkan UX dan SEO.
Jadi, pastikan setiap halaman web memiliki baris ini di <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">