Frontmatter
Configura títulos de página, descripciones, iconos, anulaciones de barra lateral y metadatos SEO con el bloque YAML frontmatter al inicio de cada archivo MDX.
Cada archivo MDX comienza con un bloque YAML entre marcadores ---. Estos metadatos controlan el título de tu página, la apariencia en la barra lateral y cómo se ve la página al compartirla en redes sociales o en resultados de búsqueda.
Frontmatter básico
Cada página necesita al menos un título:
---
title: Getting Started
description: Learn the basics in 5 minutes
---Campos disponibles
Obligatorios
| Campo | Tipo | Descripción |
|---|---|---|
title | string | Título de la página que se muestra en la navegación y en la pestaña del navegador |
Recomendados
| Campo | Tipo | Descripción |
|---|---|---|
description | string | Resumen breve para SEO y resultados de búsqueda (50-160 caracteres) |
Opcionales
| Campo | Tipo | Predeterminado | Descripción |
|---|---|---|---|
icon | string | - | Icono de Font Awesome que se muestra junto al título de la página en la barra lateral |
sidebarTitle | string | title | Título más corto para la barra lateral |
mode | string | - | Establece "wide" para diseño de ancho completo |
hideFooter | boolean | false | Oculta el pie de página social en esta página |
rss | boolean | false | Activa la generación de feed RSS desde los componentes Update de esta página |
private | boolean | false | Requiere la contraseña del sitio para ver esta página. Establecer esto en cualquier página activa el modo de páginas específicas en el próximo build. |
public | boolean | false | Exime esta página de la protección con contraseña (se usa cuando todo el sitio está protegido mediante auth.password.enabled). Tiene prioridad sobre private: true si ambos están configurados. |
SEO y redes sociales
Controla cómo aparece la página en resultados de búsqueda y vistas previas en redes sociales. Establece estos campos como claves de nivel superior o dentro de un bloque anidado seo:. Ambas formas funcionan, y los valores por página anulan los valores predeterminados de seo.metatags en tu docs.json.
| Campo | Tipo | Predeterminado | 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, que anula 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 (p. ej., og:title, og:image, twitter:card) |
seo | object | - | Bloque anidado que contiene cualquiera de los anteriores más metaetiquetas personalizadas arbitrarias |
---
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 compatibles 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 ordenada.
Diseño amplio
---
title: API Reference
description: Complete API documentation
mode: wide
---El modo amplio elimina la tabla de contenidos y expande el contenido al ancho completo. Es útil para páginas de referencia de API o contenido con tablas anchas.
Ocultar pie de página
---
title: Custom Landing
description: A focused landing page experience
hideFooter: true
---Usa hideFooter para páginas de destino, páginas de registro de cambios 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:
- Pestañas del navegador
- Resultados de motores de búsqueda
- Barra lateral de navegación
- Compartidos en redes sociales
Mantén los títulos en menos 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 resultados de búsqueda y vistas previas en redes sociales. Apunta a 50-160 caracteres que:
- Resuman el contenido de la página
- Incluyan palabras clave relevantes
- Inviten a los usuarios 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 |
|---|---|
| Introducción | rocket |
| Autenticación | lock |
| Referencia de API | code |
| Configuración | gear |
| Facturación | credit-card |
Explora iconos en Font Awesome.
Validación
Jamdesk valida el frontmatter durante 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: Verifica:
- 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 el Validador YAML gratuito para identificar la línea y columna del error.