Metadatos, SEO y el encabezado del documento
Configure títulos y descripciones de página, etiquetas Open Graph y favicons mediante la API de Metadata de Next.js 15 para lograr un SEO sólido y mejorar la compartición en redes sociales.
Metadatos, SEO y el encabezado del documento es una lección gratuita de Next.js 15 Fullstack Web Apps en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Preguntas frecuentes
¿La lección «Metadatos, SEO y el encabezado del documento» es gratis?
Sí — el texto completo de «Metadatos, SEO y el encabezado del documento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.
¿Qué aprenderé en «Metadatos, SEO y el encabezado del documento»?
Configure títulos y descripciones de página, etiquetas Open Graph y favicons mediante la API de Metadata de Next.js 15 para lograr un SEO sólido y mejorar la compartición en redes sociales. Practicas Next.js 15 Fullstack Web Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Next.js 15 Fullstack Web Apps?
No se requiere experiencia previa. Next.js 15 Fullstack Web Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Metadatos, SEO y el encabezado del documento»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack Web Apps?
Sí. Cada lección de Next.js 15 Fullstack Web Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a Next.js 15
- Configuración del proyecto
- Fundamentos de páginas, layouts y enrutamiento
- Metadatos, SEO y el encabezado del documento