Üstveri, SEO ve Belge Başlığı
Güçlü SEO ve sosyal paylaşım için Next.js 15 Metadata API'yi kullanarak sayfa başlıklarını, açıklamalarını, Open Graph etiketlerini ve favicon'ları yapılandırın.
Üstveri, SEO ve Belge Başlığı, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Why Metadata Matters
Search engines and social platforms read your metadata to build results and link previews — so titles and descriptions drive clicks and ranking.
The Metadata API
Next.js 15 replaces manual <head> edits with a declarative Metadata API: export a metadata object or generateMetadata and it renders the tags.
Static Metadata Export
For metadata that never changes, export a typed metadata object — Next.js merges it into the document head automatically.
export const metadata = {
title: 'My Dashboard',
description: 'Manage your account and settings',
};
export default function Page() {
return <h1>Dashboard</h1>;
}Title Templates
In a layout, set a title template so child pages share a suffix. The %s placeholder is swapped for each page's own title.
export const metadata = {
title: {
template: '%s | Acme',
default: 'Acme',
},
};Dynamic Metadata
When the title depends on data, export an async generateMetadata function — it gets the route params and can fetch before rendering.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.excerpt };
}Open Graph Tags
Open Graph metadata controls how a link looks when shared. Add an openGraph field with a title, description, and image.
export const metadata = {
openGraph: {
title: 'Acme Launch',
description: 'The new way to build apps',
images: ['/og-launch.png'],
},
};Twitter Cards
Twitter/X uses its own card metadata. Set the twitter field to control the preview shown when your link gets posted.
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Acme Launch',
images: ['/og-launch.png'],
},
};Favicons and Icons
Drop special files in app/ and Next.js wires them up: favicon.ico for the tab, icon.png for the app, apple-icon.png for iOS.
Dynamic OG Images
Next.js can generate social images on the fly: an opengraph-image.tsx using ImageResponse renders JSX to a PNG per page.
import { ImageResponse } from 'next/og';
export default function Image() {
return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}Robots and Sitemaps
Steer crawlers with a robots.ts file and publish a sitemap.ts so search engines find every route — both export plain serializable data.
export default function robots() {
return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}Best Practices
For strong SEO: unique title and description per page, titles under ~60 chars, always an Open Graph image, and generateMetadata for dynamic routes.
Quick Check
Test your metadata knowledge.
Recap
You learned the Metadata API: static metadata vs generateMetadata, title templates, openGraph/twitter previews, and the special icon/SEO files.
Sıkça Sorulan Sorular
“Üstveri, SEO ve Belge Başlığı” dersi ücretsiz mi?
Evet — “Üstveri, SEO ve Belge Başlığı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.
“Üstveri, SEO ve Belge Başlığı” dersinde ne öğreneceğim?
Güçlü SEO ve sosyal paylaşım için Next.js 15 Metadata API'yi kullanarak sayfa başlıklarını, açıklamalarını, Open Graph etiketlerini ve favicon'ları yapılandırın. Next.js 15 Fullstack Web Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Üstveri, SEO ve Belge Başlığı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Next.js 15 Fullstack Web Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Next.js 15'e Giriş
- Proje Kurulumu ve Yapılandırma
- Sayfalar, Düzenler ve Yönlendirmeye Giriş
- Üstveri, SEO ve Belge Başlığı