viewport meta tag html kod parçacığı, mobil tarayıcılara bir sayfanın nasıl boyutlandırılacağını ve ölçekleneceğini söyler. Çoğu durumda doğru kurulum basittir: her duyarlı sayfanın <head> bölümüne <meta name="viewport" content="width=device-width, initial-scale=1"> ekleyin.

viewport meta tag html nedir?

Viewport meta etiketi, özellikle mobil cihazlardaki tarayıcılar için bir HTML yönergesidir. Tarayıcının, masaüstü genişliğinde bir düzeni küçük ekrana sığdırmak için küçültmek yerine sayfa genişliğini cihaz genişliğiyle eşleştirmesine yardımcı olur.

Bu etiket olmadan, telefon sayfayı çok daha genişmiş gibi işleyebilir ve ardından otomatik olarak uzaklaştırabilir. Bu da genellikle metni çok küçük yapar, düğmelere dokunmayı zorlaştırır ve CSS aslında düzgün olsa bile düzenlerin bozuk görünmesine neden olur.

Standart sürüm şu şekildedir:

``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``

Bunu <head> bölümünün içine ekleyin:

``html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Your Page Title</title> </head> ``

viewport meta etiketinin önemi

Viewport etiketini doğru kullanmak birkaç pratik hedefi destekler:

  • Daha iyi mobil kullanılabilirlik: metin ve arayüz öğeleri okunabilir boyutta görüntülenir
  • Duyarlı düzenler: CSS media query’leri telefon ve tabletlerde beklendiği gibi çalışır
  • Daha temiz sayfa sunumu: kullanıcıların temel içeriği okumak için yakınlaştırma yapması gerekmez
  • Erişilebilirlik: mantıklı bir varsayılan ölçek, birçok ziyaretçi için sürtünmeyi azaltır
  • SEO ve sayfa kalite sinyalleri: arama motorları mobil cihazlarda iyi çalışan sayfaları tercih eder

Etiketin kendisi sihirli şekilde sıralamaları yükseltmez. Değeri, arama görünürlüğü ve kullanıcı memnuniyeti açısından önemli olan mobil uyumlu bir deneyimi desteklemesidir.

Önerilen viewport meta tag html kurulumu

Çoğu web sitesi için şu kodu aynen kullanın:

``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``

Her bölümün anlamı şudur:

width=device-width

Bu, tarayıcıya viewport genişliğini cihazın ekran genişliğine eşitlemesini söyler.

Pratikte bu, duyarlı CSS’inizin simüle edilmiş bir masaüstü genişliği yerine gerçek mobil viewport’u hedefleyebileceği anlamına gelir.

initial-scale=1

Bu, sayfa ilk yüklendiğinde başlangıç yakınlaştırma düzeyini %100 olarak ayarlar.

Tarayıcının daha geniş bir düzeni dar ekrana sığdırmak için otomatik olarak uzaklaşmasını önler.

Yaygın viewport ayarlarının açıklaması

Eski eğitimlerde veya mevcut site kodunda ek değerler görebilirsiniz. Bazıları belirli durumlarda faydalıdır, bazıları ise genellikle kaçınılması gereken ayarlardır.

maximum-scale=1

Örnek:

``html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ``

Bu, kullanıcıların ne kadar yakınlaştırabileceğini sınırlar. Bu genellikle erişilebilirlik açısından kötü bir fikirdir çünkü bazı ziyaretçiler içeriği rahatça okumak için yakınlaştırmaya ihtiyaç duyar.

Çoğu durumda bunu kullanmayın.

user-scalable=no

Örnek:

``html <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> ``

Bu, parmakla yakınlaştırmayı devre dışı bırakır. Genellikle önerilmez çünkü faydalı bir erişilebilirlik özelliğini kaldırır.

Çok özel, uygulama benzeri bir arayüzünüz ve güçlü bir gerekçeniz yoksa bundan kaçının.

Sabit genişlik değerleri

Örnek:

``html <meta name="viewport" content="width=1024"> ``

Bu, cihaza uyum sağlamak yerine belirli bir viewport genişliğini zorlar. Dar bazı istisnai durumlarda işe yarayabilir, ancak modern duyarlı web siteleri için uygun değildir.

Standart web sayfalarında width=device-width daha iyi seçimdir.

Farklı yapılarda viewport etiketi nasıl eklenir?

Düz HTML

HTML dosyanızı açın ve meta etiketini <head> içine yerleştirin:

``html <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> ``

WordPress

Modern WordPress temalarının çoğu zaten bir viewport etiketi içerir. Temanızın header.php dosyasını veya tarayıcınızın sayfa kaynağındaki çıktıyı kontrol edin.

Eksikse, güncellemelerin değişikliklerinizi ezmemesi için ideal olarak bir alt tema üzerinden tema başlığına ekleyin.

React, Next.js veya diğer framework’ler

Framework’ler genellikle head öğelerini global olarak veya sayfa bazında tanımlamanıza izin verir. Burada önemli olan framework sözdizimi değil, son render edilen HTML’dir. Sayfa çıktısının viewport meta etiketini bir kez içerdiğini, birden fazla çakışan sürüm içermediğini doğrulayın.

Kaçınılması gereken hatalar

Mobil görüntüleme sorunlarının çoğu birkaç tekrar eden nedenden kaynaklanır.

1. Etiketi tamamen unutmak

