SEO’ya Uygun Responsive Tasarım

SEO’ya Uygun Responsive Tasarım: Olmazsa Olmaz!

Bir web sitesinin kullanıcıları mobil telefon, tablet, dizüstü bilgisayar, büyük monitör veya alışılmadık en-boy oranlarına sahip ekranlar kullanabilir. Sayfa düzeni yalnızca belirli bir ekran boyutu için tasarlanmışsa bazı kullanıcılar okunamayan metinler, küçük butonlar, kırpılmış görseller, ekran dışına taşan tablolar veya yatay kaydırma sorunlarıyla karşılaşabilir.

Responsive veya duyarlı tasarım; sayfa düzenini, öğelerin boyutlarını ve görüntülenme biçimlerini kullanılabilir ekran alanına göre uyarlayan bir yöntemdir. Bu yöntem tek başına daha iyi sıralama, daha yüksek hız veya daha fazla satış garantisi vermez. Ancak doğru uygulanması mobil kullanıcıların erişimini iyileştirebilir, mobil ve masaüstü içerikleri arasındaki uyumsuzluk ihtimalini azaltabilir ve sitenin teknik yönetimini kolaylaştırabilir.

Bu konunun önemi Mobile-First Indexing ile daha da artmıştır. Google, öncelikle sitenin mobil sürümünün Googlebot Smartphone’a sunduğu içeriği inceler ve indeksler. Web’in Mobile-First Indexing sistemine geçiş süreci de Ekim 2023’te tamamlanmıştır.

Bu rehberde SEO’ya uygun responsive tasarımın ne olduğunu, avantajlarını ve sınırlamalarını, nasıl uygulanması gerektiğini ve performansının hangi araçlarla test edilebileceğini inceleyeceğiz.

Web Sitesinin Responsive Olmasının SEO Açısından Önemiyle İlgili Temel Noktalar

SEO’ya Uygun Responsive Tasarım Nedir?

Responsive tasarım veya Responsive Web Design, bir web sayfasının kullanıcının görüntüleme alanının boyutuna ve özelliklerine uyum sağlamasını mümkün kılan bir web tasarım ve geliştirme yöntemidir. Bu yöntemde genellikle URL ve sayfanın ana içeriği sabit kalır; ancak sütunların, menülerin, görsellerin, yazı tiplerinin ve etkileşimli öğelerin yerleşimi Viewport genişliğine göre değişir.

Temel amaç, masaüstü sürümünü yalnızca küçültmek değildir. Sayfa yapısı her ekran boyutunda okunabilir, dokunulabilir ve kullanılabilir durumda kalmalıdır. MDN de responsive tasarımı, sayfaların farklı ekran boyutları ve çözünürlüklerinde uygun şekilde görüntülenmesini sağlayan bir yaklaşım olarak tanımlar.

Responsive Tasarım Nasıl Çalışır?

Responsive tasarımda üç ana araç grubu önemli rol oynar:

• CSS Grid ve Flexbox gibi esnek yerleşim sistemleri
• %, rem, fr, minmax() ve clamp() gibi göreceli birimler ve fonksiyonlar
• Belirli koşullarda yerleşimi değiştirmek için Media Query’ler

Örneğin bir hizmet sayfası masaüstünde üç sütunlu olabilir, tablette iki sütuna dönüşebilir ve mobilde tüm kartları tek sütunda gösterebilir. Sayfanın içeriği değişmemiştir; yalnızca içeriğin düzenlenme biçimi mevcut alana uyarlanmıştır.

Responsive, Mobile-Friendly ve Mobile-First Arasındaki Fark Nedir?

Bu üç terim farklı kavramları ifade eder:

Responsive Design, sayfa düzenini ekran boyutuna uyarlayan yöntemdir.

Mobile-Friendly, mobil cihazlarda kullanılabilir olan bir siteyi tanımlar. Bir site mobilde kullanılabilir olabilir; ancak yerleşimi tüm ekran boyutlarına tamamen ve esnek biçimde uyum sağlamayabilir.

Mobile-First Design, tasarım sürecini en küçük ekrandan başlatan ve ardından özellikleri ve yerleşimi daha büyük ekranlar için geliştiren bir tasarım yaklaşımıdır.

Mobile-First, responsive tasarım için zorunlu bir koşul değildir. Responsive bir site Desktop-First yaklaşımıyla da oluşturulabilir. Bununla birlikte mobil cihazlardan başlamak, birçok projede içeriğin daha iyi önceliklendirilmesine ve gereksiz CSS kullanımının azaltılmasına yardımcı olur.

Responsive Tasarım ile Mobile-First Indexing Arasındaki Fark Nedir?

Mobile-First Design, sitenin nasıl tasarlandığıyla ilgilidir. Mobile-First Indexing ise Google’ın tarama ve indeksleme yöntemini ifade eder.

Mobile-First Indexing sisteminde Google, mobil kullanıcıların gördüğü sürümü temel sürüm olarak kabul eder. Bu nedenle bir site Desktop-First yaklaşımıyla hazırlanmış olsa bile Mobile-First Indexing kapsamında değerlendirilebilir.

Responsive Tasarımın Diğer Mobil Görüntüleme Yöntemleriyle Karşılaştırılması

Google, sayfaların farklı cihazlarda sunulması için üç temel yöntemi destekler:

