Az App Router beépített Metadata API-val rendelkezik SEO tagekhez (<title>, <meta>, Open Graph, stb.) — metaadatokat exportálsz egy layout.tsx vagy page.tsx fájlból, és a Next.js megjeleníti a helyes tageket.
Az App Router beépített Metadata API-val rendelkezik SEO tagekhez (<title>, <meta>, Open Graph, stb.) — metaadatokat exportálsz egy layout.tsx vagy page.tsx fájlból, és a Next.js megjeleníti a helyes tageket.
<head>// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
A Next.js beolvassa az exportált metadata objektumot és generálja a <title>, <meta name="description">, OG tageket, stb. — nincs szükség manuális <head> szerkesztésre.
Az olyan oldalaknál, ahol a title a betöltött tartalomtól függ (egy blogbejegyzés, egy termék), exportálj egy async generateMetadata függvényt:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Ez a szerveren fut és lehetővé teszi, hogy minden dinamikus oldal pontos, tartalomra jellemző metaadatokkal rendelkezzen — lényeges az SEO és a dinamikus tartalom közösségi megosztásához.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
A layout-ban definiált metaadatok összevonódnak a gyermek oldalak metaadataival (és felülírhatók azok által) — így egy helyen beállíthatod az oldalsávú alapértékeket és szükség szerinti oldal-specifikus értékeket. A template automatikusan hozzáfűzi az oldal nevét.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
A speciális fájlok automatikusan generálják a megfelelő metaadatokat/útvonalakat.
A jó metaadatok az SEO-t és a közösségi megosztás előnézeteit hajtják végre.
A Metadata API deklaratívvá és típusbiztossá teszi ezt — statikus metadata a fix oldalakhoz, async generateMetadata az adatokra épülő oldalakhoz, és layout-szintű alapértékek sablonokkal — helyettesítve a manuális <head> kezelést egy tiszta, szerver által renderelt rendszerrel.
IT interjúkérdések gyűjteménye részletes válaszokkal — Juniortól Seniorig.
Adományozás