Next.js SEO dostu bir framework olarak biliniyor. Bu doğru. Ama "Next.js kullanıyorum, SEO'm iyi" demek, "spor salonu üyeliğim var, formum iyi" demek gibi. Araç iyi de, onu doğru kullanmak size kalmış.
Bu yazıda AppDuce web sitesini (evet, şu an okuduğunuz site) geliştirirken uyguladığımız SEO stratejilerini paylaşıyoruz. Teori değil, uygulama.
Next.js Neden SEO İçin İyi?
Kısa cevap: sunucu tarafında render yapabilmesi.
Geleneksel React uygulamaları render işini istemci tarafında yapıyor (CSR). Sayfa yüklendiğinde tarayıcıya önce boş bir HTML geliyor, sonra JavaScript çalışıp içeriği oluşturuyor. Google bu süreci takip edebiliyor ama araya gecikme giriyor ve bazı içerikler atlanabiliyor.
Next.js size üç render stratejisi sunuyor. SSG (Static Site Generation) HTML'i build zamanında üretiyor; en hızlısı bu ve blog yazılarıyla hizmet sayfaları için ideal. SSR (Server-Side Rendering) her istekte sunucuda HTML üretiyor, yani dinamik içerik için biçilmiş kaftan. ISR (Incremental Static Regeneration) ise SSG'nin üstüne periyodik yenileme ekliyor ve çoğu senaryoda ikisinin en iyi yanını birleştiriyor.
Sonuçta Google'a düzgün bir HTML veriyorsunuz ve JavaScript'in çalışmasını beklemesine gerek kalmıyor. Büyük avantaj.
Metadata API'si: Başlık ve Açıklama
Next.js 15'in Metadata API'si SEO için güçlü bir araç. Her sayfaya özel metadata tanımlayabilirsiniz:
export async function generateMetadata({ params }) {
return {
title: "Sayfa Başlığı, Marka",
description: "150-160 karakter arası açıklama",
openGraph: { ... },
twitter: { ... },
alternates: { canonical: "..." },
};
}
Burada kritik birkaç nokta var. Title etiketini 50-60 karakter arasında tutun; birincil anahtar kelimeyi başa, marka adını sona koyun. Tutarlılık için de bir title template kullanın:
// layout.tsx
title: {
default: "AppDuce",
template: "%s | AppDuce"
}
Meta description'ı 150-160 karakterde tutun. Sayfanın ne hakkında olduğunu net söyleyin, araya bir tıklama çağrısı sıkıştırın ve her sayfa için benzersiz yazın. Canonical tarafında ise her sayfanın tek bir resmi URL'si olsun; bu, duplicate content sorununu baştan engelliyor.
Yapısal Veri (JSON-LD)
Google içeriğinizi anlamak için yapısal veriye bakar. Next.js'te bunu JSON-LD ile yaparsınız:
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "Article",
headline: post.title,
author: { "@type": "Person", name: post.author },
datePublished: post.date,
dateModified: post.dateModified,
})
}}
/>
Hangi sayfada hangi schema:
| Sayfa Tipi | Schema Tipi |
|---|---|
| Ana sayfa | Organization, WebSite |
| Blog listesi | BreadcrumbList |
| Blog yazısı | Article, BreadcrumbList |
| Hizmet sayfası | Service, BreadcrumbList, FAQPage |
| İletişim | ContactPage, BreadcrumbList |
| Hakkımızda | AboutPage, BreadcrumbList |
Her sayfa tipini ona en uygun schema ile eşleştirin, sonra yayına almadan önce her şablonu Google Rich Results Test ile doğrulayın.
Sitemap ve Robots
Next.js 15'te sitemap.ts dosyasıyla dinamik sitemap oluşturabilirsiniz:
export default async function sitemap() {
const posts = getAllPosts("tr");
const blogEntries = posts.map((post) => ({
url: `https://appduce.com/tr/blog/${post.slug}`,
lastModified: new Date(post.frontmatter.date),
alternates: {
languages: {
tr: `https://appduce.com/tr/blog/${post.slug}`,
en: `https://appduce.com/en/blog/${post.alternateSlug}`,
},
},
}));
return [...staticPages, ...blogEntries];
}
robots.ts ile hangi sayfaların indeksleneceğini kontrol edin:
export default function robots() {
return {
rules: { userAgent: "*", allow: "/" },
sitemap: "https://appduce.com/sitemap.xml",
};
}
Çok Dilli SEO (Hreflang)
Birden fazla dilde içerik sunuyorsanız hreflang zorunlu. Google'a "bu sayfanın Türkçe versiyonu şu, İngilizce versiyonu bu" demiş oluyorsunuz.
Next.js'te iki yerde tanımlanır:
- Metadata alternates:
alternates: {
languages: {
tr: "https://appduce.com/tr/blog/yazı-slug",
en: "https://appduce.com/en/blog/post-slug",
}
}
- Sitemap alternates: Yukarıdaki sitemap örneğindeki gibi.
Dikkat: İki dildeki yazılar birbirini göstermeli. TR→EN ve EN→TR. Tek yönlü hreflang'i Google zaten göz ardı ediyor.
Görsel Optimizasyon
Next.js'in Image bileşeni otomatik optimizasyon yapar:
import Image from "next/image";
<Image
src="/images/hero.webp"
alt="Açıklayıcı alt metin"
width={800}
height={450}
priority // above-the-fold görseller için
/>
SEO için önemli noktalar:
- Her görsele açıklayıcı alt metin yazın
- Above-the-fold görsellere priority ekleyin
- WebP formatı kullanın
- Görselleri uygun boyutta yükleyin (3000px genişliğinde görsel 300px alanda göstermeyin)
Core Web Vitals
Google, Core Web Vitals'ı bir sıralama faktörü olarak kullanıyor.
LCP (Largest Contentful Paint), en büyük içerik öğesinin yüklenme süresi ve 2,5 saniyenin altında olmalı. SSG ya da ISR kullanıp fontları önceden yükleyerek ve hero görseline priority vererek bunu düşük tutabilirsiniz. INP (Interaction to Next Paint), etkileşime verilen yanıt süresi ve hedef 200 milisaniyenin altı; ağır JavaScript'ten kaçının, client component sayısını minimumda tutun. CLS (Cumulative Layout Shift) ise sayfanın kayma miktarı ve 0,1'in altında kalmalı; görsellere genişlik ile yükseklik verin, font yükleme stratejinizi (font-display: swap) buna göre ayarlayın.
İç Bağlantı Stratejisi
Teknik SEO'nun en kolay ama en çok ihmal edilen kısmı:
- Her blog yazısından ilgili diğer yazılara bağlantı verin
- Blog yazılarından hizmet sayfalarına doğal bağlantılar ekleyin
- Orphan sayfa bırakmayın (hiçbir yerden bağlantı almayan sayfa)
- Anchor text'leri açıklayıcı yapın ("buraya tıklayın" yerine "React Native ile mobil uygulama geliştirme")
Sık Yapılan Hatalar
En sık gördüğümüz hatalardan biri client-side routing'de canonical'ın kaçması. next-intl gibi i18n kütüphaneleri kullanırken canonical URL'lerin locale prefix'ini taşıdığından emin olun. İkincisi dinamik OG görsellerinin eksik olması; içerik sosyal medyada paylaşıldığında görsel çıkmazsa tıklama oranı düşüyor, next/og ile bu görselleri otomatik üretebilirsiniz. Bir diğeri sitemap'i gereksiz sayfalarla doldurmak: 404, login, admin gibi sayfaların orada işi yok. Son olarak meta description tekrarı; her sayfanın kendine ait bir açıklaması olmalı, kopyala-yapıştır yapmayın.
Özetle
Next.js iyi bir SEO altyapısı sunuyor ama işin yarısı yine size kalıyor. Metadata, yapısal veri, sitemap, hreflang, görsel optimizasyon ve Core Web Vitals; bunların her birini ayrı ayrı ele almanız gerekiyor.
İşin iyi tarafı, bir kez doğru kurduğunuzda sonraki sayfalar için hazır bir şablona dönüşüyor. Bu sitedeki SEO altyapısını kurmamız bir hafta sürdü ama artık her yeni blog yazısı tüm SEO gereksinimlerini otomatik olarak karşılıyor.
Bu altyapıyı bizzat kendi sitemizde kurduk; şu an okuduğun site tam olarak bu. Nasıl yaptığımızı da paylaşıyoruz. Yolculuğu takip et.