Kriter	Responsive Tasarım	Dynamic Serving	Ayrı Mobil Sürüm
Mobil ve masaüstü URL’si	Aynı	Aynı	Farklı
HTML	Genellikle aynı	Cihaza göre farklı	Farklı
Bakım karmaşıklığı	Daha düşük	Daha yüksek	Daha yüksek
İçerik uyumsuzluğu ihtimali	Daha düşük	Orta	Daha yüksek
Ek yapılandırma ihtiyacı	Sınırlı	User-Agent algılama ve Vary Header	Canonical, Alternate ve Redirect
Yaygın kullanım alanı	Yeni projelerin çoğu	Özel teknik koşullar	Eski sistemler veya özel projeler

Google responsive tasarımı önerir; çünkü genellikle uygulanması ve bakımı en kolay yöntemdir. Bu öneri, Responsive Design için özel bir sıralama avantajı sağlandığı anlamına gelmez. Dynamic Serving ve ayrı URL’ler de doğru şekilde uygulandığında kullanılabilir.

Responsive Tasarım SEO’yu Nasıl Etkiler?

Responsive tasarım, sıralamayı doğrudan artıran bağımsız bir faktör değildir. Google, yalnızca CSS Grid, Media Query veya ortak bir URL kullanıldığı için bir sayfaya daha yüksek sıralama vermez.

Responsive tasarımın temel etkisi, teknik sorunların ve kötü kullanıcı deneyiminin azaltılmasıdır. Doğru uygulandığında Googlebot’un ana içeriğe erişimini kolaylaştırabilir, mobil ve masaüstü sürümler arasındaki uyumu artırabilir ve mobil kullanıcıların sayfayı daha rahat kullanmasını sağlayabilir.

Responsive Tasarım ile Mobile-First Indexing Arasındaki İlişki

Responsive tasarımda genellikle sayfanın ana içeriği ve HTML yapısı mobil ve masaüstü sürümlerinde ortaktır. Bu özellik; metinler, başlıklar, dahili bağlantılar, görseller ve yapılandırılmış veriler arasındaki farklılıkların oluşma ihtimalini azaltır.

Eğer mobil sürüm masaüstünden daha az içerik içeriyorsa, Google sayfayı anlamak ve sıralamak için yalnızca bu sınırlı içeriğe erişebilir. Bu nedenle Google, ana içerik, meta veriler, görseller ve yapılandırılmış verilerin mobil ve masaüstü sürümlerde eşdeğer olmasını önerir.

Responsive Tasarım Sitenin Sıralamasını Doğrudan Artırır mı?

Hayır. Responsive olmak bağımsız bir sıralama avantajı değildir ve uygulanması daha iyi sıralama garantisi vermez.

Bir site tamamen responsive olabilir; ancak zayıf içerik, kötü yapı, eksik dahili bağlantılar, düşük hız veya indeksleme sorunları nedeniyle yine de başarısız olabilir. Buna karşılık Dynamic Serving kullanan bir site de doğru uygulandığında başarılı SEO performansı gösterebilir.

Responsive tasarımın avantajı, bazı teknik hataların oluşma ihtimalini azaltması ve kullanıcıların sayfayı daha rahat kullanabileceği bir ortam oluşturmasıdır.

Hemen Çıkma Oranının Azalması Sıralamayı İyileştirir mi?

Hemen çıkma oranı ve kullanıcıların sayfada kalma süresi doğrudan ve bağımsız sıralama faktörleri olarak değerlendirilmemelidir. Bu metrikler kullanıcı davranışlarını analiz etmek ve sayfanın performansını değerlendirmek için faydalıdır; ancak hemen çıkma oranındaki her düşüşün sıralama artışı anlamına geldiği söylenemez.

Responsive tasarımın etkisini gerçek iş hedeflerine göre değerlendirmek daha doğrudur. Örneğin:

• Form doldurma
• Ürün satın alma
• Şirketle iletişime geçme
• Ana butonlara tıklama
• Daha fazla sayfa görüntüleme
• Ödeme sürecindeki hataların azalması

Responsive Tasarımın Dönüşüm Oranına Etkisi

Kullanıcı içeriği yakınlaştırmadan okuyabiliyor, menüler arasında rahatça gezinebiliyor ve formu doldurma veya satın alma işlemini hatasız tamamlayabiliyorsa, istenen işlemi gerçekleştirme olasılığı artar.

Bununla birlikte responsive tasarım, dönüşüm oranını etkileyen faktörlerden yalnızca biridir. Fiyat, marka güvenilirliği, teklifin kalitesi, hız, sayfa metni, form tasarımı ve kullanıcı güveni de önemli rol oynar.

Responsive Tasarımın Avantajları ve Sınırlamaları

Responsive tasarım çoğu proje için doğru bir seçimdir; ancak her yöntem gibi bazı sınırlamalara da sahiptir. Avantajları ve dezavantajları birlikte değerlendirmek daha gerçekçi kararlar alınmasını sağlar.

Responsive Tasarımın Avantajları

Her sayfa için tek bir URL kullanılması

Kullanıcılar ve arama motorları tüm cihazlarda aynı URL’ye erişir. Bu durum paylaşımı, bağlantı oluşturmayı ve veri analizini kolaylaştırır.

İçeriğin daha kolay yönetilmesi

İçerik tek bir sayfa üzerinden yönetilir ve metinlerin, görsellerin veya bağlantıların iki ayrı sürümde güncellenmesine gerek kalmaz.

Mobil ve masaüstü sürümleri arasındaki uyumsuzluk riskinin azalması

Başlıklar, meta veriler, yapılandırılmış veriler ve dahili bağlantılar genellikle aynı HTML yapısını kullanır.

SEO yapılandırmasının daha az karmaşık olması

