Mobil URL Stratejileri: AMP, Responsive ve PWA Yaklaşımları

Mobil cihazlar için URL stratejilerini öğrenin. Responsive design, AMP, PWA ve m. subdomain yaklaşımlarının avantajları ve dezavantajları.

Mobil trafik, toplam web trafiğinin %60'ından fazlasını oluşturuyor. Doğru mobil URL stratejisi seçmek SEO ve kullanıcı deneyimi için kritik önem taşır. Bu rehberde farklı mobil yaklaşımları ve URL stratejilerini inceliyoruz.

Mobil URL Yaklaşımları

1. Responsive Web Design (Önerilen)

Aynı URL, tüm cihazlarda farklı görünümler sunar.

# Tek URL, tüm cihazlar
https://example.com/urun/ayakkabi

# CSS Media Queries ile adaptasyon
@media (max-width: 768px) {
  .container { width: 100%; }
}

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

Avantajları

Tek URL, tek içerik yönetimi
Google'ın önerdiği yaklaşım
Link equity korunur
Bakım maliyeti düşük
Duplicate content riski yok

Dezavantajları

Tüm cihazlara aynı kaynaklar yüklenir
Karmaşık tasarımlarda zorluk

2. Ayrı Mobil Site (m. subdomain)

Masaüstü ve mobil için farklı URL'ler.

# Masaüstü
https://example.com/urun/ayakkabi

# Mobil
https://m.example.com/urun/ayakkabi

SEO Gereksinimleri

<!-- Masaüstü sayfasında -->
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="https://m.example.com/urun/ayakkabi" />

<!-- Mobil sayfasında -->
<link rel="canonical" href="https://example.com/urun/ayakkabi" />

Avantajları

Mobil için optimize edilmiş deneyim
Daha hızlı yükleme (daha az kaynak)
Cihaza özel özellikler

Dezavantajları

İki site bakımı
Duplicate content riski
Link equity bölünmesi
Yönlendirme karmaşıklığı

3. Dynamic Serving

Aynı URL, sunucu tarafında farklı HTML döner.

# Tek URL
https://example.com/urun/ayakkabi

# Vary header ile cache kontrolü
Vary: User-Agent

# Sunucu tarafı User-Agent kontrolü
if (isMobile()) {
    return renderMobileVersion();
} else {
    return renderDesktopVersion();
}

Avantajları

Tek URL yapısı
Cihaza özel optimizasyon

Dezavantajları

User-Agent detection karmaşıklığı
Cache yönetimi zorluğu
Hatalı detection riski

AMP (Accelerated Mobile Pages)

AMP Nedir?

Google'ın geliştirdiği, mobilde hızlı yüklenen sayfa formatı.

AMP URL Yapısı

# Standart sayfa
https://example.com/haber/baslik

# AMP versiyonu
https://example.com/haber/baslik/amp
https://example.com/amp/haber/baslik

# Google AMP Cache
https://example-com.cdn.ampproject.org/c/s/example.com/haber/baslik/amp

Canonical ve AMP İlişkisi

<!-- Standart sayfada -->
<link rel="amphtml" href="https://example.com/haber/baslik/amp" />

<!-- AMP sayfasında -->
<link rel="canonical" href="https://example.com/haber/baslik" />

AMP'in Güncel Durumu

Google artık AMP'i sıralama faktörü olarak kullanmıyor
Core Web Vitals daha önemli
AMP hala hız avantajı sağlayabilir
Yeni projeler için PWA tercih ediliyor

PWA (Progressive Web App)

PWA URL Stratejisi

PWA'lar normal web URL'leri kullanır, ek yapılandırma gerektirir.

# manifest.json
{
  "name": "Uygulama Adı",
  "short_name": "Uygulama",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#8B5CF6",
  "background_color": "#ffffff"
}

# HTML'de manifest
<link rel="manifest" href="/manifest.json">

Service Worker ve URL'ler

// Service Worker - URL caching stratejisi
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // Cache varsa döndür, yoksa fetch et
        return response || fetch(event.request);
      })
  );
});

// Offline fallback
const OFFLINE_URL = '/offline.html';

PWA Avantajları

Tek kod tabanı
Offline çalışma
Push notification
Ana ekrana ekleme
Native app benzeri deneyim

Mobil SEO İçin URL Best Practices

1. Mobile-First Indexing

Google artık önce mobil versiyonu indeksliyor.

# robots.txt - Mobil crawl izni
User-agent: Googlebot-Mobile
Allow: /

# Mobil için tüm içerik erişilebilir olmalı

2. Hreflang ile Mobil Dil Yönetimi

<link rel="alternate" hreflang="tr" href="https://example.com/tr/urun" />
<link rel="alternate" hreflang="en" href="https://example.com/en/product" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/product" />

3. App Deep Linking

# iOS Universal Links - apple-app-site-association
{
  "applinks": {
    "apps": [],
    "details": [{
      "appID": "TEAM_ID.com.example.app",
      "paths": ["/urun/*", "/kategori/*"]
    }]
  }
}

# Android App Links - assetlinks.json
[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example.app",
    "sha256_cert_fingerprints": ["..."]
  }
}]

4. URL Kısaltma

# Mobil için kısa URL'ler tercih edin
# UZUN
https://example.com/kategori/elektronik/telefonlar/akilli-telefonlar/samsung-galaxy-s24

# DAHA İYİ
https://example.com/p/samsung-galaxy-s24

Core Web Vitals ve URL

LCP (Largest Contentful Paint)

# Kritik kaynaklar için preload
<link rel="preload" href="/hero-mobile.webp" as="image"
      media="(max-width: 768px)">

CLS (Cumulative Layout Shift)

# Resim boyutları belirt
<img src="/image.jpg" width="400" height="300" alt="..." />

# Aspect ratio ile
.image-container {
  aspect-ratio: 4 / 3;
}

FID/INP (Interaction)

# JavaScript lazy loading
<script src="/non-critical.js" defer></script>

# Route-based code splitting
const ProductPage = lazy(() => import('./ProductPage'));

Mobil Yönlendirme Stratejileri

Server-Side Detection

# Nginx mobil yönlendirme
map $http_user_agent $mobile_redirect {
    default 0;
    ~*android|iphone|ipod|ipad|mobile 1;
}

server {
    if ($mobile_redirect = 1) {
        return 302 https://m.example.com$request_uri;
    }
}

JavaScript Detection (Önerilmez)

// Sadece gerektiğinde kullanın
if (/Mobi|Android/i.test(navigator.userAgent)) {
    // Mobil özel işlemler
}

Sonuç

Modern web için responsive design en iyi yaklaşımdır. Tek URL yapısı, kolay bakım ve Google'ın önerisi olması responsive'i öne çıkarır. PWA ile mobil deneyimi iyileştirirken, AMP artık zorunlu değildir. SlugURL ile oluşturduğunuz SEO-dostu URL'ler, tüm mobil stratejilerle uyumlu çalışır.