Next.js Sitelerinde SEO Metadata Kontrol Listesi

Bir Next.js sitesi yüksek performanslı olabilir, etkileyici bir arayüze sahip olabilir ve kaliteli içerik sunabilir. Ancak, Next.js SEO metadata katmanınız zayıfsa, arama motoru sinyalleriniz dağılır ve sosyal medya paylaşım önizlemeleriniz hatalı görünür. Bu durum, arama motoru sonuçları sayfalarındaki görünürlüğünüzü doğrudan olumsuz etkiler.

Bu yüzden, App Router SEO pratiklerini takip ederek metadata yapınızı şablon bazında denetlemeniz gerekir. Buradaki odak noktamız, modern Next.js projelerinde tutarlı bir yapı kurmak, gelişmiş kontrol mekanizmaları oluşturmak ve yaygın hata payını en aza indirmektir.

Key Takeaways

• Server-Side Sovereignty: Metadata must be generated on the server using metadata objects or generateMetadata() in App Router to ensure search engines and social media scrapers receive valid HTML immediately.
• Strategic Hierarchy: Leverage layout.tsx to define base metadata templates while utilizing generateMetadata() in dynamic routes to ensure content-specific accuracy for titles, canonicals, and Open Graph tags.
• Avoid Client-Side Dependency: Never rely on JavaScript-based injection for critical head elements; if a component is marked with use client, lift the metadata requirements to a parent Server Component.
• Data Integrity: Ensure metadataBase is correctly configured to production domains to prevent broken links and verify that robots and alternates configurations remain consistent across all environment transitions.
• Proactive Validation: Implement CI-based smoke tests to check source code outputs after deployment and use Search Console URL inspection to catch potential metadata conflicts or indexing issues early.

İlk kontrol: Metadata gerçekten sunucudan mı geliyor?

Next.js App Router ile çalışırken başlangıç noktanız oldukça nettir. metadata nesnesi veya generateMetadata() fonksiyonu yalnızca Server Components üzerinde çalışır. Bu nedenle, arama motorlarının tarama süreçleri için kritik öneme sahip olan head element içeriğini asla istemci tarafına bırakmamalısınız.

Metadata verisi ilk HTML cevabında yer almıyorsa, indeksleme performansı ve sosyal medya paylaşım önizlemeleri ciddi risk altındadır.

Başarılı bir SEO stratejisi için uygulamanız gereken kontrol listesi oldukça nettir:

• Metadata tanımlarınızı her zaman app dizinindeki ilgili route segmenti içerisinde, yani layout.tsx veya page.tsx dosyalarınızda sunucu tarafında oluşturun.
• Eğer sayfanız use client direktifi ile işaretlenmişse, metadata tanımlarını bu dosyadan ayırarak bir üst seviyedeki Server Component layout dosyasına taşıyın.
• Sayfanızın View Source çıktısını inceleyerek canonical, robots ve Open Graph etiketlerinin HTML içinde doğrudan yer aldığından emin olun.
• Tarayıcıda JavaScript ile sonradan enjekte edilen head element yapısına güvenmeyin.
• Staging ortamındaki ayarların production ortamına sızmadığını doğrulayın.
• Next.js tarafından desteklenen streaming metadata özelliğinden yararlanarak, içerik render edilirken metadata verisinin daha hızlı sunulmasını sağlayın. Bu yöntem, Time to First Byte süresini iyileştirirken ilk render performansını da optimize eder.

2026 itibarıyla App Router odaklı en kapsamlı kaynaklardan biri olan Next.js 15 metadata kılavuzu, modern SEO yaklaşımlarını detaylandırıyor. Benzer şekilde pratik App Router SEO rehberleri, sunucudan üretilen metadata yapısının neden şart olduğunu teknik olarak açıkça ortaya koyuyor.

Eski projeler için kısa uyumluluk notu

Pages Router mimarisini kullanan eski projelerde next/head bileşeni hâlâ çalışmaktadır. Ancak Head etiketi içine yerleştirilen meta bilgilerin route bazında çakışması, kopyalanması veya güncellenmesinin unutulması oldukça kolaydır.

Böyle bir projede tam bir modernizasyon hemen mümkün değilse, en azından canonical, robots ve Open Graph etiketlerini merkezi bir yardımcı katmanda toplayın. Gelecekte projeyi App Router mimarisine taşırken, bu kuralları doğrudan metadata API yapısına aktararak süreci kolaylaştırabilirsiniz.

Root layout’ta temel iskeleti kurun

Sağlam bir SEO altyapısı, çoğu zaman app/layout.tsx dosyasında tanımlanan statik metadata object yapısı ile başlar. Buradaki temel amaç her sayfaya aynı etiketleri basmak değil, ortak kuralları tek bir merkezde toplamak ve alt segmentlerin güvenle üzerine yazmasını sağlamaktır.