Ayrı mobil URL’lere kıyasla Canonical, Alternate ve cihaza özel Redirect yapılandırmalarına daha az ihtiyaç duyulur.

Analitik verilerin tek noktada toplanması

Tüm ziyaretler tek bir URL üzerinde kaydedilir ve istatistik araçlarında performans analizi daha kolay yapılır.

Daha düşük bakım maliyeti

Çoğu projede tek bir responsive temayı yönetmek, tamamen ayrı iki temayı yönetmekten daha kolaydır.

Responsive Tasarımın Dezavantajları ve Sınırlamaları

Responsive olmak site hızını garanti etmez

Sayfa mobilde doğru görünebilir; ancak büyük görseller, ağır JavaScript dosyaları ve çok sayıda yazı tipi yine de performansı düşürebilir.

Öğeleri gizlemek, indirilmelerini engellemez

Bir görsel, slider veya video yalnızca CSS ile gizlenirse tarayıcı ilgili dosyayı yine de indirebilir. Görsel olarak gizlemek, yüklenmesini engellemek anlamına gelmez.

Karmaşık yerleşimler daha fazla test gerektirir

Tablolar, paneller, grafikler ve çok adımlı formlar mobil cihazlarda özel tasarım çözümlerine ihtiyaç duyabilir.

Eski siteleri uyarlamak maliyetli olabilir

Sabit genişlikli temalar, eski tablolar veya güncelliğini yitirmiş framework’ler kullanılıyorsa yalnızca birkaç Media Query eklemek yeterli olmayabilir.

Tek bir yerleşim her zaman tüm ihtiyaçları karşılamaz

Mobil kullanıcılar bazen farklı içerik sıralaması, daha hızlı erişilebilen butonlar veya daha kısa işlemler bekleyebilir. Responsive tasarım bu davranış farklılıklarını da dikkate almalıdır.

Responsive ve SEO Odaklı Web Tasarımın Teknik İlkeleri

Meta Viewport Ayarının Doğru Yapılması

Mobil tarayıcılar, Viewport ayarı bulunmayan sayfaları geniş bir sanal alanda görüntüleyip daha sonra küçültebilir. Bu durum metinlerin ve butonların çok küçük görünmesine neden olur.

Temel kod genellikle şu şekildedir:

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

Bu etiket, tarayıcıya sayfa genişliğinin cihaz genişliğiyle uyumlu olması gerektiğini bildirir. Mobil cihazlarda doğru görüntüleme için temel bir gerekliliktir; ancak tek başına yatay kaydırma veya yerleşim sorunlarını çözmez.

Yakınlaştırmayı engellemek amacıyla user-scalable=no gibi değerleri kullanmayın veya maximum-scale değerini sınırlandırmayın. Bu ayarlar, görme güçlüğü yaşayan kullanıcıların içeriğe erişimini kısıtlayabilir.

Esnek Yerleşim Sistemlerinin Kullanılması

Flexbox tek boyutlu yerleşimler, CSS Grid ise iki boyutlu yapılar için uygundur. Örneğin bir bölümdeki kartlar Grid kullanılarak esnek biçimde görüntülenebilir:

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 280px), 1fr)
  );
  gap: 1.5rem;
}

Bu örnekte sütun sayısı mevcut alana göre değişir ve dar ekranlarda kartlar tek sütun hâline gelir.

Göreceli Birimlerin Amaca Uygun Kullanılması

Piksel kullanımı yasak değildir. px; Border, ikonlar, bazı kontroller ve kesin değerler için kullanılabilir. Bununla birlikte konteyner genişliği, tipografi ve temel boşluklar için esnek birimler genellikle daha iyi sonuç verir.

Örnek:

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

clamp() fonksiyonu, metin boyutunun belirlenen minimum ve maksimum değerler arasında Viewport’a göre değişmesini sağlar.

Breakpoint’lerin İçeriğe Göre Belirlenmesi

Breakpoint’ler yalnızca iPhone, iPad veya Galaxy gibi cihaz adlarına göre belirlenmemelidir; çünkü ekran boyutları sürekli değişmektedir.

Sayfayı dar genişlikten genişe veya genişten dara doğru inceleyin ve aşağıdaki durumlarda yeni bir Breakpoint tanımlayın:

• Metinler aşırı sıkıştığında
• Kartlar için yeterli alan kalmadığında
• Menü birden fazla satıra geçtiğinde
• Tablo ekranın dışına taştığında
• Butonlar birbirine fazla yaklaştığında
• İçeriğin görsel sıralaması uygunsuz hâle geldiğinde

Media Query’ler, Viewport genişliğinin yanı sıra Orientation, Hover, Pointer türü ve hareket azaltma tercihi gibi koşulları da kontrol edebilir.

Yatay Kaydırmanın Önlenmesi

Yatay kaydırma genellikle aşağıdaki nedenlerden biriyle ortaya çıkar:

• Viewport’tan daha büyük sabit genişlik
• Genişliği sınırlandırılmamış görsel veya video
• Geniş tablo
• Çok uzun metin veya URL
• Negatif Margin
• Konteyner dışına çıkan Absolute öğe
• pre ve code kod blokları
• Sabit genişliğe sahip iframe

Standart görseller ve videolar için aşağıdaki kural kullanılabilir:

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

Sorunu gizlemek amacıyla genel olarak overflow-x: hidden kullanılması önerilmez. Bu yöntem yalnızca hatanın görsel belirtisini gizler ve içeriğin veya bazı kontrollerin erişilemez hâle gelmesine neden olabilir.

Mobil ve Masaüstü İçerik Yönetimi

Ana İçeriği Mobil Sürümde Koruyun

Mobil sürüm, sayfanın konusunu anlamak için gerekli olan ana içeriği ve bilgileri kullanıcılara ve Googlebot’a sunmalıdır.

Mobil sayfayı kısaltmak amacıyla aşağıdaki gibi önemli bölümler kaldırılmamalıdır:

• Ürün veya hizmetin ana açıklamaları
• Fiyat ve koşul bilgileri
• Temel eğitici içerik
• Önemli bağlantılar
• Gerekli görseller veya videolar
• İletişim bilgileri
• Yorumlar ve değerlendirmeler
• Teknik özellikler

Mobil ve masaüstü içeriklerin görsel açıdan tamamen aynı olması gerekmez; ancak temel bilgiler bakımından eşdeğer olmalıdır.

Başlıkları ve Meta Verileri Uyumlu Tutun

Responsive tasarımda Title, Meta Description ve başlıklar genellikle ortak bir HTML üzerinden sunulur. Dynamic Serving veya ayrı bir mobil sürüm kullanıyorsanız başlıklar ve temel bilgiler eşdeğer olmalıdır.

Kelimesi kelimesine aynı olmaları her zaman gerekli değildir; ancak mobil sürüm masaüstü sürümden farklı bir amaç, konu veya bilgi sunmamalıdır.

Önemli Dahili Bağlantıları Kaldırmayın

Bazen mobil menüyü sadeleştirmek amacıyla çok sayıda bağlantı kaldırılır. Bu durum kullanıcıların erişimini ve sayfaların taranma yollarını sınırlandırabilir.

Mobil menünün görünümü farklı olabilir; ancak önemli sayfalara mantıklı yollar üzerinden erişim sağlanmaya devam edilmelidir. Örneğin:

• Hizmet sayfaları
• Ana kategoriler
• Önemli ürünler
• Rehber içerikler
• İletişim sayfası
• Kurallar ve kurumsal bilgiler

Yapılandırılmış Verileri Koruyun

Site Product, Article, Breadcrumb veya Organization gibi yapılandırılmış veriler kullanıyorsa bu verilerin gerekli bilgileri mobil sürümde de yer almalıdır.

Responsive tasarımda HTML ortak olduğu için bu konu genellikle doğal olarak çözülür. Diğer yöntemlerde ise Markup uyumluluğu ayrıca kontrol edilmelidir.

Sekme ve Akordeon Kullanımı

Uzun içeriklerin mobil sayfalarda sekmeler veya akordeonlar içine yerleştirilmesinde sakınca yoktur. Ancak şu koşullar sağlanmalıdır:

• İçerik sayfanın HTML veya DOM yapısında bulunmalıdır.
• Kullanıcı içeriği kolayca açabilmelidir.
• Ana içerik yalnızca arama motorlarını manipüle etmek amacıyla gizlenmemelidir.
• İçeriğin yüklenmesi karmaşık etkileşimlere veya öngörülemeyen davranışlara bağlı olmamalıdır.

Sekmeler ve akordeonlar içeriğin düzenlenmesine yardımcı olabilir; ancak tüm önemli bilgiler birden fazla etkileşim adımının arkasına gizlenmemelidir.

Responsive Görsellerin ve Medyaların Optimizasyonu

Küçültülmüş Görsel ile Responsive Görsel Arasındaki Fark

2500 piksel genişliğindeki bir görsel CSS ile 320 piksel genişlikte gösterildiğinde görünümü responsive olabilir; ancak tarayıcı yine de büyük dosyayı indirebilir.

Gerçek bir responsive görsel, tarayıcının ekran boyutuna, piksel yoğunluğuna ve sayfa yerleşimine göre daha uygun bir dosya seçmesini sağlar.

srcset ve sizes Kullanımı

srcset özelliği görselin farklı sürümlerini tanımlar. sizes ise görselin sayfa düzeninde yaklaşık olarak hangi boyutta gösterileceğini belirtir:

<img
  src="responsive-design-800.webp"
  srcset="
    responsive-design-480.webp 480w,
    responsive-design-800.webp 800w,
    responsive-design-1200.webp 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1000px) 50vw,
    800px
  "
  width="1200"
  height="800"
  alt="Responsive bir sitenin mobil ve masaüstü görünümünün karşılaştırılması"
>

Tarayıcı bu bilgilerden yararlanarak en uygun dosyayı seçer. Bu yöntem mobil kullanıcıların indirdiği veri miktarını azaltabilir.

<picture> Ne Zaman Kullanılmalıdır?

Çoğu görsel için srcset ve sizes yeterlidir. <picture> öğesi daha ayrıntılı kontrol gerektiğinde kullanılmalıdır. Örneğin:

• Mobilde görsel kadrajını değiştirmek
• Yatay görsel yerine dikey görsel göstermek
• Yedek bir sürümle birlikte AVIF veya WebP formatı sunmak
• Belirli bir Breakpoint’te farklı bir görsel kullanmak

Örnek:

<picture>
  <source
    media="(max-width: 600px)"
    srcset="responsive-design-mobile.webp"
  >
  <source
    type="image/avif"
    srcset="responsive-design-desktop.avif"
  >
  <img
    src="responsive-design-desktop.webp"
    width="1200"
    height="700"
    alt="Responsive web tasarım örneği"
  >
</picture>

<picture> öğesi özellikle Art Direction için kullanışlıdır. Yani yalnızca dosya boyutunun değil, görsel kompozisyonunun da değişmesi gereken durumlarda tercih edilir.

