Viewport Meta Etiketi Nedir?
Viewport meta etiketi, web sayfasının görünen alanını kontrol etmek için kullanılan bir meta etikettir. Bu etiket, tarayıcılara sayfanın farklı ekran boyutlarında nasıl görüntülenmesi gerektiğini söyler.
Web sayfalarının mobil uyumluluğu için çok önemlidir. Mobil cihazların ekran boyutları, masaüstü bilgisayarların ekran boyutlarından çok daha küçüktür. Tarayıcılar sayfayı masaüstü bilgisayarlar için tasarlanmış gibi görüntülemeye çalışabilir. Bu, sayfanın mobil cihazlarda okunamaz veya kullanılamaz hale gelmesine neden olabilir.
Bu etiket, tarayıcıya web sayfanızın nasıl görüntülenmesi gerektiğini belirten özel bir HTML etiketidir. Daha fazla bilgi için google’ın resmi dokümantasyonunu inceleyebilirsiniz.
Google’ın desteklediği meta etiketler ve özellikler
- Modern web geliştirme ve mobil dostu deneyimler için gereklidir.
- Doğru kullanım, içeriğin cihazlar arasında uygun şekilde görüntülenmesini sağlar.
- Belirli ihtiyaçlara göre viewport davranışını ince ayarlamak için ek seçenekleri göz önünde bulundurun.
Viewport Nasıl Kullanılır?
Viewport meta etiketi, HTML belgesinin head bölümünde kullanılır. Etiketin yapısı şu şekildedir:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Bu etikette, width özelliği, sayfanın genişliğini cihazın ekran genişliğine eşit olarak ayarlar. initial-scale özelliği ise sayfanın başlangıç ölçeğini 1 olarak ayarlar.
Daha iyi anlamanız açısından kodu bölümlere ayırıp detaylandıralım:
<meta> etiketi: Web sayfası hakkında meta veri (bilgi) sağlamak için kullanılır.
name=”viewport”: Viewport için talimat verdiğimizi belirtir.
content=”width=device-width, initial-scale=1″: Viewport’un özelliklerini tanımlar.
width=device-width: Viewport genişliğini cihazın ekran genişliğine ayarlar ve doğru ölçeklendirmeyi sağlar.
initial-scale=1: Zoom seviyesini 1’e (%100) ayarlar ve gereksiz zoomlamayı önler.
Viewport Etiketinde Kullanabileceğiniz Özellikler, İleri Düzey Kullanım
Viewport meta etiketinde, width, initial-scale, maximum-scale, minimum-scale, user-scalable ve zoom olmak üzere altı özellik daha kullanılabilir.
- Width: sayfanın genişliğini piksel cinsinden belirlemek için kullanılır.
- initial-scale: Sayfanın başlangıç ölçeğini bir sayı olarak belirlemek için kullanılır. Sayı ne kadar büyük olursa, sayfa o kadar yakınlaştırılmış olarak görüntülenir. Varsayılan değer 1’dir.
- maximum-scale: Sayfanın maksimum ölçeğini bir sayı olarak belirlemek için kullanılır. Sayı ne kadar büyük olursa, sayfa o kadar yakınlaştırılabilir. Varsayılan değer 1’dir.
- minimum-scale: Syfanın minimum ölçeğini bir sayı olarak belirlemek için kullanılır. Sayı ne kadar küçük olursa, sayfa o kadar uzaklaştırılabilir. Varsayılan değer 1’dir.
- user-scalable: Kullanıcının sayfayı yakınlaştırıp uzaklaştırmasına izin verip vermeyeceğini belirlemek için kullanılır. no değeri, kullanıcının yakınlaştırmaya veya uzaklaştırmaya izin verilmediğini belirtir. yes değeri ise kullanıcıya yakınlaştırma ve uzaklaştırma izni verir. Bu değer yes veya no olabilir. Varsayılan değer yes’tir.
- Zoom: Sayfanın yakınlaştırılıp uzaklaştırıldığında nasıl görüneceğini belirlemek için kullanılır. auto değeri, sayfanın yakınlaştırılıp uzaklaştırıldığında orijinal boyutunu korumasını sağlar. none değeri ise sayfanın yakınlaştırılıp uzaklaştırıldığında orijinal boyutunu değiştirmesini sağlar.
Google Ne Diyor? Viewport Etiketi Sıralama Faktörü müdür?
Google’da SEO alanında en bilinen isimlerden birisi olan John Mueller, viewport meta etiketi hakkında geçmişte Twitter’da(yeni adıyla X) birkaç kez paylaşım yaptı. Ana tavsiyesi, bu etiketin sitede yer alan tüm sayfalarda kullanılmasıdır.
Viewport meta etiketi, web sitenizin tüm cihazlarda doğru görüntülenmesini sağlar. Ayrıca, arama motorlarına sitenizin mobil cihazlarla uyumlu olduğunu da bildirir.
Mueller, Google’ın anlayabileceği meta etiket sayısında sınır olmadığını, ancak bunları akıllıca kullanmanın önemli olduğunu vurguladı. Ayrıca, Google tarafından dikkate alınmadığı için meta keywords etiketini kullanmaya gerek olmadığını belirtti.
Bu başlık altında yer alan içerik site checker web sitesinden çevrilmiştir. Twitter ve viewport ile alakalı içerik üreten siteleri inceledim. Ancak John Mueller tarafından yapılan açıklamaya dair bir görüntü, kanıt bulamadım. Yani doğrudan kendisi tarafından bu açıklama yapılmamış olabilir.
Doğrudan sıralama faktörü olduğunu düşünmüyorum. Ancak botların sayfayı anlamasına yardımcı olacağı için sitenize katkı sağlayacaktır. Birçok web sitesi altyapısında(wordpress, wix, tsoft, ticimax…) bu etiket standart olarak eklenmiş oluyor. Özel olarak yazılan bir siteniz varsa veya hazır script kullanıyorsanız bu etiketin sitenizde olup olmadığını kontrol etmenizde yarar var.
Viewport Örnekleri
Aşağıdaki örnekler nasıl kullanılabileceğini göstermektedir:
Sayfanın genişliğini cihazın ekran genişliğine eşit olarak ayarlamak:
<meta name=”viewport” content=”width=device-width”>
Sayfanın başlangıç ölçeğini 1 olarak ayarlamak:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Sayfanın maksimum ölçeğini 5 olarak ayarlamak:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=5″>
Sayfanın minimum ölçeğini 0.5 olarak ayarlamak:
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.5″>
Kullanıcıya sayfayı yakınlaştırıp uzaklaştırmasına izin vermemek:
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>
Sayfanın yakınlaştırılıp uzaklaştırıldığında orijinal boyutunu korumasını sağlamak:
<meta name=”viewport” content=”width=device-width, initial-scale=1, zoom=none”>
Mobil ve Tabletlerde Görüntüleme Alanı Boyutları
| Kategori | Boyut (Genişlik x Yükseklik) | Örnekler |
|---|---|---|
| Küçük Mobil Cihazlar | 320 x 480 | Eski iPhone’lar, birçok küçük Android cihazı |
| Orta Mobil Cihazlar | 360 x 640 | Samsung Galaxy, Google Pixel vb.’nin bazı modelleri |
| Büyük Mobil Cihazlar | 414 x 736 | iPhone 6/6S/7/8 Plus |
| Tablet Cihazlar | 600 x 1024 | Samsung Galaxy Tabs, Amazon Fire |
| Orta Boyutlu Tablet Cihazlar | 768 x 1024 | Portre modunda iPad |
| Büyük Boyutlu Tablet Cihazlar | 1024 x 1366 | Yatay modda iPad Pro 12,9 inç |
Bu boyutlar, cihazların ekran boyutunu ve çözünürlüğünü temsil eder. Ekran boyutu, cihazın fiziksel boyutunu gösterirken, çözünürlük, ekranda gösterilebilecek piksellerin sayısını gösterir.
Küçük mobil cihazlar, genellikle cep telefonları olarak adlandırılır. Bu cihazlar, genellikle 4 inçten daha küçük ekranlara sahiptirler. Orta ve büyük mobil cihazlar, genellikle akıllı telefonlar olarak adlandırılır. Bu cihazlar, genellikle 4 inç ile 6 inç arasında ekranlara sahiptirler. Tablet cihazlar, genellikle 7 inçten büyük ekranlara sahiptirler.
Mobil ve tablet cihazlar için ortak görüntüleme alanı boyutları, web siteleri ve uygulamalar geliştirirken göz önünde bulundurulması gereken önemli bir faktördür. Bu boyutlar, farklı cihazlarda içeriklerin düzgün bir şekilde görüntülenmesini sağlamak için kullanılır.
Ek Notlar:
- Bu boyutlar, 2024 yılı için geçerlidir. Cihaz üreticileri, zaman zaman cihazlarının ekran boyutlarını ve çözünürlüklerini değiştirebilirler.
- Bu boyutlar, yalnızca genel bir kılavuz olarak kullanılmalıdır. Belirli bir cihazın görüntüleme alanı boyutlarını öğrenmek için, cihazın üreticisinin web sitesini veya teknik özelliklerini kontrol etmeniz önerilir.