Aşağıdaki örnek, App Router ile çalışan Next.js projeleri için ideal bir başlangıç iskeleti sunar:

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://ornek.com"),
  title: {
    template: "%s | Ornek",
    default: "Ornek",
  },
  description: "Web sitemizin temel meta description tag içeriği.",
  alternates: {
    canonical: "/",
    languages: {
      "tr-TR": "/tr",
      "en-US": "/en",
    },
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "tr_TR",
    url: "/",
    siteName: "Ornek",
    images: [
      {
        url: "/og/default.jpg",
        width: 1200,
        height: 630,
      },
    ],
  },
};

Buradaki en kritik nokta metadataBase property kullanımıdır. Göreceli olarak verilen canonical linkler, dil alternatifleri ve OG görsel yolları bu değer üzerinden çözülür. Bu alan yanlış yapılandırılırsa tüm bağlantı hiyerarşisi sessizce bozulur. Ayrıca title template kullanmak, marka tutarlılığını tüm alt sayfalarda korumanıza yardımcı olur.

Kendi denetiminizde şu maddeleri kontrol ettiğinizden emin olun:

• metadataBase property, production domain adresini doğru bir şekilde gösteriyor mu?
• Meta description tag, ana sayfa için tanımlandı mı ve diğer sayfalar tarafından özelleştirilebiliyor mu?
• Canonical URLs, her rota için arama motorlarına doğru kaynağı işaret ediyor mu?
• Çok dilli yapılarda alternates.languages tanımları karşılıklı olarak eşleşiyor mu?
• OG image dosyası sunucudan 200 başarılı yanıt kodu ile dönüyor mu?
• Root layout içerisindeki robots yapılandırması, alt sayfalarda istenmeyen bir şekilde eziliyor mu?

Eğer render süreçlerindeki farklardan şüpheleniyorsanız Next.js projelerinde render analizi yapmak işinizi hızlandırır. Sorunlar çoğu zaman kodun kendisinde değil, ilk HTML çıktısı ile istemci tarafındaki sonuçlar arasındaki farktan kaynaklanır.

Dinamik sayfalarda generateMetadata() nasıl denetlenir?

Ürün, yazı, kategori ve şehir sayfaları gibi dinamik rotalarda statik metadata değerleri yeterli olmaz. Bu noktada Next.js projelerinde SEO başarısını yönetmek için generateMetadata function yapısını kullanmak kritik bir rol oynar. Doğru yapılandırılmış bir generateMetadata function, arama motorlarının sayfalarınızı daha iyi anlamasını sağlar. Ancak en sık yapılan hatalar genellikle bu katmanda gerçekleşir.

İyi bir kural şudur: Sayfayı oluşturan veriler ile dinamik metadata değerlerini aynı doğruluk seviyesiyle üretin. İçerik bir API kaynağından geliyorsa, canonical, robots ve Open Graph etiketleri de aynı veri tutarlılığı ile sunulmalıdır.

import type { Metadata } from "next";

async function getProduct(slug: string) {
  const res = await fetch(`https://api.ornek.com/products/${slug}`, {
    next: { revalidate: 300 },
  });

  if (!res.ok) return null;
  return res.json();
}

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const product = await getProduct(params.slug);

  if (!product) {
    return {
      robots: { index: false, follow: false },
    };
  }

  const canonical = `/urun/${product.slug}`;

  return {
    alternates: {
      canonical,
    },
    robots: product.isIndexable
      ? { index: true, follow: true }
      : { index: false, follow: false },
    openGraph: {
      type: "website",
      url: canonical,
      locale: "tr_TR",
      images: product.ogImage
        ? [{ url: product.ogImage, width: 1200, height: 630 }]
        : [],
    },
  };
}

Bu örnekte iki temel husus öne çıkıyor. İlk olarak, mevcut olmayan içerikler için indeksleme izni kapatılıyor. İkinci olarak, canonical ve OG URL yapıları aynı rota mantığından türetiliyor. Böylece arama motorlarına gönderilen sinyaller birbirini bozmuyor.

Dinamik sayfalarda gelişmiş görsel yönetimi için bir opengraph-image dosyası kullanabilir veya çok daha spesifik ihtiyaçlarınız varsa ImageResponse constructor aracını kullanarak dinamik görseller oluşturabilirsiniz. Ayrıca zengin sonuçlar (rich snippets) elde etmek için bu bileşenlerin içerisine JSON-LD structured data verilerini de dahil etmeyi unutmamalısınız.