Görsellerin Genişlik ve Yükseklik Değerlerini Belirleme

width ve height özellikleri, tarayıcının dosya indirilmeden önce en-boy oranını algılamasına ve gerekli alanı ayırmasına yardımcı olur. Bu işlem öğelerin ani şekilde yer değiştirme ihtimalini ve CLS değerini azaltır.

Responsive tasarımda HTML üzerinden genişlik ve yükseklik belirlemek, görselin CSS ile yeniden boyutlandırılmasını engellemez:

img {
  max-width: 100%;
  height: auto;
}

Görsellerde Lazy Loading Kullanımı

Sayfanın alt bölümlerindeki görseller için Lazy Loading kullanılabilir:

<img
  src="example.webp"
  loading="lazy"
  width="800"
  height="500"
  alt="Responsive yerleşim örneği"
>

Ancak sayfanın üst bölümündeki ve muhtemelen LCP öğesi olan ana görsel varsayılan olarak Lazy Load edilmemelidir. Aksi hâlde ana içeriğin görüntülenmesi gecikebilir.

Video ve iframe’leri Responsive Hâle Getirme

Videoların en-boy oranını korumak için aspect-ratio kullanılabilir:

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
} 

Bu yöntem YouTube videoları, haritalar ve gömülü araçlar için kullanılabilir.

Tabloların Mobilde Gösterilmesi

Kısa tablolar için tabloyu kaydırılabilir bir konteyner içine yerleştirmek uygun bir çözüm olabilir:

.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

Daha büyük tablolar için aşağıdaki çözümleri de değerlendirin:

• Sütunları önceliklendirmek
• Mobilde satırları kartlara dönüştürmek
• Ana sütunu sabit tutmak
• Tablonun üzerinde bir özet sunmak
• Sütunları filtreleme veya seçme imkânı sağlamak

Sütunların gizlenmesi yalnızca kaldırılan bilgilerin kullanıcının karar vermesi için gerekli olmadığı durumlarda uygundur.

Responsive Tasarım ile Core Web Vitals Arasındaki İlişki

Core Web Vitals, bir sayfanın yükleme performansını, etkileşimlere yanıt verme hızını ve görsel kararlılığını ölçen üç temel metriktir:

Metrik	Ölçülen Konu	İdeal Aralık
LCP	Ana içeriğin görüntülenmesi	En fazla 2,5 saniye
INP	Etkileşimlere yanıt verme	En fazla 200 milisaniye
CLS	Görsel kararlılık	En fazla 0,1

İyi durumda kabul edilmek için sayfa ziyaretlerinin en az yüzde 75’inin her metrikte iyi aralıkta yer alması gerekir.

Core Web Vitals, Google’ın sıralama sistemlerinde kullanılır; ancak iyi puanlar almak bir sayfanın yüksek sıralama elde edeceğini garanti etmez. İçeriğin aramayla ilgisi, bilgi kalitesi, bağlantılar ve diğer sinyaller önemini korur.

Mobilde LCP’yi İyileştirme

LCP genellikle sayfanın üst bölümündeki ana öğelerden biridir. Örneğin:

• Hero görseli
• Ürün görseli
• Büyük başlık
• Ana banner
• Büyük metin bloğu

LCP’yi iyileştirmek için:

• LCP görselini uygun boyutta sunun.
• Ana görselde gereksiz yere Lazy Loading kullanmayın.
• Gerekli CSS dosyalarını tarayıcıya daha hızlı ulaştırın.
• Sunucu yanıt süresini ve TTFB değerini inceleyin.
• Gerekli yazı tiplerini sınırlandırın ve optimize edin.
• Render işlemini engelleyen kaynakları azaltın.
• Sayfanın üst kısmında ağır slider kullanmaktan kaçının.

Responsive tasarım, yalnızca mobil cihazlara uygun dosya ve kaynaklar da sunulduğunda LCP’nin iyileşmesine katkı sağlar.

INP’yi İyileştirme

INP, sayfanın tıklama, dokunma veya klavye girişine ne kadar hızlı yanıt verdiğini ölçer. Zayıf INP performansının yaygın nedenleri şunlardır:

• Ağır JavaScript kullanımı
• Long Task’ler
• Karmaşık Event Handler’lar
• Üçüncü taraf komut dosyaları
• Çok büyük DOM yapısı
• Kapsamlı yeniden render işlemleri
• Ağır filtreler ve menüler

Butonların büyük olması etkileşimi kolaylaştırır; ancak tek başına tarayıcının yanıt süresini azaltmaz. INP’yi iyileştirmek için JavaScript performansı ve Main Thread kullanımı da incelenmelidir.

CLS’yi Azaltma

CLS, sayfadaki öğeler kullanıcının beklemediği şekilde yer değiştirdiğinde artar. Yaygın nedenler şunlardır:

• Boyutları belirtilmemiş görseller
• Alan ayrılmamış reklamlar
• Sayfanın üst kısmındaki bannerlar
• Geç yüklenen yazı tipleri
• Aniden görüntülenen hata mesajları
• Mevcut bölümlerin üzerine sonradan eklenen içerikler

CLS’yi azaltmak için görseller, videolar, reklamlar ve etkileşimli araçlar için gerekli alanı önceden belirleyin.

Laboratuvar Verileri ile Gerçek Kullanıcı Verileri Arasındaki Fark

Lighthouse, sayfanın performansını simüle edilmiş bir ortamda inceler ve sorunları tespit etmek için uygundur. Field Data ise gerçek kullanıcıların farklı cihazlar, ağ bağlantıları ve koşullar altındaki deneyimini gösterir.

