Genişliği veya başlangıç ölçeğine sahip bir etiketi yok

Birçok arama motoru, sayfaları mobil uyumlu olup olmadıklarına göre sıralar. Mobil cihazlar, görüntü alanı meta etiketi olmadan sayfaları tipik masaüstü ekran genişliklerinde oluşturur ve ardından küçülterek sayfaların okunmasını zorlaştırır.

Görüntü alanı meta etiketinin ayarlanması, görüntü alanının genişliğini ve ölçeklendirmesini kontrol ederek tüm cihazlarda doğru şekilde boyutlandırılmasını sağlar.

Lighthouse görüntü alanı meta etiketi denetimi nasıl başarısız olur?

Lighthouse, görüntü alanı meta etiketi olmayan sayfaları işaretler:

Lighthouse denetimi sayfada görüntü alanı eksik olduğunu gösteriyor

Bu koşulların tamamı karşılanmadığında bir sayfa denetimde başarısız olur: - Dokümanın <head> etiketi <meta name="viewport"> etiketi içeriyor. - Görüntü alanı meta etiketi, bir content özelliği içerir. - content özelliğinin değeri, width= metnini içerir.

Lighthouse, width değerinin device-width değerine eşit olup olmadığını kontrol etmez. Ayrıca initial-scale anahtar/değer çiftini de kontrol etmez. Bununla birlikte, sayfanızın mobil cihazlarda doğru şekilde oluşturulması için her ikisini de eklemeniz gerekir.

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 yaptığı işlem: - 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 ilk yakınlaştırma düzeyini ayarlar.

Kaynaklar