Back to Glossary

Metadata API

واجهة Metadata في Next.js

Beginnernextjs1 min read
generateMetadatanext metadatanext seopage metadatameta tags
Official DocsSign in to save & take notes

Definition

Next.js App Router's built-in system for defining page title, description, and Open Graph tags via exports.

نظام Next.js App Router المدمج لتعريف عنوان الصفحة والوصف وعلامات Open Graph عبر التصديرات.

Why It Matters

All 404Fault SEO metadata is defined via the Metadata API. Glossary term pages have dynamic metadata generated per-term from Firestore. Layout files handle metadata for client pages.

كل بيانات SEO في 404Fault مُعرَّفة عبر Metadata API. صفحات مصطلحات القاموس لديها metadata ديناميكية مُولَّدة لكل مصطلح من Firestore. ملفات التخطيط تتعامل مع metadata لصفحات العميل.

Full Definition

In Next.js App Router, you export a `metadata` object or `generateMetadata()` async function from `page.tsx` or `layout.tsx`. This generates `<title>`, `<meta name='description'>`, Open Graph, and Twitter card tags. `generateMetadata` can fetch data server-side to make tags dynamic (e.g., per-term glossary pages). Client components (`'use client'`) cannot export metadata — use a parent `layout.tsx` instead.
في Next.js App Router، تُصدّر كائن `metadata` أو دالة `generateMetadata()` غير متزامنة من `page.tsx` أو `layout.tsx`. يُولّد هذا علامات `<title>` و`<meta name='description'>` وOpen Graph وبطاقة Twitter. مكونات العميل لا يمكنها تصدير metadata — استخدم `layout.tsx` الوالد بدلاً من ذلك.

Example Usage

“export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> { const { slug } = await params; const term = await fetchTerm(slug); return { title: `${term.nameEn} — AI Glossary | 404fault`, description: term.shortDefinitionEn }; }”

“export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> { const { slug } = await params; const term = await fetchTerm(slug); return { title: `${term.nameEn} — AI Glossary | 404fault`, description: term.shortDefinitionEn }; }”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Metadata API:

1

Exporting metadata from a 'use client' component — it's silently ignored

2

Not providing twitter: card in addition to openGraph — Twitter uses its own tags

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Metadata API.

Explain:
1. What is Metadata API and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Exporting metadata from a 'use client' component — it's silently ignored, Not providing twitter: card in addition to openGraph — Twitter uses its own tags
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account