Bir sayfa Lighthouse testinde iyi puan alabilir; ancak gerçek kullanıcılar daha zayıf internet bağlantısı veya eski cihazlar nedeniyle farklı bir deneyim yaşayabilir. Bu nedenle nihai kararlar yalnızca tek bir laboratuvar testine göre verilmemelidir.

Mobilde Kullanıcı Deneyimi ve Erişilebilirlik İlkeleri

Metin Boyutu ve Okunabilirlik

16 piksel, ana metin için genellikle iyi bir başlangıç noktasıdır; ancak tüm yazı tipleri için sabit ve ideal bir kural değildir. Okunabilirlik aşağıdaki faktörlere bağlıdır:

• Yazı tipinin türü ve kalınlığı
• Harf yüksekliği
• Satır aralığı
• Satır uzunluğu
• Kontrast
• Paragraflar arasındaki boşluk
• Yakınlaştırma (Zoom) imkânı

Ana metni okumak için kullanıcı zorunlu olarak Zoom yapmak zorunda kalmamalıdır.

Buton ve Bağlantı Boyutları

WCAG 2.2 AA seviyesine göre Pointer hedefleri normal şartlarda en az 24 × 24 CSS piksel alanına sahip olmalıdır; ancak bazı istisnalar bulunmaktadır. Daha ileri seviye olan AAA kriteri ise 44 × 44 piksel boyutunu önerir.

Mobil cihazlardaki ana butonlar için yaklaşık 44 ila 48 piksel boyutlarının kullanılması yanlış dokunma olasılığını genellikle azaltır. Butonun boyutunun yanı sıra çevresindeki diğer kontrollerle arasındaki boşluk da önemlidir.

Mobil Menü Tasarımı

Mobil menü şu özelliklere sahip olmalıdır:

• Kolayca bulunabilmelidir.
• Açma ve kapatma düğmeleri belirgin olmalıdır.
• Ana sayfalar kaldırılmamalıdır.
• Gereksiz derinlikte menülerden kaçınılmalıdır.
• Klavye ile de kullanılabilir olmalıdır.
• Açıldıktan sonra Focus yönetimi doğru yapılmalıdır.
• Kullanıcının çıkış yapamayacağı şekilde ekranı kapatmamalıdır.

Hamburger menü tek seçenek değildir. Bazı sitelerde ekranın altındaki Tab Bar veya doğrudan bağlantılar ile “Daha Fazla” menüsünün birlikte kullanılması daha başarılı sonuç verebilir.

Formların Optimize Edilmesi

Mobil formlar için:

• Yalnızca gerekli bilgileri isteyin.
• Her alanın Label bilgisini koruyun.
• email, tel ve number gibi uygun Input türlerini kullanın.
• Hata mesajını ilgili alanın yanında gösterin.
• Autofill özelliğini destekleyin.
• Gönder butonunu yeterince büyük tasarlayın.
• Hata oluştuğunda girilen verileri silmeyin.
• Gerekirse uzun formları aşamalara bölün.

Rahatsız Edici Pop-up’ları Önleyin

Tam ekran pop-up’lar, büyük çerez banner’ları, canlı sohbet pencereleri ve sabit butonlar mobil cihazlarda ekranın büyük bölümünü kaplayabilir.

Sabit öğelerin kapladığı alanı kontrol edin ve aşağıdaki koşulların sağlandığından emin olun:

• Ana içerik görünür olmalıdır.
• Kapatma düğmesi açıkça görülebilmelidir.
• Aynı anda birden fazla Sticky öğe gösterilmemelidir.
• Kullanıcı içeriği görmek için zorunlu olarak tıklamak zorunda kalmamalıdır.

Yakınlaştırma Özelliğini Koruyun

Kullanıcı gerektiğinde Pinch-to-Zoom ile metni veya görselleri büyütebilmelidir. Bu özelliğin devre dışı bırakılması, görme güçlüğü yaşayan kullanıcıların erişimini kısıtlayabilir.

Hareketi Azaltma Tercihine Saygı Gösterin

Yoğun hareketlerden rahatsız olan kullanıcılar için aşağıdaki Media Query kullanılabilir:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Responsive Tasarımda Yaygın Yapılan Hatalar

Mobil Tasarlamak Yerine Masaüstü Sürümünü Küçültmek

Yalnızca masaüstündeki tüm öğeler küçültülürse içerik önceliği, buton boyutları ve kullanıcı akışı mobil cihazlar için uygun olmayacaktır.

Mobilde Ana İçeriği Kaldırmak

Temel içerik yalnızca sayfayı kısaltmak amacıyla kaldırılmamalıdır. Bunun yerine sekmeler, akordeonlar ve daha iyi bir içerik organizasyonu kullanılabilir.

Sabit Genişlik Kullanmak

Sabit genişliğe sahip konteynerler, tablolar, görseller veya formlar küçük ekranlarda sayfa dışına taşabilir.

Büyük Masaüstü Görsellerini Yüklemek

Görselin küçük görünmesi dosya boyutunu azaltmaz. Mobil kullanıcılar için uygun boyuttaki görsel sürümleri sunulmalıdır.

Mobil Menüden Önemli Bağlantıları Kaldırmak

Menünün sade olması, kullanıcıların ana sayfalara erişimini engellememelidir.

Slider ve Animasyonları Aşırı Kullanmak

Slider’lar gereksiz JavaScript, görseller ve DOM yükü oluşturabilir. Her slider’ın belirli bir amacı olmalı ve önemli içerikler yalnızca sonraki slaytlarda yer almamalıdır.

