Viewport Meta Tag

TL;DR: Viewport meta tag adalah satu baris kode di bagian head HTML yang mengatur bagaimana halaman menyesuaikan lebar layar perangkat. Tanpa tag ini, ponsel akan menampilkan versi desktop yang mengecil dan sulit dibaca. Tag standarnya: <meta name="viewport" content="width=device-width, initial-scale=1">.

Apa itu Viewport Meta Tag?

Viewport meta tag adalah instruksi yang memberi tahu browser seberapa lebar area tampilan halaman dan bagaimana skalanya. Bayangkan viewport sebagai bingkai jendela: tag ini menentukan apakah jendela itu menyesuaikan ukuran ruangan (layar perangkat) atau memaksakan ukuran tetap.

Tanpa tag ini, browser ponsel berasumsi halaman dibuat untuk layar desktop lebar, lalu mengecilkannya agar muat. Hasilnya teks jadi mungil dan pengguna harus mencubit layar untuk membaca. Tag ini adalah fondasi dari desain responsif yang benar.

Cara kerja dan nilai umum

Atribut paling penting dalam tag ini ada dua.

Sebagian besar website modern cukup memakai kombinasi standar tersebut. Hindari mengunci zoom (maximum-scale=1, user-scalable=no) karena itu menghalangi pengguna memperbesar teks, masalah aksesibilitas yang nyata. Tag ini bekerja sama dengan elemen lain di DOM untuk menentukan bagaimana halaman akhirnya dirender.

Kenapa Penting?

Mayoritas trafik website di Indonesia datang dari ponsel. Tanpa viewport meta tag yang benar, website akan terasa rusak di perangkat yang justru paling banyak dipakai pengunjung. Tag ini juga jadi salah satu hal pertama yang dicek Google saat menilai kelayakan mobile sebuah halaman. Detail resmi bisa dibaca di dokumentasi MDN soal viewport.

Pertanyaan Umum

Apakah setiap halaman butuh viewport meta tag?

Ya. Tag ini sebaiknya ada di bagian head setiap halaman agar tampilan konsisten dan benar di semua perangkat, terutama ponsel.

Apakah viewport meta tag memengaruhi SEO?

Secara tidak langsung, ya. Tag yang benar mendukung tampilan mobile yang baik, dan kelayakan mobile adalah salah satu faktor yang dinilai Google dalam pemeringkatan.