Frontmatter
Configura títulos, descripciones, iconos, anulaciones de la barra lateral y metadatos SEO con el bloque frontmatter YAML al inicio de cada archivo MDX.
Todo archivo MDX comienza con un bloque YAML delimitado por marcadores ---. Estos metadatos controlan el título de tu página, la apariencia de la barra lateral y el aspecto de la página al compartirla en redes sociales o en los resultados de búsqueda.
Frontmatter básico
Toda página necesita al menos un título:
---
title: Getting Started
description: Learn the basics in 5 minutes
---
Campos disponibles
Obligatorio
| Campo | Tipo | Descripción |
|---|---|---|
title | string | Título de la página mostrado en la navegación y en la pestaña del navegador |
Recomendado
| Campo | Tipo | Descripción |
|---|---|---|
description | string | Resumen breve para SEO y resultados de búsqueda (50-160 caracteres) |
Opcional
| Campo | Tipo | Por defecto | Descripción |
|---|---|---|---|
icon | string | - | Icono de Font Awesome mostrado junto al título de la página en la barra lateral de navegación |
sidebarTitle | string | title | Título más corto para la barra lateral de navegación |
mode | string | - | Configúralo en "wide" para un diseño de ancho completo |
hideFooter | boolean | false | Oculta el pie de página social en esta página |
rss | boolean | false | Habilita la generación de un feed RSS a partir de los componentes Update en esta página |
search | boolean | true | Configúralo en false para excluir la página de la búsqueda del sitio, las respuestas del chat de IA y el MCP. Permanece en tu barra lateral, tu sitemap y tu llms.txt. Consulta Mantener una página fuera de la búsqueda únicamente |
private | boolean | false | Requiere la contraseña del sitio para ver esta página. Activar esto en cualquier página activa el modo de páginas específicas en el siguiente build. |
public | boolean | false | Exime a esta página de la protección por contraseña o de la autenticación JWT cuando todo el sitio está restringido. Prevalece sobre private: true si ambos están definidos. |
groups | string[] | - | Con la autenticación JWT activada, solo los visitantes cuyo token incluya al menos uno de estos grupos pueden abrir la página; el resto recibe un 404 y no la ve en la navegación. Hasta 32 grupos por página. Se ignora en el modo de contraseña. Consulta Acceso basado en grupos. |
lastUpdatedDate | string | - | Reemplaza la fecha «Última actualización el» de esta página en lugar de usar la fecha de su último commit de Git. Pon el valor entre comillas: "2026-09-01". La línea del pie de página necesita metadata.timestamp en docs.json; tu sitemap y tus datos estructurados usan la fecha en cualquier caso. Consulta Fecha de última actualización |
Fecha de última actualización
Con metadata.timestamp habilitado en docs.json, cada página muestra la fecha del último commit que modificó su archivo. lastUpdatedDate reemplaza esa fecha en una página concreta:
---
title: Authentication
lastUpdatedDate: "2026-09-01"
---
Úsalo cuando hayas revisado una página y quieras indicarlo, o cuando un commit de formato cambió la fecha sin modificar nada que un lector notaría.
Pon el valor entre comillas. Un 2026-09-01 sin comillas se interpreta como un timestamp en lugar de una fecha y puede mostrar un día equivocado. Un valor que no es una fecha se ignora y en su lugar se muestra la fecha del commit, de modo que un error tipográfico nunca deja la línea vacía.
La línea del pie de página solo aparece con metadata.timestamp habilitado, pero lastUpdatedDate no es solo un ajuste del pie de página: el <lastmod> de tu sitemap y el dateModified de los datos estructurados de la página lo usan, hayas activado el pie de página o no. Configúralo cuando la fecha sea lo que quieres indicar, no solo cuando quieras que se muestre.
Esta anulación también establece dateModified en los datos estructurados de la página, de modo que los motores de búsqueda y los asistentes de IA vean la misma fecha que tus lectores.
SEO y redes sociales
Controla cómo aparece la página en los resultados de búsqueda y en las vistas previas sociales. Defínelos como claves planas de nivel superior o dentro de un bloque anidado seo:. Ambas opciones funcionan, y los valores de cada página tienen prioridad sobre los valores por defecto de seo.metatags en tu docs.json.
| Campo | Tipo | Por defecto | Descripción |
|---|---|---|---|
keywords | string[] | - | Palabras clave de búsqueda, emitidas como una etiqueta <meta name="keywords"> |
canonical | string | auto | URL canónica de esta página, sustituyendo la generada automáticamente |
noindex | boolean | false | Excluye esta página de los motores de búsqueda y del sitemap |
og:* / twitter:* | string | - | Etiquetas de vista previa social de Open Graph y Twitter/X (por ejemplo, og:title, og:image, twitter:card) |
seo | object | - | Bloque anidado que agrupa cualquiera de los anteriores más etiquetas meta personalizadas |
---
title: API Reference
description: REST endpoints and authentication
"og:image": /images/api-card.png
"twitter:card": summary_large_image
canonical: https://docs.acme.com/api-reference
---
Consulta Optimización SEO para ver la lista completa de etiquetas admitidas y ejemplos.
Después de un build, pega la URL de la página en la herramienta gratuita OpenGraph Preview para ver cómo se renderizan estas etiquetas en X, Facebook, LinkedIn, Slack, Discord y más.
Ejemplos
Página de documentación estándar
---
title: Authentication
description: Secure your API with OAuth 2.0 and API keys
icon: lock
---
Título largo con anulación de barra lateral
---
title: Configuring Single Sign-On with SAML 2.0
sidebarTitle: SSO Setup
description: Set up enterprise SSO for your organization
---
El título completo aparece en la página, mientras que el sidebarTitle, más corto, mantiene la navegación limpia.
Diseño ancho
---
title: API Reference
description: Complete API documentation
mode: wide
---
El modo ancho elimina la tabla de contenidos y expande el contenido a todo el ancho. Útil para páginas de referencia de API o contenido con tablas anchas.
Ocultar el pie de página
---
title: Custom Landing
description: A focused landing page experience
hideFooter: true
---
Usa hideFooter en páginas de aterrizaje, páginas de changelog, o cualquier página donde quieras una sección inferior más limpia, sin enlaces sociales.
Buenas prácticas de SEO
Tu título aparece en:
- Las pestañas del navegador
- Los resultados de los motores de búsqueda
- La barra lateral de navegación
- Las publicaciones en redes sociales
Mantén los títulos por debajo de 60 caracteres. Coloca las palabras clave importantes al principio.
# Good - clear and keyword-rich
title: Deploy to Production
# Avoid - vague or too long
title: How to Deploy Your Application to Production ServersLas descripciones aparecen en los resultados de búsqueda y en las vistas previas sociales. Apunta a 50-160 caracteres que:
- Resuman el contenido de la página
- Incluyan palabras clave relevantes
- Inviten a hacer clic
# Good - actionable and specific
description: Deploy your docs to production in under 2 minutes with zero configuration
# Avoid - generic or missing
description: Documentation pageLos iconos ayudan a los usuarios a explorar la navegación rápidamente. Usa el mismo icono para páginas relacionadas:
| Tema | Icono sugerido |
|---|---|
| Primeros pasos | rocket |
| Autenticación | lock |
| Referencia de API | code |
| Configuración | gear |
| Facturación | credit-card |
Explora los iconos en Font Awesome.
Validación
Jamdesk valida el frontmatter al hacer el build. Errores comunes:
Error: Page "api/auth.mdx" is missing required field: titleSolución: Agrega el campo title a tu frontmatter.
Error: Invalid frontmatter in "guide.mdx": unexpected tokenSolución: Revisa lo siguiente:
- Comillas faltantes alrededor de cadenas con caracteres especiales
- Indentación incorrecta
- Dos puntos faltantes después de las claves
Pega el bloque entre los marcadores --- en la herramienta gratuita YAML Validator para localizar la línea y la columna del error.