overflow-x: hidden ile Hatayı Gizlemek

Bu yöntem sayfa dışına taşan içeriği gizleyebilir; ancak sorunun gerçek nedenini ortadan kaldırmaz.

Hover’ı Tek Etkileşim Yöntemi Olarak Kullanmak

Mobil cihazlarda gerçek Hover desteği yoktur. Önemli bilgiler veya kontroller yalnızca fare imleci üzerine gelindiğinde görünmemelidir.

Gizli Kaynakların Yüklenmesi

display: none olarak ayarlanan bir öğe, görselini, yazı tipini veya komut dosyasını yine de indirebilir. Bunu doğrulamak için tarayıcının Network ve Performance araçlarını inceleyin.

Yalnızca Ana Sayfayı Test Etmek

Makale şablonları, ürün sayfaları, kategori sayfaları, arama sonuçları, iletişim formları ve ödeme sayfalarının her biri farklı responsive sorunları barındırabilir.

Bir Sitenin Responsive Olup Olmadığı Nasıl Kontrol Edilir?

Chrome DevTools

Chrome DevTools içindeki Device Mode, Viewport boyutunu değiştirmeyi ve bazı cihazları simüle etmeyi sağlar.

Yalnızca birkaç hazır cihaz modelini kontrol etmek yerine, yerleşimin bozulduğu noktaları belirlemek için sayfa genişliğini sürekli olarak artırıp azaltın.

Aşağıdaki öğeleri kontrol edin:

• Yatay kaydırma
• Butonlar arasındaki boşluk
• Menünün açılıp kapanması
• İçerik sıralaması
• Formlar
• Tablolar
• Görseller
• Yatay ekran yönü
• Yavaş ağ bağlantısı
• Console hataları

Gerçek Cihazlarda Test

Simülatörler; tarayıcı farklılıklarını, dokunmatik etkileşimleri, sanal klavyeyi ve donanım performansını tamamen yansıtamaz.

Siteyi en az aşağıdaki koşullarda test edin:

• Bir Android telefon
• Bir iPhone
• Bir tablet veya orta genişlikte Viewport
• Bir dizüstü bilgisayar
• Geniş ekranlı bir monitör
• Safari ve Chrome
• Ofis ağından daha yavaş bir internet bağlantısı

Lighthouse ve PageSpeed Insights

Lighthouse; Performance, Accessibility, Best Practices ve SEO alanlarını inceleyen otomatik bir araçtır. Raporu teknik sorunları bulmak için faydalıdır; ancak aldığı puan tek başına sayfanın başarısını belirleyen bir kriter olmamalıdır.

PageSpeed Insights, laboratuvar verilerinin yanı sıra yeterli veri bulunması hâlinde gerçek kullanıcı verilerini de gösterir.

Search Console’da URL Inspection

URL Inspection aşağıdaki konuları kontrol etmek için faydalıdır:

• Sayfanın indeks durumu
• Google tarafından görülen HTML
• Yüklenen kaynaklar
• Tarama hataları
• Seçilen Canonical
• İndeksleme talebinde bulunma imkânı

Bu araç Mobile-Friendly sertifikası vermez ve gerçek cihazlarda yapılan kullanıcı deneyimi testlerinin yerini tutmaz.

Kullanımdan Kaldırılan Mobile-Friendly Test Aracı

Google Mobile-Friendly Test ve Search Console Mobile Usability raporu 1 Aralık 2023 tarihinde kullanımdan kaldırıldı. Bu nedenle yeni rehberlerde aktif araçlar olarak önerilmemelidir.

Sitenin Tüm Şablonlarını Test Edin

Her şablondan en az bir URL kontrol edilmelidir:

• Ana sayfa
• Makale
• Kategori
• Hizmetler
• Ürün
• Arşiv
• Arama sonuçları
• İletişim sayfası
• Kayıt formu
• Alışveriş sepeti
• Ödeme
• 404 sayfası

Şablon kaynaklı sorunlar genellikle çok sayıda URL’de tekrar eder. Bu nedenle Template üzerinde yapılan bir düzeltme, tek bir sayfanın düzeltilmesinden daha büyük etki oluşturabilir.

Responsive Olmayan Bir Site Tamamen Yeniden Tasarlanmalı mı?

Sınırlı Düzenlemelerle Çözülebilen Sorunlar

Bazı sitelerde sorunlar sınırlı değişikliklerle giderilebilir:

• Meta Viewport eklemek
• Konteyner genişliğini düzeltmek
• Görselleri responsive hâle getirmek
• Mobil menüyü yeniden tasarlamak
• Butonlar arasındaki boşluğu artırmak
• Tabloları düzeltmek
• Media Query eklemek
• Gereksiz yazı tiplerini ve komut dosyalarını azaltmak

Tema Üzerinde Düzenleme Yapmak Ne Zaman Yeterli Değildir?

Aşağıdaki durumlarda tam kapsamlı yeniden tasarım daha mantıklıdır:

• Tema tablo tabanlı veya sabit genişlikli olarak geliştirilmişse
• CSS yapısı aşırı bağımlı ve bakımı zor durumdaysa
• DOM ve içerik yapısı mobil cihazlara uygun değilse
• Bir bölümde yapılan değişiklik diğer bölümlerin bozulmasına neden oluyorsa
• Mobil ve masaüstü sürümlerinde farklı ve dağınık içerikler bulunuyorsa
• Framework veya sayfa oluşturucu ciddi sınırlamalar getiriyorsa
• Kademeli düzeltmenin maliyeti yeniden tasarımdan daha yüksekse

