Banyak mesin telusur memberi peringkat halaman berdasarkan seberapa mobile-friendly halaman tersebut. Tanpa tag meta area pandang, perangkat seluler merender halaman dengan lebar layar desktop biasa, lalu memperkecil halaman, sehingga sulit dibaca.
Menyetel tag meta area pandang memungkinkan Anda mengontrol lebar dan penskalaan area pandang agar ukurannya tepat di semua perangkat.
Bagaimana audit tag meta area pandang Lighthouse gagal
Lighthouse menandai halaman tanpa tag meta area pandang:
Sebuah halaman akan gagal dalam audit kecuali jika semua kondisi berikut terpenuhi:
- <head> dokumen berisi tag <meta name="viewport">.
- Tag meta area pandang berisi atribut content.
- Nilai atribut content menyertakan teks width=.
Cara menambahkan tag meta area pandang
Tambahkan tag <meta> area pandang dengan pasangan nilai kunci yang sesuai ke <head>
halaman Anda:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Berikut fungsi dari setiap pasangan nilai kunci:
- width=device-width menetapkan lebar area tampilan sesuai lebar perangkat.
- initial-scale=1 menetapkan tingkat zoom awal saat pengguna mengunjungi halaman.