Mobil ve masaüstünde sayfa yapısı

Son gözden geçirme: Kasım 2026

Okur, bir haber sayfasında kalmaya değip değmeyeceğine hızla karar verir. Başlık çabuk görünmeli, sayfa yerinde durmalı ve her dokunuşa yanıt verilmelidir. Google ayrıca sayfalarınızın mobil sürümünü dizine ekler; yani Arama için de geçerli olan sürüm telefon düzenidir.

Hedeflenecek rakamlar

Google'ın Core Web Vitals ölçütleri üç ölçü ve her biri için net bir hedef verir.

Sayfa yüklemelerinin 75. yüzdelik dilimini ölçün; mobil ve masaüstünü ayrı sayın. Üç ölçüt de bu dilimde hedefi karşılıyorsa sayfa geçer.

Gerçek ziyaretlerden alınan saha verilerini kullanın: Search Console'daki Core Web Vitals raporu, PageSpeed Insights veya Chrome Kullanıcı Deneyimi Raporu. Lighthouse laboratuvarda işe yarar, ancak INP'yi ölçemez ve onun yerine Total Blocking Time'ı bildirir.

Google, tek bir sayfa deneyimi sinyali olmadığını söyler. Core Web Vitals'ın sıralama sistemlerinde kullanıldığını ve sayfa deneyiminin diğer yönlerinin bir sitenin sıralanmasına doğrudan yardım etmediğini, ancak siteyi kullanımı daha iyi hâle getirebileceğini de söyler.

Her iki ekran için tek sayfa

Google, uygulaması ve bakımı en kolay desen olarak duyarlı tasarımı önerir. Aynı HTML her cihaza hizmet verir; böylece içerik ve meta veriler ek bir çaba gerekmeden eşleşir. Ayrı mobil sayfalar kullanıyorsanız şunları masaüstüyle aynı tutun:

• Ana içerik
• Başlıklar
• Yapılandırılmış veri
• Robots meta etiketleri (başıboş bir noindex mobil bir sayfayı dizinin dışında tutabilir)

Viewport etiketiyle başlayın, ardından sayfanın 320 CSS piksel genişlikte yana kaydırma olmadan yeniden akıp akmadığını kontrol edin.

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

Mobilde

• Önce başlığı, imzayı ve görünür tarihi, ardından ana görseli veya açılış paragrafını koyun.
• Makale metnini HTML'de tutun. Dokunulunca geri kalanını getiren bir “okumaya devam et” düğmesi, tıklamayan, kaydırmayan ve yazmayan Google'dan bu metni gizleyebilir.
• Dokunma hedeflerini en az 24 x 24 CSS piksel yapın; bu, WCAG 2.2 AA asgarisidir. Menüler ve kapatma düğmeleri için AAA düzeyi olan 44 x 44'ü hedefleyin.
• Sabit bir üst bilgiyi kısa tutun ve odaklanan bir bağlantının hiçbir zaman onun arkasında kalmaması için scroll-padding-top değerini onun yüksekliğine ayarlayın.

Masaüstünde

• Gövde metnini satır başına 80 karakter veya daha az tutun; Çince, Japonca ve Korece için 40. Bu, WCAG AAA yönergesidir ve her okura yardımcı olur.
• Paragraflar içinde en az 1,5 satır aralığı ayarlayın.
• Destekleyici içeriği, yüklendiğinde makaleyi oynatmayan bir kenar çubuğunda tutun.

Daha hızlı yükleme

Bir haber sayfasındaki en büyük öge çoğu zaman ana görseldir. Onu sayfadaki en önemli istek olarak ele alın.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">

• LCP görselini asla tembel yüklemeyin.
• Onu ilk HTML'ye koyun; böylece tarayıcı herhangi bir betikten önce onu bulur.
• fetchpriority="high" değerini en fazla bir veya iki görselde kullanın. Fazlası işe yaramaz.
• loading="lazy" değerini yalnızca ilk görünüm alanının dışındaki görseller ve iframe'ler için kullanın.
• Yönlendirmeleri azaltın ve sayfayı önbelleğe alınabilir tutun. Benzersiz URL parametreleri istekleri CDN yerine kaynak sunucunuza geri gönderebilir.

