Birçok arama motoru, sayfaları mobil uyumlu olup olmadıklarına göre sıralar. Görüntü alanı meta etiketi olmadığında mobil cihazlar sayfaları tipik masaüstü ekran genişliklerinde oluşturur, ardından sayfaları küçültür ve bu nedenle sayfaların okunmasını zorlaştırır.
Görünüm meta etiketinin ayarlanması, görüntü alanının genişliğini ve ölçeklemesini kontrol ederek tüm cihazlarda doğru bir şekilde boyutlandırılmasını sağlar.
Lighthouse görüntü alanı meta etiketi denetimi nasıl başarısız oluyor?
Lighthouse, görüntü alanı meta etiketi olmayan sayfaları işaretler:
Şu koşulların tamamı karşılanmadığı sürece bir sayfa denetimde başarısız olur:
- Dokümanın <head> etiketi bir <meta name="viewport"> etiketi içeriyor.
- Görünüm meta etiketi, bir content özelliği içeriyor.
- content özelliğinin değeri, width= metnini içerir.
Görünüm meta etiketi nasıl eklenir?
Sayfanızın <head> öğesine, uygun anahtar/değer çiftleriyle bir görüntü alanı <meta> etiketi ekleyin:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Her bir anahtar/değer çiftinin işlevi şunlardır:
- width=device-width, görüntü alanının genişliğini cihazın genişliğine ayarlar.
- initial-scale=1, kullanıcı sayfayı ziyaret ettiğinde başlangıç yakınlaştırma düzeyini ayarlar.