Tentang Tag Meta Viewport
Apa itu tag meta viewport?
Tag meta viewport memberi tahu browser seluler cara menentukan ukuran halaman. Tanpanya, ponsel menganggap halaman tersebut dibuat untuk desktop, merendernya dengan lebar sekitar 980 piksel, lalu mengecilkan hasilnya agar sesuai, sehingga menghasilkan halaman yang dapat dibaca dalam ukuran mini tetapi tidak dapat digunakan tanpa memperbesar tampilan.
Tag ini hanya berupa satu baris di dalam bagian head, dan merupakan sakelar yang membuat CSS responsif benar-benar berfungsi. Media query mengukur viewport, jadi jika viewport tersebut tidak mencerminkan kondisi sebenarnya, setiap breakpoint yang Anda tulis akan mengukur hal yang keliru.
Pemeriksa tag meta viewport layak dijalankan pada halaman apa pun yang dibuat di luar template utama Anda, karena hampir selalu di situlah tag yang hilang ditemukan.
Apakah tag viewport masih penting pada tahun 2026?
Tentu saja, karena tanpa tag tersebut, semua upaya lain untuk mengoptimalkan tampilan seluler akan sia-sia. Anda dapat menulis stylesheet yang sepenuhnya responsif dan menerbitkan halaman yang berperilaku seolah-olah dibuat pada tahun 2009.
Tema modern menyertakannya sebagai standar, dan justru itulah sebabnya ketiadaannya sangat mudah terlewatkan. Jika tag tersebut tidak ada, biasanya penyebabnya adalah template khusus, landing page kampanye, atau halaman yang dirakit oleh alat yang membuat bagian head-nya sendiri.
Pengaturan sama pentingnya dengan keberadaannya. Tag yang menonaktifkan zoom hadir, sesuai menurut pengujian ini, dan merupakan kegagalan aksesibilitas.
Hubungan tag viewport dengan penelusuran AI
Tag ini memengaruhi rendering seluler, dan rendering seluler inilah yang diindeks. Halaman yang tidak dapat ditata dengan baik di ponsel akan dinilai dalam bentuk terburuknya, bukan dalam bentuk yang dimaksudkan.
Tag ini tidak memiliki makna tersendiri yang dibaca crawler, tetapi ketiadaannya mengganggu segala sesuatu setelahnya, termasuk seberapa banyak konten yang terlihat dalam tampilan hasil rendering.
Ini adalah salah satu perbaikan termurah dalam daftar ini dan salah satu dari sedikit perbaikan yang efeknya sepenuhnya berlaku atau tidak sama sekali.
Praktik terbaik viewport
- Sertakan tag ini di setiap halaman, di dalam head.
- Atur lebar ke lebar perangkat dan skala awal ke 1.
- Jangan menonaktifkan zoom atau membatasi skala maksimum. Mencegah zoom merupakan kegagalan aksesibilitas.
- Periksa halaman kustom dan halaman kampanye secara terpisah dari templat utama.
- Konfirmasikan pada ponsel sungguhan, bukan hanya di emulator desktop.
Yang diperiksa alat ini
Alat ini membaca HTML halaman dan melaporkan apakah tag meta viewport tersedia.
Ini memeriksa keberadaan, bukan pengaturannya, jadi tag yang menonaktifkan zoom tetap dianggap lolos. Jika tag tersebut ada tetapi halaman masih bermasalah di ponsel, pengaturan adalah hal berikutnya yang perlu diperiksa.
Ke mana selanjutnya
The viewport tag makes responsive layout possible; the rest is whether the layout is any good. See how the page actually renders on phone and tablet screens with the
responsivitas seluler test.