Hangi Sayfalar Önce Düzeltilmelidir?

Önceliği verilere göre belirleyin:

1. Gelir sağlayan ve dönüşüme yakın sayfalar
2. En fazla mobil trafik alan sayfalar
3. Çok sayıda URL oluşturan şablonlar
4. Core Web Vitals performansı zayıf sayfalar
5. Form veya ödeme hatası bulunan sayfalar
6. Yatay kaydırma veya kesilmiş içerik sorunu bulunan sayfalar

SEO’ya Zarar Vermeden Yeniden Tasarım Nasıl Yapılır?

Responsive yeniden tasarım sürecinde aşağıdaki öğeleri koruyun veya kontrol edin:

• URL’ler
• Canonical etiketleri
• Title ve Meta Description
• H1 ve başlık yapısı
• Ana içerik
• Dahili bağlantılar
• Yapılandırılmış veriler
• Görsellerin Alt metinleri
• Index ve Noindex durumları
• Gerekli Redirect’ler
• İzleme kodları
• Formlar ve Conversion işlemleri

Yayın öncesinde ve sonrasında önemli sayfalardan bir örnek grubu Crawl ederek sonuçları karşılaştırın.

SEO’ya Uygun Responsive Tasarım Kontrol Listesi

Yerleşim

• Meta Viewport doğru şekilde ayarlanmıştır.
• Sayfada farklı genişliklerde yatay kaydırma oluşmamaktadır.
• Yerleşim içeriğe göre değişmektedir.
• Grid ve Flexbox mantıklı şekilde kullanılmıştır.
• Absolute öğeler sayfanın dışına taşmamaktadır.
• Mobil cihazların yatay ekran yönü kontrol edilmiştir.

İçerik ve SEO

• Ana içerik mobil ve masaüstü sürümlerde eşdeğerdir.
• H1, başlıklar ve meta veriler uyumludur.
• Önemli dahili bağlantılar mobil sürümde bulunmaktadır.
• Yapılandırılmış veriler korunmuştur.
• Sekme ve akordeon içeriklerine erişilebilmektedir.
• Canonical bağlantıları ve indeks durumu değişmemiştir.

Görseller ve Medya

• Görseller ihtiyaç duyulandan daha büyük boyutlarda indirilmemektedir.
• Önemli görsellerde srcset ve sizes kullanılmıştır.
• Görsellerin genişlik ve yükseklik değerleri belirtilmiştir.
• LCP görseline gereksiz yere Lazy Loading uygulanmamıştır.
• Videolar ve iframe’ler sayfanın dışına taşmamaktadır.
• Tablolar mobil cihazlarda okunabilir ve kullanılabilir durumdadır.

Core Web Vitals

• LCP gerçek kullanıcı verileriyle kontrol edilmiştir.
• INP ve JavaScript performansı test edilmiştir.
• Önceden alan ayrılmamış öğeler CLS sorununa neden olmamaktadır.
• Lab Data ve Field Data arasındaki fark dikkate alınmıştır.
• Farklı şablonlar ayrı ayrı analiz edilmiştir.

Kullanıcı Deneyimi ve Erişilebilirlik

• Metinler zorunlu yakınlaştırmaya ihtiyaç duyulmadan okunabilmektedir.
• Zoom özelliği devre dışı bırakılmamıştır.
• Butonlar ve bağlantılar yeterli dokunma alanına sahiptir.
• Menü hem dokunmatik ekranla hem de klavyeyle çalışmaktadır.
• Formlarda Label ve açık hata mesajları bulunmaktadır.
• Pop-up’lar ana içeriği kapatmamaktadır.
• Hareketi azaltma tercihi dikkate alınmıştır.

Yayın Öncesi Test

• Site Chrome DevTools ile kontrol edilmiştir.
• Site gerçek cihazlarda test edilmiştir.
• Ana sayfalar Lighthouse ile değerlendirilmiştir.
• Önemli URL’ler Search Console ile kontrol edilmiştir.
• Formlar, iletişim, kayıt ve ödeme süreçleri test edilmiştir.
• Analytics ve Conversion Tracking aktiftir.

Artık Gerekliliklere Odaklanma Zamanı!

SEO’ya uygun responsive tasarım yalnızca görsellerin küçültülmesi ve üç sütunun tek sütuna dönüştürülmesiyle sınırlı değildir. Standartlara uygun bir uygulama; içerik, bağlantı yapısı, görseller, medya öğeleri, formlar, erişilebilirlik, performans ve Core Web Vitals unsurlarını da dikkate almalıdır.

Responsive olmak tek başına daha iyi sıralama veya daha fazla satış garanti etmez; ancak mobil ve masaüstü sürümleri arasındaki teknik hataların oluşma ihtimalini azaltabilir ve sitenin geniş bir kullanıcı kitlesi tarafından daha kolay kullanılmasını sağlayabilir.

Profesyonel bir projede kararlar yalnızca sayfanın birkaç mobil cihaz modelindeki görünümüne göre değil; gerçek kullanıcı davranışları, içerik türü, Search Console verileri, Core Web Vitals ve ticari hedeflere göre alınmalıdır.

Responsive bir web sitesi tasarlamak veya mevcut siteyi iyileştirmek için öncelikle ana şablonlar, gelir sağlayan sayfalar ve dönüşüm yolları incelenmeli; ardından düzenlemeler önceliklere ve gerçek verilere göre uygulanmalıdır.