Mobil SEO ve Mobile-First Indexing: 2026 Uyum Rehberi
Google'ın mobil öncelikli indekslemesine uyum için responsive tasarım ve mobil UX optimizasyonu.
Mobil SEO ve Mobile-First Indexing 2026: Pratik Uyum Rehberi
Google 2024 yılı ortasında mobile-first indexing geçişini %100 tamamladı: artık tüm yeni siteler ve eski sitelerin neredeyse tamamı mobil versiyon üzerinden indexleniyor. 2026'da masaüstü-only veya mobil-bozuk site Google'da fiilen görünmüyor. Türkiye'de mobil trafik genel hacmin %65-75'ini oluşturuyor; e-ticaret ve haber sitelerinde %80+. Bu rehberde Buyukweb müşterilerimiz için pratik mobil SEO checklist'i, performans optimizasyonu, sık yapılan hatalar ve test araçlarını paylaşıyoruz.
Buyukweb perspektifi: Hosting altyapımızın mobil SEO'ya katkısı TTFB seviyesinde: LiteSpeed + LSCache + HTTP/3 + NVMe + Bursa Tier 3 datacenter kombinasyonu ile mobil ziyaretçinin ilk byte'a 50-150 ms ulaşması mümkün. Site kodu, tema, eklenti ve resim disiplini sizin sorumluluğunuzda. Tercih etmeyin: "ayrı m.siteniz.com mobil site" yapısını — Google 2020'den beri bunu tavsiye etmiyor; responsive tek site standart. AMP de artık opsiyonel; haber siteniz değilse zaman kaybı.
Mobile-First Indexing'in Anlamı
Eskiden Google sitenizin masaüstü versiyonunu crawler ile tarar, içeriğini index'ler, sıralamaya katardı. 2018-2024 arası "mobile-first" geçişi yapıldı: artık mobil versiyon birincil veri kaynağı.
Eski model (pre-2018):
Google bot → masaüstü versiyonu → index
Yeni model (post-2024):
Google bot (smartphone-Googlebot) → mobil versiyon → index
Pratik Sonuçları
- Mobil sürümünüzde olmayan içerik Google için yoktur — masaüstünde varsa bile
- Mobil performans doğrudan sıralama etkiler
- Mobil hız (Core Web Vitals) lab+field ölçüm üzerinden değerlendirilir
- Responsive olmayan site = "mobile-friendly değil" etiketi = sıralama düşüş
Test edin:
https://search.google.com/search-console/mobile-friendly— siteniz mobil-uyumlu mu, anında öğrenirsiniz.
Responsive Tasarımın Üç Temel Direği
1. Viewport Meta Etiketi
Her HTML sayfasının <head>'inde:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bu etiket olmazsa mobil tarayıcı sayfayı 980px geniş varsayar, kullanıcı zoom yapmak zorunda kalır. Google bunu mobile-friendly değil olarak işaretler.
2. CSS Media Queries
Ekran genişliğine göre stil değişimi:
/* Mobil-first yaklaşım — varsayılan stil mobil için */
.container {
width: 100%;
padding: 16px;
font-size: 16px;
}
/* Tablet ve üstü için */
@media (min-width: 768px) {
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
}
/* Masaüstü için */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
.sidebar {
display: block;
width: 30%;
}
}
Mobil-first vs masaüstü-first: Modern best practice "mobile-first" — varsayılan CSS mobil için,
@media (min-width: ...)ile büyük ekranlar eklenir. Mobil cihaz daha az CSS render eder (hızlı), masaüstü ekstra ekleme yükler.
3. Esnek Görsel ve Medya
<!-- Görsel boyutu container'a sığar -->
<img src="/hero.webp" alt="Hero" width="1200" height="600"
style="max-width: 100%; height: auto;"
fetchpriority="high">
<!-- Responsive image (srcset) -->
<img src="/hero-1200.webp"
srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 1200px"
alt="Hero">
<!-- Picture element ile farklı format desteği -->
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Hero" width="1200" height="600">
</picture>
Mobil Core Web Vitals (CWV) — 2026 Eşikler
Google CWV mobil ve masaüstü için ayrı raporlar; mobil eşiği daha katı uygulanıyor:
| Metrik | İyi | İyileştir | Kötü |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5 sn | 2.5-4.0 sn | > 4.0 sn |
| INP (Interaction to Next Paint) | ≤ 200 ms | 200-500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0.1-0.25 | > 0.25 |
| TTFB (Time to First Byte) | ≤ 800 ms | 800-1800 ms | > 1800 ms |
Mobil ölçüm 4G hızında simüle edilir; ev WiFi'ile yapılan masaüstü test yanıltıcı, gerçek mobil veri gerek.
Mobil Sayfa Hızı Optimizasyon Kontrol Listesi
Resim Optimizasyonu
1. WebP veya AVIF format (JPEG/PNG'ye göre %30-50 küçük)
2. width ve height attribute'ları zorunlu (CLS önler)
3. fetchpriority="high" sadece LCP elementine
4. loading="lazy" diğer tüm resimlere (LCP'ye DEĞİL)
5. srcset ile responsive image
6. Yüksek-piksel ekranlar için 2x veya retina varyantı
CSS / JavaScript Optimize
<!-- Critical CSS inline -->
<style>/* sayfa-üstü kritik CSS */</style>
<link rel="stylesheet" href="/style.css" media="print" onload="this.media='all'">
<!-- JS defer ile -->
<script src="/app.js" defer></script>
<!-- Üçüncü-taraf script async -->
<script src="https://www.googletagmanager.com/gtag/js?id=GA-XXX" async></script>
Font Yükleme
<!-- Google Fonts self-host edip preload -->
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-regular.woff2" crossorigin>
<style>
@font-face {
font-family: 'Inter';
font-display: swap; /* fallback göster, font yüklenince geç */
src: url('/fonts/inter-regular.woff2') format('woff2');
}
</style>
LiteSpeed Cache (Buyukweb cPanel'de)
WordPress Admin > LiteSpeed Cache > Cache > "Enable Cache" → ON
LiteSpeed Cache > Image Optimization > "WebP Replacement" → ON
LiteSpeed Cache > CSS Settings > "CSS Minify" + "Combine CSS" → ON
LiteSpeed Cache > JS Settings > "JS Defer" → ON
Buyukweb cPanel müşterilerinde LiteSpeed Cache otomatik kuruludur; sadece WordPress eklentisini yükleyip aktif edin.
Mobil Kullanıcı Deneyimi (UX)
1. Dokunma Hedefleri (Tap Targets)
Buton, link, form alanları minimum 48x48 piksel olmalı:
.button, .nav-link {
min-height: 48px;
min-width: 48px;
padding: 12px 16px;
}
/* Linkler arası boşluk */
.nav-list li {
margin-bottom: 8px;
}
Google Mobile-Friendly Test "Tap targets too close" uyarısı verirse bu kuralı uygulamamışsınız demektir.
2. Yazı Boyutu
Body text minimum 16px (mobil ekran zoom yapmadan okunabilir):
body {
font-size: 16px;
line-height: 1.6;
}
@media (min-width: 768px) {
body {
font-size: 18px; /* tablet ve üstünde biraz büyük */
}
}
3. Pop-up ve Interstitial Yasağı
Google 2017'de "intrusive interstitial penalty" duyurdu: sayfayı kaplayan pop-up varsa sıralama düşer.
Caiz:
- Kapatılabilir cookie banner (KVKK için zorunlu)
- Yaş doğrulama (yasal zorunluluk)
- Küçük banner (sayfanın %30'unu kaplamayan)
Yasak (mobil için):
- Tam ekran kaplayan abone-ol formu
- "İndirim için e-posta ver" pop-up
- Mobil app indir baskısı (özellikle hizmet kullanılamaz hale getiren)
4. Yatay Kaydırma Yasağı
Mobil sayfa yatay kaydırma gerektirmemeli; tüm içerik genişlik %100 içinde:
body {
overflow-x: hidden; /* yatay kaydırma engelle */
max-width: 100vw;
}
img, video, table {
max-width: 100%;
}
/* Geniş tabloyu sarmalayıcıda kaydırma */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
AMP — Hâlâ Gerekli mi?
AMP (Accelerated Mobile Pages) Google'ın 2015'te lanse ettiği framework; mobil sayfaları HTML alt-set ile zorla hızlandırma. 2021'de Google AMP'i Top Stories carousel'inden kaldırdı; bugün kullanım büyük ölçüde isteğe bağlı.
Hâlâ AMP'in fayda sağlayabileceği:
- Haber siteleri (Top Stories'da hâlâ kısmi avantaj)
- Çok düşük-trafik bandwidth bölgesi (Hindistan, Afrika)
AMP gereksiz:
- Türkiye e-ticaret
- Kurumsal vitrin site
- Blog (modern responsive yeter)
Buyukweb tavsiyesi: AMP'e zaman harcamayın; responsive + LiteSpeed cache + WebP kombinasyonu mobil hızı zaten yeterince yüksek tutar. AMP sayfası eklemenizi mecbur kılan tek senaryo: Google News onayı isteyen haber sitesi.
PWA (Progressive Web App) Mobil SEO Etkisi
PWA mobil siteyi neredeyse-uygulama deneyimine sokuyor (offline çalışma, push notification, ana ekrana ekleme). SEO'ya doğrudan etkisi yok ama engagement metrikleri (dwell time, sayfa/oturum) yükselir; dolaylı SEO katkı.
PWA için temel:
// /manifest.json
{
"name": "Siteniz",
"short_name": "Siteniz",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1f2937",
"icons": [
{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}
]
}
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/icon-192.png">
Service Worker ile offline cache strateji ekleyin; dev.to ve web.dev/learn/pwa kaynakları yeterli rehber.
Mobil-Only Sorunlar (Sık Karşılaşılan)
Sorun 1: "Mobile usability issues" Search Console
Search Console > Sayfa deneyimi > Mobile Usability
Yaygın hatalar:
- "Text too small to read" → CSS
font-size: 16pxminimum - "Clickable elements too close" → tap target spacing 8px+
- "Content wider than screen" →
overflow-x: hiddenveya yanlış-genişlik elementi düzelt - "Viewport not configured" → meta etiketi unutulmuş
Sorun 2: Mobil Sayfa Yavaş, Masaüstü Hızlı
Sebep: mobil cihaz daha zayıf CPU + mobil ağ daha yavaş. Çözüm:
- Mobil için ayrı CSS/JS bundle (kritik olmayanları geciktir)
- Üçüncü-taraf script'leri mobile'da daha katı yükle
- AVIF/WebP zorunlu mobil için
Sorun 3: Mobil CLS (Layout Shift) Yüksek
Sebep: viewport yüksekliği değişimi, dinamik banner, font swap
Çözüm:
- Reklam slot'una min-height ile yer ayır
- CSS aspect-ratio ile resim boyutu
- Web font için font-display: swap + size-adjust
Sorun 4: Mobil INP Yüksek
Sebep: Üçüncü-taraf script'ler ana iş parçacığını kilitliyor
Çözüm:
- Tawk.to/Intercom interaction-after lazy load
- Hotjar sample rate %10
- GA4 minimal config
- React/Vue hydration optimization
Mobil SEO Test Araçları
1. Google Mobile-Friendly Test
https://search.google.com/test/mobile-friendly
2. PageSpeed Insights — Mobile sekmesi
https://pagespeed.web.dev/
3. Lighthouse (Chrome DevTools)
F12 > Lighthouse > Mobile + Performance
4. Search Console > Mobile Usability + Core Web Vitals
https://search.google.com/search-console
5. WebPageTest — Real Mobile
https://www.webpagetest.org/ → 4G, Türkiye lokasyonu
6. Chrome DevTools — Device Mode
F12 > Toggle Device Toolbar > iPhone/Galaxy seç
Buyukweb Hosting ile Mobil Performans Avantajı
Buyukweb cPanel paketlerimizdeki teknoloji yığını mobil hız için optimize:
| Bileşen | Mobil Etkisi |
|---|---|
| LiteSpeed Web Server | TTFB ~50-150 ms (Apache prefork'tan 3-5× hızlı) |
| LSCache | Statik HTML cache, sayfa render 5-10 ms |
| HTTP/3 (QUIC) | Mobil ağda paket kaybı altında daha iyi davranış |
| Brotli sıkıştırma | HTML/CSS/JS %15-20 daha küçük (gzip'e göre) |
| NVMe SSD | Veritabanı sorgu mikrosaniye düzeyi |
| Bursa Tier 3 datacenter | Türkiye'den 10-30 ms ping |
| CloudFlare entegrasyon (opsiyonel) | Yurt dışı ziyaretçi için CDN edge |
Bu altyapı üzerine doğru tema + LSCache + WebP resim kombinasyonu ile mobil PageSpeed 90+ skor erişilebilir.
Sık Sorulan Sorular
Buyukweb cPanel'de mobil hız için ek bir şey yapmam gerek mi?
Sunucu seviyesi (LiteSpeed, NVMe, HTTP/3) zaten optimize. Site seviyesinde yapmanız gerekenler:
- WordPress'te LiteSpeed Cache eklentisi aktive et
- Image Optimization açık olsun (WebP)
- Hafif tema (GeneratePress, Astra, Kadence) kullan
- Üçüncü-taraf script'leri minimuma indir
Ayrı m.siteniz.com mobil site mi yoksa responsive mi?
Responsive tek-URL site. Google 2020'den beri ayrı mobil URL'i tavsiye etmiyor; SEO açısından da daha iyi (link equity bölünmez, içerik tek yerde, mobile-first index için ideal).
AMP kullanmazsam Google sıralamada düşürür mü?
Hayır. AMP 2026'da artık sıralama avantajı vermiyor. Sadece haber sitesi Top Stories'a girmek için kısmi avantaj. Standart e-ticaret/blog/kurumsal site için AMP gereksiz.
Mobil için ayrı sitemap mı?
Hayır. Tek sitemap.xml yeterli; responsive site tüm cihazlar için tek URL. Google smartphone-Googlebot ve desktop-Googlebot ile aynı URL'leri tarar.
Mobil'de Google'da ilk sayfada görünüp masaüstünde 3. sayfada olmak mümkün mü?
Mantıken evet. Google sıralama mobil ve masaüstü için bağımsız hesaplanır; mobil-uyumlu site mobil sıralamada avantajlı. Genelde fark küçük (1-3 sıra).
Mobile Usability raporu temiz ama PageSpeed mobil düşük?
İki ayrı şey ölçüyor: Mobile Usability = responsive doğru mu (büyük yazı, tap target, viewport vs), PageSpeed = sayfa hızı. Usability geçtiyse responsive doğru; PageSpeed düşükse hız optimize gerekir.
Mobil için ayrı içerik (kısaltılmış) mi yazayım?
Hayır. Mobile-first indexing'de eksik içerik = eksik index. Tüm içerik mobil ekranda gösterilmeli (gerekirse "Devamını Oku" expand ile gizlenebilir, ama HTML içinde olmalı).
Hreflang ve mobil ilişkisi?
hreflang çoklu dil/bölge versiyonları için; mobil/masaüstü ayrımı gerektirmez. Responsive sitede tek hreflang seti yeter.
Türkiye'de mobil kullanıcı yüzde kaç?
StatCounter Türkiye 2026 verilerine göre mobil ~%65, masaüstü ~%30, tablet ~%5. E-ticaret ve haber sitelerinde mobil %75-80'e çıkar.
Sonuç
Mobile-first indexing 2026'da artık tartışmasız standart. Buyukweb hosting altyapımız mobil hız için optimize (LiteSpeed + LSCache + HTTP/3 + NVMe + Türkiye datacenter); site sahibinin görevi responsive tasarım + WebP resim + minimal third-party JS + tap-friendly UX. AMP'e zaman harcamayın; PWA isteğe bağlı engagement avantajı. Düzenli ölçüm: Mobile-Friendly Test + PageSpeed Insights + Search Console > Mobile Usability + Core Web Vitals reportları.
Soru ve teknik destek için: 0850 302 60 70.
İlgili Büyükweb Hizmetleri
Mobil performans için altyapı paketleri:
- cPanel Web Hosting — LiteSpeed + LSCache standart
- WordPress Hosting — WP optimize altyapı
- Türkiye VDS — düşük gecikme, mobil ziyaretçi için Bursa
- VDS Sunucu — özel cache stack'iniz
- Tüm Paketler — Karşılaştırma
Sorularınız için 0850 302 60 70 numaralı destek hattımıza veya iletişim sayfamıza yazabilirsiniz.
SEO & Dijital Pazarlama İlgili Hizmetlerimiz
Bu yazıda anlatılan teknik konuyu profesyonel altyapıyla deneyimleyin
Etiketler:
