Apa Itu Viewport Meta Tag
Viewport meta tag adalah satu baris di bagian <head> yang memberi tahu peramban ponsel bagaimana menyesuaikan lebar halaman dengan lebar layar.
<meta name="viewport" content="width=device-width, initial-scale=1">Tanpa baris ini, peramban ponsel berasumsi halaman dibuat untuk desktop. Ia akan merender halaman pada lebar desktop lalu mengecilkannya seluruhnya agar muat — hasilnya tulisan sangat kecil yang harus diperbesar manual, dan seluruh desain responsif Anda tidak pernah berjalan.
Ini salah satu baris paling murah dengan akibat paling besar di seluruh HTML sebuah halaman.
Viewport yang benar adalah prasyarat desain responsif untuk mobile-first indexing, sekaligus bagian penting dari aksesibilitas website.
Arti Tiap Parameternya
width=device-width— samakan lebar halaman dengan lebar layar perangkat. Ini bagian yang paling menentukan.initial-scale=1— tampilkan halaman pada perbesaran normal saat pertama dibuka.maximum-scale— batas perbesaran maksimum. Sebaiknya tidak dipakai.user-scalable=no— melarang pengguna memperbesar halaman. Sebaiknya tidak pernah dipakai.
Dua parameter terakhir yang perlu ditegaskan. Melarang perbesaran berarti menutup satu-satunya cara sebagian orang membaca halaman Anda — dan itu pelanggaran aksesibilitas yang jelas. Sebagian peramban modern bahkan mengabaikannya demi pengguna.
Untuk hampir semua situs, dua parameter pertama sudah cukup dan tidak perlu ditambahi apa pun.
Kenapa Ini Berpengaruh
- Ia prasyarat desain responsif. Aturan CSS yang menyesuaikan lebar layar tidak akan berjalan tanpa viewport yang benar.
- Ia menentukan keterbacaan di ponsel, dan lewat itu masuk ke penilaian pengalaman halaman.
- Ia memengaruhi pengukuran kestabilan tata letak, karena halaman yang dirender pada lebar salah menghasilkan pergeseran saat dimuat.
- Ia dinilai dari versi mobile, yang jadi acuan pengindeksan.
Yang perlu jujur: viewport bukan faktor peringkat tersendiri. Pengaruhnya berjalan lewat tampilan yang benar di ponsel — dan itu prasyarat, bukan bonus.
Kesalahan yang Sering Terjadi
- Tagnya tidak ada sama sekali. Paling sering pada situs lama atau halaman yang dibuat di luar templat utama.
user-scalable=nomasih terpasang, biasanya warisan dari templat lama.- Nilai lebar ditulis angka tetap seperti
width=1024, yang mengembalikan masalah yang sama seperti tidak memasang tag sama sekali. - Tag dipasang di luar
<head>, sehingga diabaikan. - Dua tag viewport dalam satu halaman, biasanya karena tema dan plugin sama-sama menambahkannya.
- Viewport benar tapi CSS-nya tidak responsif, sehingga halaman tetap melebar dan menimbulkan gulir horizontal.
Yang terakhir itu penting: viewport bukan pengganti desain responsif. Ia hanya membuka jalan agar CSS responsif bisa bekerja.
Cara Memeriksanya
- Buka sumber halaman dengan
Ctrl+Udan cariname="viewport". Periksa ada dan hanya satu. - Buka halaman di ponsel sungguhan. Kalau tulisannya sangat kecil dan harus diperbesar, tagnya bermasalah.
- Periksa gulir horizontal. Halaman yang bisa digeser ke samping di ponsel menandakan ada elemen yang melebihi lebar layar.
- Coba perbesar halaman dengan dua jari. Kalau tidak bisa, ada
user-scalable=noataumaximum-scaleyang perlu dicabut. - Jalankan pemeriksaan Lighthouse, yang menandai viewport yang hilang atau salah.
- Periksa halaman di luar templat utama — halaman arahan, halaman cetak, dan halaman yang dibuat plugin.
Pertanyaan Umum Seputar Viewport Meta Tag
Apakah semua halaman perlu tag ini?
Ya, semua halaman yang dibuka di peramban. Ia biasanya dipasang sekali di templat utama, tapi periksa halaman yang dibuat di luar templat itu.
Apakah user-scalable=no benar-benar merugikan?
Ya. Ia menutup satu-satunya cara sebagian pengguna membaca halaman Anda, dan tidak menyelesaikan masalah apa pun yang tidak bisa diselesaikan CSS yang benar.
Sudah pasang viewport tapi tampilan di ponsel masih berantakan?
Berarti masalahnya di CSS, bukan di tagnya. Viewport hanya menyampaikan lebar layar; yang menyesuaikan tata letak tetap aturan CSS Anda.