Ne anlama gelir?
Viewport Meta Etiketi, bir sayfanın mobil cihazlarda ekran genişliğine göre doğru ölçeklenmesini sağlayan HTML etiketidir: <meta name="viewport" content="width=device-width, initial-scale=1">. Duyarlı tasarımın temel şartıdır.
Olmazsa ne olur?
Bu etiket olmadan, mobil tarayıcı sayfayı masaüstü genişliğinde render edip küçültür. Kullanıcı yakınlaştırıp kaydırmak zorunda kalır; deneyim ve mobil uyumluluk çöker.
Neden kritik?
- Mobil-öncelikli indekslemede zorunludur
- Mobil kullanılabilirliğin ön koşuludur
- Duyarlı tasarımın çalışması buna bağlıdır
Ne yapmalı?
Her sayfada doğru viewport meta etiketinin bulunduğundan emin olun. Bu tek satır, mobil deneyimin ve mobil SEO'nun görünmez ama vazgeçilmez temelidir.
Ne anlama gelir?
Viewport meta etiketi (viewport meta tag), bir web sayfasının, farklı cihazlarda (özellikle mobil cihazlarda) nasıl görüntüleneceğini kontrol eden bir HTML meta etiketidir. Sayfanın <head> bölümüne yerleştirilen bu etiket (<meta name="viewport" content="width=device-width, initial-scale=1">), tarayıcıya sayfanın genişliğini cihazın ekran genişliğine uydurmasını ve doğru bir başlangıç ölçeğinde göstermesini söyler. Viewport meta etiketi, duyarlı (responsive) tasarımın ve mobil uyumluluğun temel bir gereğidir; onsuz sayfalar mobilde yanlış ölçekte ve kullanılamaz görünebilir.
Viewport meta'nın işlevi
- Sayfa genişliğini cihaz ekranına uydurur
- Doğru başlangıç ölçeğini ayarlar
- Mobil uyumluluğun temelidir
- Duyarlı tasarımın çalışmasını sağlar
Neden önemli?
Viewport meta etiketi, mobil uyumluluğun ve duyarlı tasarımın temel ve vazgeçilmez bir unsurudur; çünkü bir sayfanın mobil cihazlarda doğru ve kullanılabilir biçimde görüntülenmesini sağlar, ve mobil uyumluluk hem kullanıcı deneyimi hem SEO açısından kritiktir. Sorunu anlamak için, mobil tarayıcıların viewport meta etiketi olmadan nasıl davrandığını bilmek gerekir; bir mobil tarayıcı, viewport meta etiketi olmayan bir sayfayla karşılaştığında, sayfanın masaüstü için tasarlandığını varsayar ve onu geniş bir sanal genişlikte (örneğin 980 piksel) render edip küçültür, böylece tüm masaüstü düzeni küçük ekrana sığdırılır. Sonuç, çok küçük, okunamaz metin ve kullanılamaz bir sayfadır; kullanıcı sürekli yakınlaştırma ve kaydırma yapmak zorunda kalır, bu da berbat bir mobil deneyimdir. Viewport meta etiketi, bu sorunu çözer; width=device-width değeri, tarayıcıya sayfanın genişliğini cihazın gerçek ekran genişliğine uydurmasını söyler, ve initial-scale=1 doğru bir başlangıç yakınlaştırma seviyesi ayarlar. Böylece sayfa, mobil ekrana uygun genişlikte render edilir, ve duyarlı tasarım (CSS ile ekran boyutuna uyum sağlayan düzen) doğru çalışabilir. Viewport meta etiketinin önemi, mobil uyumluluğun bugünkü kritik rolüyle doğrudan ilişkilidir. Birincisi, kullanıcı deneyimi; web trafiğinin büyük çoğunluğu artık mobil cihazlardan geldiğinden, sayfanın mobilde iyi görünmesi ve kullanılabilir olması esastır, ve viewport meta etiketi bunun ön koşuludur. İkincisi, SEO; Google, mobil öncelikli indeksleme (mobile-first indexing) kullanır, yani sitenizin mobil versiyonunu değerlendirmede esas alır, ve mobil uyumluluk bir sıralama faktörüdür. Viewport meta etiketi olmayan, mobilde bozuk görünen bir sayfa, hem kötü kullanıcı deneyimi hem olumsuz SEO etkisi yaşar. Google'ın mobil uyumluluk testleri ve araçları, viewport meta etiketinin varlığını ve doğruluğunu kontrol eder. Viewport meta etiketi doğru kullanılmalıdır; standart width=device-width, initial-scale=1 değeri çoğu durumda uygundur, ancak kullanıcının yakınlaştırma yapmasını engelleyen ayarlardan (erişilebilirlik açısından sorunlu) kaçınılmalıdır. Viewport meta etiketi, bir sayfanın farklı cihazlarda (özellikle mobilde) nasıl görüntüleneceğini kontrol eden, sayfa genişliğini cihaz ekranına uyduran temel bir HTML meta etiketidir; mobil uyumluluğun ve duyarlı tasarımın vazgeçilmez bir gereğidir, ve mobil öncelikli indeksleme çağında hem kullanıcı deneyimi hem SEO açısından kritik öneme sahiptir.
Gerçek örnek
Bir site, viewport meta etiketine sahip olmadığı için mobil cihazlarda masaüstü düzeni küçültülmüş biçimde, okunamaz ve kullanılamaz görünüyordu; mobil kullanıcılar hemen ayrılıyordu ve mobil uyumluluk testi başarısız oluyordu. Standart viewport meta etiketi (width=device-width, initial-scale=1) eklendiğinde, sayfa mobil ekrana doğru biçimde uydu, duyarlı tasarım düzgün çalıştı, mobil deneyim ve mobil uyumluluk düzeldi.
Özet
Viewport meta etiketi, bir sayfanın farklı cihazlarda (özellikle mobilde) nasıl görüntüleneceğini kontrol eder; sayfa genişliğini cihaz ekranına uydurur (width=device-width, initial-scale=1). Mobil uyumluluğun ve duyarlı tasarımın temelidir; onsuz sayfalar mobilde küçültülmüş ve kullanılamaz görünür. Mobil öncelikli indeksleme çağında hem kullanıcı deneyimi hem SEO için kritiktir.