Next.js 16 ile Kapsamlı SEO Rehberi: Metadata, Core Web Vitals ve Server Components
Next.js 16 App Router mimarisinde dinamik metadata, robots, sitemap, Open Graph ve Server Component optimizasyonlarını adım adım uygulayın.
Next.js 16 ile Arama Motoru Optimizasyonu#
Arama motoru optimizasyonu (SEO), web sitenizin Google ve Bing gibi arama motorlarında organik trafik alabilmesi ve rakiplerinizin önüne geçebilmesi için en kritik mühendislik yatırımıdır.
Next.js 16 App Router mimarisi, React Server Components (RSC), gelişmiş dosya tabanlı metadata konvansiyonları ve yerleşik performans optimizasyonları sayesinde modern web için rakipsiz bir SEO altyapısı sunar.
Bu rehberde, sıfırdan zirveye kurumsal bir SEO stratejisinin kodlama adımlarını inceliyoruz.
1. MetadataBase Tanımlamanın Önemi#
Next.js'te göreli URL'lerin (örneğin Open Graph görselleri, canonical linkler ve favicon adresleri) mutlak (absolute) URL formatına dönüştürülmesi için kök layout.tsx içinde metadataBase mutlaka tanımlanmalıdır.
| 1 | // src/app/layout.tsx |
| 2 | import type { Metadata } from "next"; |
| 3 | |
| 4 | export const metadata: Metadata = { |
| 5 | metadataBase: new URL("https://nmdemirkol.com"), |
| 6 | title: { |
| 7 | default: "Nuh Mehmet Demirkol | Bilgisayar Mühendisi & Full Stack Developer", |
| 8 | template: "%s | Nuh Mehmet Demirkol", |
| 9 | }, |
| 10 | description: "Mobil uygulama (Flutter) ve modern web (Next.js) mimarileri.", |
| 11 | alternates: { |
| 12 | canonical: "/", |
| 13 | }, |
| 14 | openGraph: { |
| 15 | title: "Nuh Mehmet Demirkol | Portföy & Blog", |
| 16 | description: "Yazılım mimarisi, mobil ve web geliştirme.", |
| 17 | url: "https://nmdemirkol.com", |
| 18 | siteName: "Nuh Mehmet Demirkol", |
| 19 | locale: "tr_TR", |
| 20 | type: "website", |
| 21 | }, |
| 22 | robots: { |
| 23 | index: true, |
| 24 | follow: true, |
| 25 | googleBot: { |
| 26 | index: true, |
| 27 | follow: true, |
| 28 | "max-video-preview": -1, |
| 29 | "max-image-preview": "large", |
| 30 | "max-snippet": -1, |
| 31 | }, |
| 32 | }, |
| 33 | }; |
2. Dinamik Sayfalarda generateMetadata Kullanımı#
Blog yazıları, ürün detayları veya proje sayfaları gibi dinamik rotalarda her sayfanın kendine has başlık, açıklama ve Open Graph etiketlerine sahip olması gerekir.
| 1 | // src/app/blog/[slug]/page.tsx |
| 2 | import type { Metadata } from "next"; |
| 3 | import { blogPosts } from "@/data/posts"; |
| 4 | |
| 5 | type Props = { |
| 6 | params: Promise<{ slug: string }>; |
| 7 | }; |
| 8 | |
| 9 | export async function generateMetadata({ params }: Props): Promise<Metadata> { |
| 10 | const { slug } = await params; |
| 11 | const post = blogPosts.find((p) => p.slug === slug); |
| 12 | |
| 13 | if (!post) { |
| 14 | return { |
| 15 | title: "Yazı Bulunamadı", |
| 16 | description: "Aradığınız makale mevcut değil.", |
| 17 | }; |
| 18 | } |
| 19 | |
| 20 | return { |
| 21 | title: post.title, |
| 22 | description: post.description, |
| 23 | authors: [{ name: post.author.name }], |
| 24 | alternates: { |
| 25 | canonical: `/blog/${post.slug}`, |
| 26 | }, |
| 27 | openGraph: { |
| 28 | type: "article", |
| 29 | title: post.title, |
| 30 | description: post.description, |
| 31 | url: `https://nmdemirkol.com/blog/${post.slug}`, |
| 32 | publishedTime: post.publishedAt, |
| 33 | authors: [post.author.name], |
| 34 | tags: post.tags, |
| 35 | }, |
| 36 | }; |
| 37 | } |
3. Dinamik Sitemap ve Robots.txt Otomasyonu#
Next.js 16'da dosya tabanlı rotalarla arama motorlarına güncel site haritası sunmak son derece pratiktir.
| 1 | // src/app/sitemap.ts |
| 2 | import type { MetadataRoute } from "next"; |
| 3 | import { blogPosts } from "@/data/posts"; |
| 4 | |
| 5 | export default function sitemap(): MetadataRoute.Sitemap { |
| 6 | const baseUrl = "https://nmdemirkol.com"; |
| 7 | |
| 8 | const staticRoutes: MetadataRoute.Sitemap = [ |
| 9 | { url: baseUrl, lastModified: new Date(), changeFrequency: "daily", priority: 1.0 }, |
| 10 | { url: `${baseUrl}/projeler`, lastModified: new Date(), changeFrequency: "daily", priority: 0.9 }, |
| 11 | { url: `${baseUrl}/blog`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.8 }, |
| 12 | ]; |
| 13 | |
| 14 | const blogRoutes: MetadataRoute.Sitemap = blogPosts.map((post) => ({ |
| 15 | url: `${baseUrl}/blog/${post.slug}`, |
| 16 | lastModified: new Date(post.publishedAt), |
| 17 | changeFrequency: "weekly", |
| 18 | priority: 0.7, |
| 19 | })); |
| 20 | |
| 21 | return [...staticRoutes, ...blogRoutes]; |
| 22 | } |
4. Yapılandırılmış Veri (JSON-LD Schema.org)#
Google arama sonuçlarında yıldızlı derecelendirmeler, yazar profilleri ve SSS akordiyonları gibi zengin snippet'lar elde etmek için Schema.org etiketlerini JSON-LD formatında sayfaya ekliyoruz:
| 1 | export function generateArticleSchema(post: BlogPost) { |
| 2 | return { |
| 3 | "@context": "https://schema.org", |
| 4 | "@type": "TechArticle", |
| 5 | headline: post.title, |
| 6 | description: post.description, |
| 7 | author: { |
| 8 | "@type": "Person", |
| 9 | name: post.author.name, |
| 10 | url: "https://nmdemirkol.com", |
| 11 | }, |
| 12 | datePublished: post.publishedAt, |
| 13 | publisher: { |
| 14 | "@type": "Organization", |
| 15 | name: "Nuh Mehmet Demirkol", |
| 16 | url: "https://nmdemirkol.com", |
| 17 | }, |
| 18 | }; |
| 19 | } |
Bu adımları eksiksiz uyguladığınızda, projeniz Google dizininde hızla yükselerek maksimum organik görünürlük kazanacaktır.
Next.js Web Yazılım, SaaS, Admin Paneli & SEO
Next.js App Router, TypeScript, Tailwind CSS ile %100 Lighthouse performanslı kurumsal web siteleri, SaaS panelleri ve Core Web Vitals SEO optimizasyonu.
İlgili Çözüm Paketleri
Admin Panelli Mobil Uygulama Geliştirme | Nuh Mehmet Demirkol
İşletmenizin tüm dinamiklerini (kullanıcılar, siparişler, stoklar, bildirimler ve finansal raporlar) tek tıkla yönetebileceğiniz web tabanlı Next.js admin paneli ve Flutter mobil uygulama ekosistemi.
Özel Web Yazılım & SaaS Geliştirme (Next.js) | Demirkol
Hazır şablonlardan uzak, tamamen işletmenizin ihtiyaçlarına göre sıfırdan kodlanan, Google PageSpeed 99+ puan alan, ultra hızlı ve SEO lideri Next.js web platformları.
Teknik Kılavuzlar & Blog
Core Web Vitals Nedir ve Nasıl 100 Skora Ulaşılır? (LCP, INP, CLS Optimizasyonu)
Google PageSpeed testlerinde 100 tam puan almak için INP, LCP ve CLS metriklerini optimize etme, görsel ve font yönetimi stratejileri.
Schema.org ve Rich Snippets: Google Arama Sonuçlarında Öne Çıkın
JSON-LD ile zengin arama sonuçları elde etme; BlogPosting, FAQPage, BreadcrumbList ve Organization şemalarının React & Next.js üzerinde doğru kullanımı.
İlgili Canlı Projeler
Profesyonel Öğretmen Bul Platformu
Öğrenci ve velilerin branş bazında özel ders öğretmenlerini bulup randevu alabildiği, modern web ve mobil entegrasyonlu SaaS sistemi.
Dijital Düğün & Nişan Davetiyesi Web Platformu
Çiftlerin kişiselleştirilmiş dijital davetiyeler oluşturup LCV (katılım bildirimi) ve yol tarifi alabildiği modern interaktif platform.
Hibrit Kart Web & Dijital Kartvizit Platformu
Hibrit Medya bünyesinde frontend mimarisi Next.js TSX ile sıfırdan geliştirilen dijital kartvizit ve kurumsal profil sistemi.
Bu Konuda Projeniz mi Var?
Makalede bahsedilen mimari çözümleri, mobil veya modern web projenizde sıfır hata ve maksimum performansla hayata geçirmek için doğrudan iletişime geçebilirsiniz.