Dinamik route denetiminde şu hataları sık görürsünüz:

• API hata verdiğinde metadata boş dönüyor.
• Kaldırılmış ürünler hala indexable olarak işaretleniyor.
• Filtreli veya parametreli URL yapıları canonical olarak basılıyor.
• OG image alanı null geliyor ve build sonrası sessiz bir hata oluşuyor.
• Aynı şablondan çıkan tüm sayfalar tek bir canonical değerine işaret ediyor.

Bu noktada metadata temelleri hakkındaki kaynaklar ekip içi eğitim süreçlerinde işe yarar. Ancak production seviyesinde bir denetim yaparken, kendi gerçek veri akışınızı ve oluşturduğunuz dinamik metadata çıktılarını test etmek çok daha önemlidir.

alternates, robots ve openGraph alanlarında sık görülen hatalar

Bu üç alan, görünüşte küçük ancak arama motoru görünürlüğü üzerinde büyük etkisi olan bileşenlerdir. İndekslenebilirlik, dil eşleştirmesi, sosyal medya paylaşımı ve teknik tarama kuralları doğrudan bu ayarlar üzerinden belirlenir.

alternates için kontrol

alternates.canonical etiketi her sayfada dikkatle kurgulanmalıdır. Parametreli URL’ler, sıralama seçenekleri ve kampanya sorgu dizileri bu alanı kirletmemelidir. Eğer çok dilli bir yapı kullanıyorsanız, languages eşleşmelerinin eksiksiz olduğundan emin olun.

Kötü bir örnek; Türkçe sayfanın canonical olarak İngilizce URL’yi işaret etmesidir. Bu durumda hem dil sinyali zayıflar hem de arama motorları yanlış sayfayı dizine ekleyebilir. Ayrıca, bu sayfaları yapılandırırken modern arama motorlarının artık doğrudan etkilemediği eski keyword metadata kullanımları yerine, içeriğin özünü yansıtan meta description etiketlerini uzunluk ve alaka düzeyi açısından mutlaka doğrulayın.

robots için kontrol

robots alanı, staging döneminden production aşamasına sızan hataların en tehlikelisidir. Bir kez unutulursa tüm içerikler indeks dışı kalabilir. Global kurallarınız için robots.txt dosyasını yapılandırmayı ihmal etmeyin, ancak sayfa bazlı istisnalar için metadata içindeki robots alanını kullanın.

Şunları tek tek doğrulayın:

• Kategori ve içerik sayfaları index, follow olarak ayarlanmış mı?
• Geçici kampanya, sepet, kullanıcı hesabı ve arama sonuçları sayfaları noindex olarak işaretli mi?
• Boş filtre kombinasyonları gereksiz yere indeksleniyor mu?
• googleBot alt ayarları, ana robots kararıyla çelişiyor mu?

openGraph ve sosyal medya paylaşımı için kontrol

Open Graph protokolü sadece sosyal medya paylaşımı için bir araç değildir; içerik URL’si, görsel yolu ve locale bilgisi burada netleşir. Yanlış yapılandırılmış bir Open Graph görseli, yanlış bir canonical etiketi kadar sorun çıkarabilir. Aynı zamanda Twitter Cards entegrasyonu ile içeriklerinizin Twitter üzerinde nasıl görüneceğini de optimize etmeyi unutmayın.

Kısa kontrol listesi:

• openGraph.url değeri, canonical etiketiyle aynı sayfayı mı işaret ediyor?
• Görseller 1200×630 gibi yaygın oranlarda hazır mı ve görsel yolu production ortamında erişilebilir mi?
• Locale değeri dil yapınızla tam uyumlu mu?
• Mobil uyumluluk için viewport meta tag ayarlarınızın doğru yapılandırıldığından emin olun.

Mobil ve render edilmiş çıktı arasındaki fark bu alanları bozuyorsa, mobil öncelikli indeksleme denetimi yaparak HTML karşılaştırması gerçekleştirin. Masaüstünde doğru görünen etiketler, mobil botlar tarafında aynı sonucu vermeyebilir. Unutmayın ki, teknik metadata doğruluğu, arama motorlarının sitenizi hem anlaması hem de doğru kitleye ulaştırması için kritik bir adımdır.

Yayın öncesi denetim akışı

Kod doğru görünebilir, ancak asıl karar üretim ortamındaki çıktıda verilir. Başarılı bir SEO stratejisi için her deploy sonrası kapsamlı bir metadata kontrolü yapmanız gerekir. Unutmayın ki optimize edilmiş başlık ve açıklamalar doğrudan tıklama oranınızı (CTR) etkiler.

Benim önerdiğim denetim akışı şöyledir:

