Metadata și SEO
metadata, generateMetadata, Open Graph, sitemap și robots.
Actualizat
Ce sunt metadatele
Metadatele sunt informații despre pagină, din <head>: titlul din tab, descrierea din Google, imaginea care apare când dai share pe un link. Nu se văd în pagină, dar decid cum arată site-ul în căutări și pe rețelele sociale.
SEO (Search Engine Optimization) = tot ce faci ca motoarele de căutare să înțeleagă și să afișeze bine paginile tale.
Tipuri de metadate
| Tip | Unde apare | Câmp în Next |
|---|---|---|
| titlu | tab, rezultatul din Google | title |
| descriere | sub titlu în Google | description |
| Open Graph | preview la share (Facebook, LinkedIn, Slack) | openGraph |
| canonical | ce URL e „originalul” (evită conținut duplicat) | alternates.canonical |
| robots | indexează / nu indexa | robots |
| icon | iconița tab-ului | fișier icon.png |
Metadata statică
// app/layout.tsx
export const metadata: Metadata = {
title: { default: 'learn.js', template: '%s · learn.js' }, // copiii: „Funcții · learn.js”
description: 'Lecții scurte de HTML, JS și Next.js.',
metadataBase: new URL('https://learn-js.vercel.app'), // pentru URL-uri absolute în OG
}Metadata dinamică
Pentru pagini care depind de date:
export async function generateMetadata({ params }: PageProps<'/blog/[slug]'>): Promise<Metadata> {
const post = await getPost((await params).slug) // aceeași funcție cache-uită ca în pagină
return {
title: post.title,
description: post.excerpt,
openGraph: { title: post.title, images: [post.cover] },
alternates: { canonical: `/blog/${post.slug}` },
}
}Fișiere speciale de metadate
| Fișier | Generează |
|---|---|
app/sitemap.ts |
/sitemap.xml — lista tuturor paginilor pentru crawler |
app/robots.ts |
/robots.txt — ce poate indexa crawler-ul |
opengraph-image.tsx |
imagine OG generată cu ImageResponse |
icon.png, favicon.ico, apple-icon.png |
iconițe |
// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await getPosts()
return posts.map(p => ({ url: `https://site.ro/blog/${p.slug}`, lastModified: p.updatedAt }))
}SEO — ce contează cu adevărat
Tema completă — cum funcționează Google, SEO tehnic, cuvinte cheie, Analytics, investigații — e în SEO.
| Factor | Cum îl rezolvi |
|---|---|
| conținut randat pe server | Server Components — crawler-ul vede HTML complet |
| structură | HTML semantic, un <h1>, lang corect |
| titlu + descriere unice pe fiecare pagină | generateMetadata |
| viteză (Core Web Vitals) | next/image, next/font, puțin JS — vezi Cum desenează browserul |
| rich results (stele, prețuri) | JSON-LD |
| URL-uri curate și stabile | /blog/titlu-articol, nu ?id=123 |
Pe scurt
- Metadate = titlu, descriere, OG, canonical — în
<head>, invizibile în pagină. metadatastatic saugenerateMetadatadin date;sitemap.ts,robots.ts.- SEO = conținut pe server + HTML semantic + metadate unice + viteză.