Viewport meta etiketi yok: site mobilde neden küçücük görünüyor?

Sitenizi telefondan açtığınızda sayfa masaüstündeki gibi görünüyor ama küçücük; okumak için yakınlaştırmak, gezinmek için sağa sola kaydırmak gerekiyor. Bu genellikle tek bir satırın eksikliğinden kaynaklanır.

KTYAPTECH SEO Analyzer bu sorunu MOBILE-MISSING-VIEWPORT-001 koduyla, “Viewport etiketi yok” başlığı altında ve kritik önem derecesiyle raporlar (Mobil). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Eksik viewport etiketi nedir?

Viewport meta etiketi (<meta name="viewport" content="width=device-width, initial-scale=1">), tarayıcıya sayfanın cihaz genişliğinde çizilmesini söyler. Etiket yoksa mobil tarayıcılar sayfayı yaklaşık 980 piksellik sanal bir masaüstü genişliğinde çizip ekrana sığacak şekilde küçültür.

SEO Analyzer bu bulguyu kritik önemde raporlar, çünkü etiketin yokluğu duyarlı tasarımın hiç çalışmaması demektir.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Google, siteleri mobil öncelikli dizine ekleme ile, yani mobil sürümü esas alarak değerlendirir. Mobilde kullanılamayan bir sayfa hem kullanıcıları kaybeder hem de sayfa deneyimi açısından zayıf kalır.

Kullanıcıların çoğunluğu mobil cihazlardan geldiği için bu, trafiğin büyük bölümünün kötü bir deneyim yaşaması demektir.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Viewport etiketi yok” bulgusunu inceleyin.
• Sayfa kaynağında name="viewport" ifadesini arayın.
• Sayfayı gerçek bir telefonda veya tarayıcının mobil emülasyonunda açın.

Adım adım çözüm

1. Tüm sayfa şablonlarının <head> bölümüne viewport etiketini ekleyin.
2. Değer olarak width=device-width, initial-scale=1 kullanın.
3. Etiket eklendikten sonra sayfanın gerçekten duyarlı olup olmadığını test edin; sabit genişlikli öğeler taşma yaratabilir.
4. Yakınlaştırmayı engelleyen değerler (user-scalable=no, maximum-scale=1) eklemeyin.

Etiket tek başına yeterli mi?

Hayır. Viewport etiketi tarayıcıya cihaz genişliğini kullanmasını söyler; sayfanın bu genişliğe uyum sağlaması için CSS'in duyarlı olması (esnek düzen, medya sorguları, esnek görseller) gerekir.

Sık yapılan hatalar

• Etiketi yalnızca ana sayfa şablonuna eklemek.
• user-scalable=no ile yakınlaştırmayı kapatmak.
• Sabit genişlik (width=1024) kullanmak.

Düzeltmeyi nasıl doğrularsınız?

• Sayfayı telefonda veya emülasyonda açıp düzeni kontrol edin.
• Lighthouse'ta viewport denetiminin geçtiğini görün.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Viewport etiketi olmayan sitem dizinden çıkar mı?

Hayır, ama mobil kullanıcı deneyimi ciddi şekilde bozulur ve sayfa deneyimi değerlendirmesi olumsuz etkilenir.

Uygulama (app) içindeki web görünümleri için de gerekli mi?

Evet; aynı kurallar geçerlidir.

Özet

Viewport etiketi mobil uyumluluğun ilk adımıdır. Tüm şablonlara width=device-width, initial-scale=1 değeriyle ekleyin ve ardından sayfanın gerçekten duyarlı olduğunu test edin.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.