AMP NEDİR?
HIZIN MATEMATİĞİ
Google'ın Sana Söylemediği AMP Gerçeği...
Siten mobilde kağnı gibi açıldığı için her gün binlerce lira kaybediyorsun. Bu rehberin sonunda, AMP ile ilgili kimsenin paylaşmadığı, rakiplerini tek hamlede saf dışı bırakacak o "Edge Rendering & Core Web Vitals" stratejik hilesini açıklayacağım. Oraya gelene kadar sistemin matematiğini beynine kazıman lazım. Sadece oku ve uygula.
AMP Gerçekte Nedir?
Dürüst olalım: Sen dünyanın en iyi içeriğini yazsan da, mükemmel backlinkler alsan da, o lanet olası sayfa mobilde 3 saniyeden geç açılıyorsa ziyaretçi sekmeyi kapatır. Ve Google botları bunu "Kullanıcı Deneyimi Çöp" olarak işaretler.
İşte AMP (Hızlandırılmış Mobil Sayfalar) bu kanamayı durdurmak için Google ve Twitter tarafından yaratılan radikal bir çözümdür. Sayfana bir "diyet" yaptırır, gereksiz her kodu siler ve içeriğini Google'ın kendi süper hızlı sunucularından (Cache) saniyenin onda biri sürede kullanıcıya fırlatır.
"Tüketici sadakati bir saniyeden kısa sürer. Hız bir özellik değil, bir zorunluluktur." Google Web.dev Verisi
AMP (Accelerated Mobile Pages), web sayfalarının mobil cihazlarda anında yüklenmesini sağlamak amacıyla oluşturulmuş; HTML'in kısıtlanmış bir versiyonunu kullanan, harici JavaScript'i engelleyen ve içerikleri Google AMP Cache üzerinden sunan açık kaynaklı bir web bileşenleri framework'üdür.
Sadece Hızlanma,
Zihniyet Değiştir.
Bu rehber sıradan bir kurulum makalesi değil. Burada Google'ın tarama bütçesi (Crawl Budget) ile mobil hız arasındaki doğrudan korelasyonu ve ölümcül optimizasyon hatalarını göreceksin.
Sırra Git →AMP Nasıl Çalışır? Mimarinin 3 Temel Sütunu
AMP'yi sadece bir "eklenti" sanıyorsan kaybedersin. Bu sistem web siteni temelinden sarsan, katı kuralları olan bir mimaridir. Başarının sırrı, bu üç bileşenin birbiriyle nasıl konuştuğunu anlamaktan geçer.
1. AMP HTML Nedir? (Kısıtlanmış Dil)
Normal HTML'de her şeyi yapabilirsin, bu da siteni çöplüğe çevirir. AMP HTML ise HTML'in askeri kampa alınmış halidir. Bazı HTML etiketleri (örn: <img>) yasaklanmıştır, yerine özel AMP etiketleri (örn: <amp-img>) kullanılır. Bu sayede tarayıcı, görselin boyutunu yüklenmeden önce bilir ve DOM ağacını hesaplarken vakit kaybetmez (Layout Shift - CLS önlenir).
| Özellik | Standart HTML | AMP HTML |
|---|---|---|
| Görsel Etiketi | <img> (Boyutsuz olabilir) | <amp-img> (Width/Height ZORUNLU) |
| Harici CSS | Sınırsız yüklenebilir | YASAK! Sadece max 75KB Inline CSS |
| JavaScript | Sayfayı dondurabilir (Render-blocking) | Özel AMP JS kütüphanesi hariç harici JS YASAK |
⚠️ Çıktı (Outcome): Bunu Neden Bilmelisin?
Bu kısıtlamalar can sıkıcı görünse de, tarayıcının sayfayı render etme (çizme) süresini %80 oranında azaltır. Sonuç? Mobil aramalarda "Hemen Çıkma Oranında (Bounce Rate)" dramatik bir düşüş.
2. AMP JS: Senkronizasyon Tanrısı
JavaScript, web performansının baş düşmanıdır. Kaynakları kilitler. AMP JS, tüm harici kaynakların yüklenmesini sadece asenkron (eşzamanlı olmayan) hale getirir. Hiçbir eleman, sayfanın ana metninin oluşturulmasını engelleyemez (No Render-blocking). Önce kullanıcı metni okur, resimler ve reklamlar arka planda akıllıca yüklenir.
3. Google AMP Cache (Sihirli Dokunuş)
AMP'nin asıl silahı budur. Geçerli (Valid) bir AMP sayfası oluşturduğunda, Google bu sayfayı kendi sunucularına alır ve önbellekler. Kullanıcı arama sonucuna tıkladığında, sayfa senin yavaş sunucundan değil, direkt olarak kullanıcının en yakınındaki Google CDN'inden (Content Delivery Network) saliseler içinde açılır.
Sonuç: Kullanıcı tıklamadan önce sayfa arka planda çoktan yüklenmiş (Pre-rendering) olur.
Neden Umursamalısın?
Ölümcül Mobil Deneyim
- ❌ Devasa JS dosyaları sayfayı kitler (First Input Delay uçar).
- ❌ Resim boyutları baştan belirtilmediği için ekran sürekli zıplar (Kötü CLS).
- ❌ Sunucu yanıt süresi (TTFB) yavaşsa ziyaretçi anında kaçar.
AMP & Core Web Vitals Dominasyonu
- ✅ Asset'ler asenkron yüklenir, metin anında okunur (Mükemmel LCP).
- ✅ Sabit element boyutları ile sıfır ekran kayması (Sıfır CLS).
- ✅ Google Cache sayesinde sunucu lokasyonu önemsizleşir (Anında TTFB).
Sektördeki Zehirli Yalanlar
Yanlış. AMP doğrudan bir sıralama faktörü değildir. Ancak AMP, Core Web Vitals (Önemli Web Metrikleri) skorlarını tavan yaptırdığı için dolaylı olarak devasa bir sıralama artışı sağlar. Hız sıralama faktörüdür, AMP sadece aracıdır.
Geçmişte 'Top Stories' (En Çok Okunanlar) karuseline girmek için şarttı, evet. Ama E-ticaret siteleri (ürün sayfaları) ve bloglar için hemen çıkma oranını düşürmek adına hala en agresif silah konumundadır.
Teknik Terimler Sözlüğü
Konuyu kavramak için aşağıdaki yapıtaşlarını bilmen şart. Öğren.
Largest Contentful Paint. En büyük içeriğin yüklenme süresi.
Cumulative Layout Shift. Sayfa yüklenirken kaymaların oranı.
Standart sayfa ile AMP sayfasını birbirine bağlayan etiket.
Sayfanın kullanıcı tıklamadan arka planda oluşturulması.
Uygulama Atölyesi
Kusursuz Bir AMP Entegrasyonu İçin 10 Adım. Uygula ve Fethet.
Mevcut Çöplüğü Analiz Et
AMP kurmadan önce hastalığı teşhis etmelisin. Google PageSpeed Insights'a gir ve mobil sekmesindeki Core Web Vitals (Önemli Web Metrikleri) verilerini kaydet. Özellikle LCP ve FCP değerlerinin kaç saniye olduğuna bak. Bu senin referans noktan olacak.
İskeleti Zorunlu Etiketlerle Kur
Geçerli bir AMP HTML dokümanı standart bir doctype ile başlar ama <html ⚡> veya <html amp> ile devam eder. Sayfanın içine AMP'nin özel JavaScript kütüphanesini çağıran o meşhur boilerplate (şablon) kodunu <head> kısmına gömmelisin.
<html ⚡ lang="tr">
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
Bağlantıları Sağlama Al (Canonical)
Aynı içeriğin hem normal HTML hem de AMP versiyonu olacağı için Kopya İçerik (Duplicate Content) cezası yeme riskin var. Normal sayfanın <head> kısmına AMP sayfanı işaret eden bir <link rel="amphtml"> etiketi koy. AMP sayfana ise orijinali işaret eden <link rel="canonical"> ekle.
CSS'i Katlet ve Inline Yap
AMP, harici stil dosyalarına (style.css gibi) izin vermez! Tüm tasarım kodunu küçültmeli (minify) ve <style amp-custom> etiketi arasına tek bir parça halinde gömmelisin. Üstelik toplam sınır 75KB. Tasarımı sadeleştir, gereksiz animasyonları at.
Görselleri AMP-IMG Formatına Çevir
Klasik <img> etiketlerini unut. Hepsini <amp-img> ile değiştirmelisin. En önemli kural: Genişlik (width) ve yükseklik (height) değerlerini kesinlikle piksel cinsinden belirtmek zorundasın. Ayrıca responsive (duyarlı) davranması için layout="responsive" parametresini ekle.
width="800" height="400"
layout="responsive"></amp-img>
İzleme ve Analytics Kurulumu
Normal Google Analytics kodun burada çalışmaz. Veri kaybetmemek için AMP'nin özel analiz bileşenini kullanmalısın. Önce amp-analytics scriptini head alanına ekle, ardından body içine JSON formatında Analytics ID'ni tanımlayan ayar bloğunu yerleştir.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": { "trackPageview": { ... } }
}
</script>
</amp-analytics>
3. Parti Scriptleri Karantinaya Al
Sitenizdeki pop-uplar, özel yorum eklentileri veya widget'lar harici JS kullanır. AMP bunları acımasızca reddeder. Bunları çalıştırmak zorundaysan, izole bir alan yaratan <amp-iframe> kullanmalısın. İframe'ler asenkron yüklenir ve sayfanın ana iş parçacığını (main thread) bozmaz.
Sertifikasyon: Validator Testi
Kodunu yazdın, peki Google bunu AMP olarak kabul edecek mi? URL'nin sonuna #development=1 ekleyip Chrome Console'u aç veya direkt AMP Validator aracını kullan. Eğer ekranda kırmızı uyarılar varsa, Google siteni Cache'e almaz. "PASS" (Geçti) yazısını görene kadar hataları temizle.
Schema Markup Entegrasyonu (Article)
AMP sayfalarının Google arama sonuçlarındaki o zengin kartlarda (Rich Snippets/Carousel) çıkmasını istiyorsan, geçerli bir yapılandırılmış veri (Structured Data) eklemek zorundasın. Özellikle içerikler için JSON-LD formatında "Article" veya "NewsArticle" schemasının head alanında bulunması şarttır.
Search Console ile Monitor Et
İşi yayına aldın, bitti mi? Hayır. Google Search Console hesabına gir ve sol menüdeki "AMP" sekmesini kontrol et. Google botlarının sayfaları taraması birkaç gün sürebilir. İndekslenen sayfa sayısını ve varsa yapısal hataları buradan anlık olarak takip edip düzeltmelisin.
ROI & Hız Simülatörü
Gecikilen her saniye cüzdanından para çalıyor. Sitenin hızını iyileştirirsen (AMP veya Native) geri dönüşümünün (Conversion) nasıl değişeceğini hesapla.
Hedef AMP LCP süresi 0.8s olduğunda Bounce Rate %12'ye düşer, dönüşüm oranları ~%27 artar.
Sır Tutabilir Misin? 🤫
"Sektörün sana 'zorunlu' dediği şey aslında büyük bir yanılgı. Google 2021'de Top Stories (En Çok Okunanlar) algoritmasını güncelledi. Artık AMP kurmakla vakit kaybetmene gerek yok."
// GÖKHAN'IN KARANLIK STRATEJİSİ: AMP'SİZ AMP HIZI IF (Sitenin tasarımı AMP yüzünden bozuluyorsa) { 1. AMP'yi çöpe at. 2. Cloudflare veya benzeri bir Edge CDN kullan. 3. "HTML Edge Caching" (Tüm HTML'i CDN'de tut) kuralını yaz. 4. Kritik CSS'i inline yap (AMP'nin mantığını çal). 5. JS dosyalarını defer/async olarak sayfa altına it. } // SONUÇ: Siten AMP olmadan, AMP kısıtlamalarına takılmadan (reklam/javascript özgürlüğü ile) Core Web Vitals testlerinden %100 geçer. Google Botları AMP olup olmadığına değil, LCP'nin < 2.5s olup olmadığına bakar. Tasarım özgürlüğünü geri al, hızı Edge'de çöz!
Sıkça Sorulan Sorular (Kısa & Net)
AMP kullanmak SEO için hala zorunlu mu? ↓
Hayır, zorunlu değildir. Google'ın Sayfa Deneyimi (Page Experience) güncellemesi ile birlikte, Core Web Vitals metrikleri standart hale geldi. Siteniz AMP olmadan da hızlıysa aynı SEO avantajını elde edersiniz.
AMP e-ticaret siteleri için uygun mu? ↓
Kısmen. Ürün detay sayfaları (okuma odaklı) için çok hızlı bir deneyim sunsa da, sepet ve ödeme adımları gibi karmaşık JavaScript gerektiren alanlarda AMP kısıtlamaları sorun yaratır. E-ticarette AMP yerine Native PWA/Edge optimizasyonu daha mantıklıdır.
WordPress siteme AMP'yi nasıl kurarım? ↓
Resmi "AMP for WordPress" eklentisini kurarak başlayabilirsiniz. Eklenti, mevcut temanızı "Transitional" (Geçiş) modunda otomatik olarak AMP uyumlu hale dönüştürür. Ancak özel tasarımlar genelde bozulur, ince ayar gerekir.
AMP sayfalarım neden indekslenmiyor? ↓
Büyük ihtimalle AMP Validator testinden kalıyordur. İçinde yasaklı HTML etiketleri, inline olmayan bir CSS veya harici bir JS dosyası varsa Google bu sayfayı geçersiz sayar ve önbelleğe (indexe) almaz.
AMP reklam gelirlerini düşürür mü? ↓
Yanlış yapılandırılırsa evet. AMP sayfalarında normal Adsense kodları çalışmaz; `amp-ad` etiketleri kullanmanız gerekir. Hızlı yüklenen sayfalar genellikle görünürlüğü artırdığı için reklam gelirini doğru optimizasyonla artırabilir.
AMP tasarımımı tamamen bozar mı? ↓
Evet, bozabilir. Çünkü AMP sadece 75KB CSS kullanımına izin verir. Ağır animasyonlar, özel font setleri veya karmaşık slider'lar kullanan temalar AMP versiyonunda çok daha sade bir görünüme bürünecektir.
URL'imde neden google.com/amp/ sitesi çıkıyor? ↓
Çünkü sayfa kendi sunucunuzdan değil, doğrudan Google'ın AMP önbelleğinden (Cache) sunuluyor. Google, hız için içeriğin kopyasını kendi CDN'i üzerinden kullanıcıya ulaştırır. Kullanıcı orijinal URL'yi tıklayarak sitenize geçebilir.
AMP sayfamın Analytics verilerini neden ayrı görüyorum? ↓
AMP sayfaları Google'ın Cache sunucusundan çalıştığı için, Analytics bunu "ayrı bir domain" gibi algılayabilir (Session birleştirme yapılmazsa). `amp-analytics` içerisindeki Client ID yapılandırmasını kurarak bu oturum parçalanmasını çözebilirsiniz.
Google AMP projesini kapattı mı? ↓
Hayır, proje kapatılmadı. Açık kaynak kodlu olarak (OpenJS Foundation) devam ediyor. Ancak Google arama sonuçlarındaki o "Şimşek" (AMP) ikonunu kaldırdı ve ayrıcalıklarını sonlandırdı.
Sitemden AMP'yi kaldırırsam ne olur? ↓
Doğru 301 yönlendirmelerini (AMP URL'den Standart URL'ye) yapmazsanız ciddi trafik kaybı yaşarsınız. Eğer yönlendirmeleri yapar ve standart sayfanızın mobil hızını yüksek tutarsanız sıralamalarınız olumsuz etkilenmez.
Performans Tıkanıklığını Bitirme Vakti
Sitenin yavaşlığından dolayı rakiplerine kaptırdığın müşterileri geri alma zamanı geldi. Doğru teşhis, doğru mimari, agresif SEO büyümesi.
🚀 Gökhan Vatancı ile Hızlıca Görüşün