Next.js ile teknik SEO: arama motoru için 10 kritik adım

Hızlı bir site kurmak SEO'nun yarısıdır; diğer yarısı, arama motorlarının içeriğinizi doğru anlamasını sağlamaktır. Next.js App Router ikisini de kolaylaştırır. İşte sıralamada fark yaratan 10 teknik adım.

1. Her sayfa için doğru metadata

generateMetadata ile her route'a özgün başlık ve açıklama verin. Başlıklar benzersiz, açıklamalar 150-160 karakter ve tıklamaya teşvik edici olmalı.

export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params;
  const post = getPost(slug);
  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: `/blog/${slug}` },
  };
}

2. Kanonik URL'ler

Yinelenen içerik sinyallerini önlemek için her sayfaya alternates.canonical ekleyin. metadataBase kök layout'ta tanımlıysa göreli yol yeterlidir.

3. Dosya tabanlı sitemap ve robots

app/sitemap.ts ve app/robots.ts ile bunları kodla üretin; yeni içerik eklendiğinde otomatik güncellensin. Statik XML dosyalarını elle güncellemek hataya açıktır.

4. Yapısal veri (JSON-LD)

Article, BreadcrumbList, FAQPage ve Organization şemaları, zengin sonuçlar (rich results) için Google'a bağlam verir. Sunucu bileşeninde bir <script type="application/ld+json"> ile gömün.

5. Açık Grafik ve sosyal kartlar

OpenGraph ve Twitter kart metadatası, paylaşımların düzgün önizlenmesini sağlar. Dinamik OG görselleri tıklanma oranını ciddi biçimde artırır.

6. Görsel optimizasyonu

next/image ile modern formatlar, doğru boyutlandırma ve tembel yükleme (lazy loading) gelir. Görseller LCP'nin en büyük düşmanıdır; boyutları her zaman tanımlayın.

7. Core Web Vitals

• LCP: en büyük içerik 2,5 sn altında yüklensin
• INP: etkileşim gecikmesi düşük tutulsun
• CLS: yerleşim kaymasını sıfıra yaklaştırın

8. Statik üretim ve önbellekleme

generateStaticParams ile blog sayfalarını derleme zamanında üretin. Statik sayfalar daha hızlı sunulur ve tarama bütçesini verimli kullanır.

9. Anlamsal HTML ve başlık hiyerarşisi

Sayfada tek bir h1, ardından mantıklı h2/h3 hiyerarşisi kullanın. article, nav, time gibi anlamsal etiketler hem erişilebilirliği hem aranabilirliği güçlendirir.

10. İç linkleme

İlgili sayfaları birbirine bağlamak, otoriteyi yayar ve taramayı kolaylaştırır. Örneğin bu yazı, web sitesi maliyeti rehberimize bağlanıyor.

Bu adımların hepsini ilk günden mimariye gömen bir site mi istiyorsunuz? Web geliştirme hizmetimize bakın ya da bir proje konuşalım.