Sayfa telefonlarda çok küçük görünüyorsa, kontrol etmeniz gereken ilk şeylerden biri budur.

2. Birden fazla viewport etiketi eklemek

Tarayıcılar çakışmaları öngörülemez şekilde ele alabilir. Sayfa başına tek ve net bir viewport tanımı kullanın.

3. Yakınlaştırmayı engellemek

Güçlü ve test edilmiş bir neden olmadıkça user-scalable=no ve kısıtlayıcı yakınlaştırma ayarlarından kaçının.

4. Yalnızca meta etiketin siteyi duyarlı hale getirdiğini sanmak

Viewport etiketi tarayıcının düzeninizi doğru yorumlamasına yardımcı olur, ancak yine de duyarlı CSS’e ihtiyacınız vardır. Buna şunlar dahildir:

  • esnek grid yapıları
  • uygun yerlerde göreli birimler
  • media query’ler
  • kapsayıcı içinde ölçeklenen görseller
  • dokunma dostu boşluklar ve kontroller

5. Gerçek cihazlarda testi göz ardı etmek

Bir sayfa masaüstü tarayıcı penceresinde iyi görünebilir ama yine de mobil sorunlar barındırabilir. Mümkün olduğunda gerçek telefon ve tabletlerde test edin.

Viewport kurulumunuzun çalıştığı nasıl test edilir?

Hızlı bir doğrulama süreci, çok fazla yeniden çalışma ihtiyacını önleyebilir.

Sayfa kaynağını kontrol edin

<head> içinde şunu arayın:

``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``

Tarayıcı geliştirici araçlarını kullanın

Chrome, Edge veya Firefox’ta cihaz emülasyonu modunu açın ve sayfayı yaygın mobil genişliklerde görüntüleyin.

Şunlara bakın:

  • zorunlu yakınlaştırma olmadan okunabilir metin
  • normal içerikte yatay kaydırma olmaması
  • ekrana sığan menüler ve düğmeler
  • aşırı taşma yapmayan görseller ve tablolar

Gerçek bir telefonda test edin

Bu hâlâ en faydalı kontroldür. Şunları doğrulayın:

  • sayfa makul bir ölçekte yükleniyor mu
  • metin okunabilir mi
  • formlar kullanılabilir mi
  • gezinme öğelerine dokunmak kolay mı

viewport meta tag html ve SEO

viewport meta tag html, tek başına bir SEO taktiği değildir; ancak teknik kaliteyi destekler. Sitenizi mobilde kullanmak zorsa, ziyaretçilerin kalma, etkileşime girme veya dönüşüm sağlama olasılığı düşer.

Arama performansı üzerinde çalışan ekipler için mobil render, içerik kalitesi, taranabilirlik, iç bağlantılar ve rekabet araştırmasıyla birlikte daha büyük resmin bir parçasıdır. Rakip sayfaların neyi iyi yaptığını inceliyorsanız, yapılandırılmış bir competitor analysis workflow, tahminde bulunmadan mobil kullanılabilirliği, içerik yapısını ve sayfa içi uygulamaları karşılaştırmanıza yardımcı olabilir.

Çok sayıda sayfa yayımlıyorsanız, içerik sürecinizin bir parçası olarak başlıklar, heading’ler ve mobile-ready şablonlar gibi teknik temelleri standartlaştırmak da faydalıdır. article automation workflow gibi araçlar, ekiplerin bu temelleri ölçekte tutarlı şekilde sürdürmesine yardımcı olabilir.

Ne zaman farklı bir şeye ihtiyaç duyabilirsiniz?

Varsayılan viewport etiketi çoğu duyarlı web sitesi için doğrudur. Yine de bazı istisnai durumlar vardır:

  • yüksek derecede kontrol edilen web uygulamaları
  • mobil uygulamalar içindeki gömülü tarayıcı görünümleri
  • sabit genişlikli arayüzlere sahip eski sistemler
  • kiosk veya cihaza özel ortamlar

Bu durumlardan birinde çalışıyorsanız, standart viewport davranışını değiştirmeden önce dikkatle test edin. Küçük değişiklikler bazı cihazlarda kullanılabilirlik sorunları yaratabilir.

Basit bir en iyi uygulamalar kontrol listesi

Son kontrolünüz için bunu kullanın:

  • Her sayfaya bir viewport etiketi ekleyin
  • Bunu <head> içine yerleştirin
  • width=device-width kullanın
  • initial-scale=1 kullanın
  • Kesinlikle gerekmedikçe yakınlaştırmayı devre dışı bırakmayın
  • Bunu duyarlı CSS ile eşleştirin
  • Mobil cihazlarda test edin

Son çıkarım

En güvenli varsayılanı istiyorsanız, <meta name="viewport" content="width=device-width, initial-scale=1"> kullanın. Bu, mobil uyumlu sayfalar için standart başlangıç noktasıdır ve düzeninizin modern cihazlarda doğru görüntülenmesine yardımcı olur.

Sonraki adım

Sayfaları aynı anda hem arama hem de kullanılabilirlik açısından iyileştiriyorsanız, Competitor Analysis aracının içerik yapısını, teknik temelleri ve sayfa içi fırsatları daha sistematik biçimde karşılaştırmanıza nasıl yardımcı olabileceğine göz atın.

Arama ve pazar verilerini büyümeye dönüştürmeye hazır mısınız? Ücretsiz denemenizi başlatın.