Yerinde duran bir sayfa

• Her görsel ve videoda width ve height ayarlayın ve CSS'te height: auto tutun.
• Bir srcset içindeki tüm görseller için aynı en boy oranını kullanın.
• Reklamlar, gömülü ögeler ve iframe'ler için yüklenmeden önce yer ayırın. Reklamlar bölümü reklam alanı boyutlarını ele alır.
• Çerez bildirimlerini ve kayıt istemlerini üste bindirin veya onlar için yer ayırın; böylece makaleyi aşağı itmezler.
• font-display: optional kullanın veya web yazı tipinizin ölçülerine uyacak şekilde ayarlanmış bir yedek yazı tipi kullanın.
• transform ile animasyon yapın. top veya left ile animasyon yapmak düzen kaymalarına neden olur.

Hızlı yanıtlar

Toplam etkileşim süresinin üç parçası vardır: kodunuz çalışmadan önceki bekleme, kodunuz ve ardından gelen boyama. 50 milisaniyeden uzun her görev uzun bir görevdir.

• Olay geri çağrılarında olabildiğince az iş yapın. Önce ekranı güncelleyin, gerisini erteleyin.
• Uzun işi scheduler.yield() ile bölün ve onu desteklemeyen tarayıcılarda setTimeout'a dönün.
• DOM'u küçük tutun. Uzun makale listeleri, ekran dışı ögeleri daha sonra işlemek için content-visibility kullanabilir.
• Her iframe'in kendi ana iş parçacığı olduğunu unutmayın; bu yüzden yavaş bir etkileşimin hangi çerçeveden geldiğini kontrol edin.

Uzun sayfalar ve sonsuz kaydırma

Bir bölüm sayfası sonsuza kadar kayıyorsa, her parçaya ?page=12 gibi mutlak bir sayfa numarasıyla kendi kalıcı URL'sini verin ve bu sayfaları sırayla bağlayın. Okur ilerledikçe adresi History API ile güncelleyin. Google kaydırmaz veya tıklamaz; bu yüzden tembel yüklenen içerik görünüm alanına girdiğinde, herhangi bir eylem gerekmeden yüklenmelidir.

Kontrol listesi

• LCP, INP ve CLS'yi Search Console'da, mobil ve masaüstü için ayrı ayrı kontrol edin.
• En yoğun makale şablonunuzu bir telefonda açın ve başlık ile tarihin ilk ekranda olduğunu doğrulayın.
• Makale metninin tamamının sunucunun gönderdiği HTML'de olduğunu doğrulayın.
• Mobil ve masaüstünü eşleşen içerik, başlık, yapılandırılmış veri ve robots etiketleri açısından karşılaştırın.
• Ana görselden loading="lazy" kaldırın ve fetchpriority="high" ekleyin.
• Her görsele ve videoya width ve height ekleyin.
• Her reklam, gömülü öge ve afiş için yer ayırın.
• scroll-padding-top değerini sabit üst bilginize uyacak şekilde ayarlayın.
• Sayfayı 320 CSS piksel genişlikte test edin.
• Sonsuz kaydırmalı bir sayfanın her parçasına kendi URL'sini verin.

Kaynaklar

• Understanding Google Page Experience, Google Search Central
• Understanding Core Web Vitals and Google search results, Google Search Central
• Mobile-first Indexing Best Practices, Google Search Central
• Fix Lazy-Loaded Website Content, Google Search Central
• Web Vitals, web.dev
• Optimize Largest Contentful Paint, web.dev
• Optimize Cumulative Layout Shift, web.dev
• Optimize Interaction to Next Paint, web.dev
• Optimize long tasks, web.dev
• Browser-level image lazy loading for the web, web.dev
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C
• Understanding Target Size (Enhanced), W3C WAI
• Understanding Visual Presentation, W3C WAI