1. View Source ile kaynak kodunu açın ve canonical, robots, OG alanlarını ham HTML içinde bulun.
2. Sitenizin sitemap.xml dosyasını inceleyerek, indekslenen URL’lerin canonical etiketlerinizle tam olarak eşleştiğinden emin olun.
3. Dosya tabanlı metadata (robots.txt ve sitemap.xml) ile yapılandırma tabanlı metadata (dışa aktarılan nesneler) arasındaki tutarlılığı doğrulayın.
4. Favicon metadata ayarlarının doğru yapıldığından ve tarayıcı sekmesinde düzgün görüntülendiğinden emin olun.
5. Aynı URL’yi gizli sekmede test ederek cache kaynaklı yanılsamaları azaltın.
6. Search Console URL Denetimi ile canlı sayfayı kontrol edin.
7. Paylaşım önizlemesini farklı platformlarda gözle bakarak doğrulayın.

Sadece mutlu yol testi yeterli değildir çünkü metadata sorunları çoğu zaman uç durumlarda ortaya çıkar. Ürün stokta yoksa ne olduğu, slug değiştiğinde yönlendirmenin nasıl çalıştığı ve boş locale değerlerinde hangi canonical etiketinin basıldığı kritik öneme sahiptir. Ayrıca, metadata yükleme süreçlerinin yanlış yönetilmesi, özellikle sayfa başındaki etiketlerin render edilme biçimi nedeniyle Core Web Vitals metriklerini, özellikle de CLS değerini olumsuz etkileyebilir.

İndeks tarafında bir tuhaflık görürseniz Search Console URL denetimi ve indeks sorunları üzerinden kapsam, canlı test ve canonical yorumunu birlikte okuyun. Çoğu zaman tek bir etiket değil, birkaç küçük çelişki bir araya gelerek hatalara neden olur.

Son bir pratik not olarak, CI sürecinize basit bir smoke test ekleyin. Build sonrası birkaç kritik URL için head içeriğini çekip beklenen canonical, robots ve OG image değerlerini doğrulayın. Böyle bir otomasyon, haftalarca sürebilen görünmez SEO hatalarını erkenden yakalamanızı sağlar.

Frequently Asked Questions

Why is my metadata not showing up in social media previews?

Social media crawlers often struggle with JavaScript-rendered content. Ensure your metadata is defined in a Server Component so it appears directly in the raw HTML source code, and verify that your openGraph images are accessible and reachable by public bots.

Can I use ‘use client’ in a page file and still have dynamic metadata?

No, you cannot export metadata from a file marked with use client. You should move the logic into a separate Server Component or wrapper layout to handle the metadata generation, while keeping the interactive parts of your page in the client-side component.

How do I handle canonical URLs for dynamic routes?

Use the generateMetadata() function to dynamically construct the canonical URL based on the route parameters. Always ensure the generated URL is absolute by using the metadataBase property to prevent issues with relative paths in complex link structures.

What is the purpose of ‘metadataBase’ and what happens if I forget it?

metadataBase serves as the foundational domain for all relative URLs in your metadata configuration. If it is missing or incorrectly set, your canonical tags, Open Graph images, and alternate links will point to invalid or incorrect locations, disrupting your site’s SEO hierarchy.

Son söz

Next.js projelerinde metadata yönetimi, son dakikada eklenen birkaç etiketle çözülecek bir süreç değildir. Kalıcı başarı için App Router mimarisinde sunucu tarafında üretilen, sayfa bazında test edilen ve deploy sonrası doğrulanan sistemli bir yapı kurmak gerekir.

Bu süreçte metadata inheritance mekanizmasını iyi kavramak, iç içe geçmiş layout yapılarında üst katmandan gelen verilerin alt sayfalarda nasıl birleştiğini anlamanıza yardımcı olur. Ölçeklenebilir bir mimari için generateMetadata function yapısını doğru konumlandırmak, her rotanın kendi SEO ihtiyaçlarına göre şekillenmesini sağlar. Ayrıca, opengraph-image stratejinizi tutarlı tutarak markanızın sosyal medyadaki görünürlüğünü profesyonel bir düzeye taşıyabilirsiniz.

Özetle, metadataBase ayarının doğruluğundan emin olun, generateMetadata fonksiyonunu veriye dayalı bir mantıkla çalıştırın ve robots veya alternates gibi yapılandırmaların birbiriyle çelişmediğinden emin olun. Bu disiplin oturduğunda, arama motoru indeksleme süreçlerindeki hatalar minimize edilecek ve sitenizin organik performansındaki sürprizler ciddi biçimde azalacaktır.

This post may contain affiliate links. If you make a purchase through these links, I may earn a small commission at no extra cost to you.