Next.js SEO Rehberi 2026: App Router'da Metadata, Schema ve Performans
Next.js SEO Rehberi 2026: App Router'da Doğru Yapılandırma
Next.js 15, SEO için Pages Router döneminden kökten farklı bir yaklaşım sunuyor. App Router mimarisi, metadata yönetimini, statik sayfa üretimini ve performans optimizasyonunu çok daha sistematik hale getiriyor. Ancak bu güç, beraberinde doğru yapılandırma sorumluluğunu da getiriyor.
Yanlış kurulmuş bir Next.js sitesi, React bileşen hiyerarşisi ne kadar iyi olursa olsun, arama motorlarında görünmez kalabiliyor.
Next.js App Router'da SEO Nasıl Yapılır? App Router'da her sayfa içingenerateMetadatafonksiyonu ile dinamik metadata üretin,sitemap.tsverobots.tsdosyalarını route convention'a göre ekleyin, JSON-LD schema için<script type="application/ld+json">kullanın. Core Web Vitals için Image, Font ve Script optimizasyon bileşenlerini tercih edin. Hedef: Lighthouse SEO skoru 100. Ücretsiz Destek →
İçindekiler
1. Pages Router vs App Router: SEO Farkları 2. generateMetadata ile Dinamik Metadata 3. Statik ve Dinamik OG Tags 4. JSON-LD Schema Entegrasyonu 5. sitemap.ts ve robots.ts Yapılandırması 6. hreflang ile Çok Dilli SEO 7. ISR ve Static Generation Stratejisi 8. Core Web Vitals Optimizasyonu 9. Sık Sorulan Sorular 10. Sonuç ve Aksiyon Planı
Pages Router vs App Router: SEO Farkları
Next.js 13 ile hayatımıza giren App Router, SEO yönetimini kökten değiştirdi. Pages Router'da <Head> bileşeni ile yönetilen metadata, artık yerini dosya tabanlı ve fonksiyon tabanlı bir sisteme bıraktı.
| Özellik | Pages Router | App Router |
|---|---|---|
| Metadata yönetimi | next/head ile manuel | generateMetadata veya metadata export |
| Sitemap | Harici kütüphane (next-sitemap) | Yerleşik sitemap.ts |
| robots.txt | Public klasörü | Yerleşik robots.ts |
| OG Image | Manuel veya next-og | ImageResponse ile programatik |
| Schema markup | Manuel script tag | Layout veya page'de JSON-LD |
| Canonical URL | Manuel | alternates.canonical |
App Router'ın en büyük avantajı, metadata'nın sayfa bileşeniyle aynı dosyada veya ayrı bir generateMetadata fonksiyonunda tanımlanabilmesidir. Bu yapı, dinamik sayfalar için çok daha temiz bir kod tabanı sağlıyor.
generateMetadata ile Dinamik Metadata
App Router'da her page.tsx veya layout.tsx dosyası, metadata nesnesi veya generateMetadata async fonksiyonu export edebilir.
Statik sayfalar için doğrudan nesne kullanın:
``typescript export const metadata: Metadata = { title: "Next.js SEO Rehberi 2026 | ModernWebSEO", description: "Next.js App Router'da SEO optimizasyonu...", alternates: { canonical: "https://modernwebseo.com/blog/nextjs-seo-rehberi-2026", }, }; ``
Dinamik sayfalar için generateMetadata fonksiyonu kullanın. Bu fonksiyon, sayfa parametrelerine ve dışarıdan çekilen veriye göre metadata üretmenizi sağlar:
``typescript export async function generateMetadata( { params }: { params: { slug: string } } ): Promise<Metadata> { const post = await getBlogPost(params.slug); return { title: post.title, description: post.description, openGraph: { title: post.title, description: post.description, images: [{ url: post.image }], }, }; } ``
generateMetadata fonksiyonu, aynı veriyi birden fazla kez fetch etmemek için React'in önbellekleme mekanizmasından otomatik olarak yararlanır. Aynı parametrelerle çağrılan fetch istekleri tek bir HTTP isteğine indirgenir.
title ve description Optimizasyonu
Title tag hâlâ en güçlü on-page SEO sinyallerinden biri. App Router'da title alanı için template yapısını kullanın:
``typescript export const metadata: Metadata = { title: { template: "%s | ModernWebSEO", default: "ModernWebSEO - SEO ve Web Tasarım Ajansı", }, }; ``
Bu yapı, alt sayfalarda sadece sayfa başlığını tanımlamanıza izin verir. Template, otomatik olarak site adını ekler.
Description için 150-160 karakter hedefleyin. Hedef anahtar kelimeyi ilk 50 karaktere dahil edin ve bir eylem çağrısı ekleyin.
Statik ve Dinamik OG Tags
Open Graph etiketleri, sosyal medya paylaşımlarında görünürlüğü ve tıklama oranını doğrudan etkiliyor. App Router'da openGraph objesi ile OG metadata'yı yönetin.
Dinamik OG görseller için Next.js'in ImageResponse API'sini kullanabilirsiniz. app/og/route.tsx dosyası oluşturarak her sayfa için programatik görsel üretin. Bu yaklaşım, her blog yazısı için ayrı görsel tasarlamak yerine otomatik görsel üretimi sağlar.
Twitter Card'lar için twitter objesini ayrıca tanımlayın. summary_large_image card türü, Twitter ve X'te daha büyük görsel gösterimi sağlar.
JSON-LD Schema Entegrasyonu
Yapılandırılmış veri, Google'ın içeriğinizi anlamasına yardımcı olur ve zengin snippet'ler kazanmanızı sağlar. Next.js App Router'da JSON-LD'yi <script> etiketi olarak ekleyin:
```tsx export default function BlogPost({ post }) { const jsonLd = { "@context": "https://schema.org", "@type": "Article", "headline": post.title, "author": { "@type": "Person", "name": post.author.name, }, "datePublished": post.publishedAt, "image": post.image, };
return ( <> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} /> {/ Sayfa içeriği /} </> ); } ```
| Schema Türü | Kullanım Alanı | Zengin Snippet Etkisi |
|---|---|---|
| Article | Blog yazıları | Yazar, tarih gösterimi |
| Product | Ürün sayfaları | Fiyat, stok, yorum |
| LocalBusiness | Yerel işletme | Harita, saat, telefon |
| BreadcrumbList | Tüm sayfalara | Breadcrumb gösterimi |
| FAQPage | SSS bölümleri | Accordion sonuçlar |
| WebSite | Ana sayfa | Sitelinks search box |
Her sayfa türü için ilgili schema'yı ekleyin. BreadcrumbList'i siteye genelinde tüm sayfalara eklemek, Google'ın site yapısını anlamasını kolaylaştırır.
sitemap.ts ve robots.ts Yapılandırması
App Router'da sitemap ve robots dosyaları artık TypeScript/JavaScript ile programatik olarak üretiliyor. Bu, CMS'den dinamik içerik çekip otomatik sitemap oluşturmanızı sağlar.
app/sitemap.ts dosyası:
``typescript export default async function sitemap(): Promise<MetadataRoute.Sitemap> { const posts = await getAllBlogPosts(); const blogUrls = posts.map((post) => ({ url: https://modernwebseo.com/blog/${post.slug}`,
| lastModified: post.updatedAt | post.publishedAt, |
|---|
return [ { url: "https://modernwebseo.com", priority: 1.0 }, { url: "https://modernwebseo.com/hizmetler", priority: 0.9 }, ...blogUrls, ]; } ```
app/robots.ts dosyası ile bot kurallarını programatik yönetin. Crawl-delay direktifini ekleyin ve yönetim paneli URL'lerini disallow listesine alın.
hreflang ile Çok Dilli SEO
Türkçe ve İngilizce içerik sunan sitelerde hreflang etiketleri zorunlu. App Router'da alternates.languages objesi ile yönetin:
``typescript alternates: { canonical: "https://modernwebseo.com/blog/nextjs-seo", languages: { "tr": "https://modernwebseo.com/blog/nextjs-seo", "en": "https://modernwebseo.com/en/blog/nextjs-seo", }, }, ``
x-default değerini de ekleyin. x-default, dil tercihine uymayan kullanıcılar için gösterilecek sayfayı belirtir.
ISR ve Static Generation Stratejisi
Next.js'in SEO açısından en güçlü özelliği, Incremental Static Regeneration (ISR) desteği. Blog yazıları, ürün sayfaları ve kategori sayfaları için ISR kullanın.
generateStaticParams ile derleme zamanında hangi sayfaların statik olarak üretileceğini belirleyin. revalidate değeri ile kaç saniyede bir yeniden üretileceğini ayarlayın.
| Strateji | Kullanım Durumu | Revalidate Süresi |
|---|---|---|
| Static (SSG) | Değişmeyen sayfalar | false |
| ISR | Blog, ürün sayfaları | 3600 (1 saat) |
| SSR | Kullanıcıya özel içerik | 0 (her istekte) |
| Client-side | Dashboard, kişisel veriler | - |
Haber siteleri için revalidate süresini 300 saniye (5 dakika) olarak ayarlayın. Blog içerikleri için 3600-86400 saniye aralığı yeterlidir.
Core Web Vitals Optimizasyonu
Lighthouse 100 skoru, mükemmel bir teknik kurulumun göstergesi. Next.js, bu hedef için birçok yerleşik araç sunuyor.
Image Optimizasyonu: next/image bileşeni, WebP dönüşümü, lazy loading ve boyut optimizasyonunu otomatik yapıyor. priority prop'unu LCP elementi olan görsele ekleyin.
Font Optimizasyonu: next/font ile Google Fonts'u local olarak sunun. Bu yaklaşım, harici DNS çözümlemesini ortadan kaldırır ve FOUT (Flash of Unstyled Text) sorununu çözer.
Script Optimizasyonu: Üçüncü taraf scriptleri için next/script bileşenini strategy="afterInteractive" veya strategy="lazyOnload" ile yükleyin. Analytics ve chat widget'larını bu şekilde yüklemek, INP skorunu iyileştirir.
| Performans Metriği | Hedef | next/image Katkısı | next/font Katkısı |
|---|---|---|---|
| LCP | < 2.5s | Yüksek | Orta |
| INP | < 200ms | Düşük | Düşük |
| CLS | < 0.1 | Yüksek | Yüksek |
| FCP | < 1.8s | Orta | Yüksek |
Sık Sorulan Sorular
Next.js App Router, Pages Router'a göre SEO açısından daha mı iyi? App Router, metadata yönetimi, sitemap üretimi ve streaming rendering açısından Pages Router'dan daha güçlü. Ancak mevcut Pages Router projeleri için zorunlu geçiş yapmak gerekmez. Yeni projeler için App Router tercih edin. Mevcut Pages Router sitelerinde de doğru yapılandırmayla yüksek SEO skoru elde edebilirsiniz.
generateMetadata async olmalı mı? Hayır, zorunlu değil. Veritabanı veya API'den veri çekmeden metadata oluşturabiliyorsanız, senkron metadata export yeterli. Dinamik içerik gerektiren sayfalarda async generateMetadata kullanın. Her iki yaklaşım da App Router tarafından destekleniyor.
JSON-LD nerede eklenmelidir, layout'ta mı yoksa page'de mi? Site genelinde geçerli schema'ları (WebSite, Organization) root layout'a ekleyin. Sayfa özelindeki schema'ları (Article, Product, FAQ) ilgili page bileşenine ekleyin. Bu ayrım, her sayfanın kendi bağlamına uygun yapılandırılmış veri sunmasını sağlar.
Next.js ile sitemap oluşturmak için next-sitemap kütüphanesi hâlâ gerekli mi? App Router'ın yerleşik sitemap.ts desteği, çoğu kullanım senaryosu için yeterli. next-sitemap, özellikle Pages Router projeleri için hâlâ geçerli. App Router projesinde next-sitemap kullanmak mümkün, ama yerleşik çözüm daha az bağımlılık anlamına geliyor.
Canonical URL'leri nerede tanımlamalıyım? Her sayfa için alternates.canonical değerini generateMetadata içinde açıkça belirtin. Özellikle URL parametreli sayfalar (filtreleme, sayfalama) için canonical tag zorunlu. Parametre içeren URL'lerin tümü, parametre içermeyen ana URL'ye canonical olarak işaret etmeli.
ISR ile SEO arasındaki ilişki nedir? ISR, sayfaları statik olarak sunduğu için Googlebot sayfayı hızla tarayabiliyor. Revalidate süresi geçmeden yapılan değişiklikler, Googlebot'un görmesi için yeniden derlemeyi tetikler. Kritik içerik güncellemeleri için On-Demand ISR ile manuel revalidation tetikleyebilirsiniz.
OG görsel boyutu ne olmalıdır? 1200x630 piksel, Facebook ve Twitter için standart boyut. Next.js ImageResponse API'si varsayılan olarak bu boyutu kullanıyor. Görselin dosya boyutunu 200KB altında tutun; büyük OG görseller sosyal medya crawler'larında sorun yaratabilir.
hreflang etiketleri doğru çalışıyor mu nasıl kontrol ederim? Google Search Console'daki "Uluslararası Hedefleme" raporunu inceleyin. hreflang Validator araçlarını (hreflang.org gibi) kullanarak hataları tespit edin. En yaygın hata: karşılıklı referans eksikliği. Türkçe sayfa İngilizce sayfaya işaret ediyorsa, İngilizce sayfa da Türkçe sayfaya işaret etmeli.
next/font ile Google Fonts nasıl kullanılır? next/font/google paketinden ilgili fontu import edin, subsets ve display parametrelerini ayarlayın. Font değişkenini root layout'ta HTML elementine className olarak ekleyin. Bu yapı, fontu local olarak sunarak Google Fonts CDN bağımlılığını kaldırır.
Sonuç ve Aksiyon Planı
Next.js App Router, SEO için güçlü bir temel sunuyor. generateMetadata, sitemap.ts, JSON-LD schema ve next/image gibi araçları doğru yapılandırdığınızda, teknik SEO sorunlarının büyük bölümünü otomatik olarak çözüyorsunuz.
Başlangıç için şu adımları izleyin: Önce root layout.tsx'e temel metadata template'ini ekleyin. Ardından sitemap.ts ve robots.ts dosyalarını oluşturun. Her sayfa türü için ilgili JSON-LD schema'yı tanımlayın. Son olarak Lighthouse ile Core Web Vitals skorlarınızı ölçün ve hedeflere ulaşana kadar optimize edin.
Teknik SEO kurulumunuzu profesyonel olarak yaptırmak veya mevcut Next.js projenizi denetletmek isterseniz:
