Metadatos de página
Configure títulos de página, descripciones, iconos, anulaciones de barra lateral y metadatos SEO con el bloque YAML frontmatter en la parte superior 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 cuando se comparte 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
Requeridos
| Campo | Tipo | Descripción |
|---|---|---|
title | string | Título de la página mostrado en la navegación y en la pestaña del navegador |
Recomendados
| Campo | Tipo | Descripción |
|---|---|---|
description | string | Breve resumen para SEO y resultados de búsqueda (50-160 caracteres) |
Opcionales
| Campo | Tipo | Predeterminado | Descripción |
|---|---|---|---|
icon | string | - | Icono de Font Awesome mostrado junto al título de la página en la navegación de la barra lateral |
sidebarTitle | string | title | Título más corto para la navegación de la barra lateral |
mode | string | - | Establecer en "wide" para diseño de ancho completo |
hideFooter | boolean | false | Ocultar el pie de página social en esta página |
rss | boolean | false | Habilitar la generación de feed RSS desde los componentes Update en esta página |
private | boolean | false | Requerir 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 | Eximir esta página de la protección por contraseña (se usa cuando todo el sitio está protegido mediante auth.password.enabled). Tiene prioridad sobre private: true si ambos están establecidos. |
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 amplio
---
title: API Reference
description: Complete API documentation
mode: wide
---El modo wide elimina la tabla de contenidos y expande el contenido al ancho completo. Ú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.
Mejores 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 de menos de 60 caracteres. Pon 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 vistas previas 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 |
|---|---|
| Primeros pasos | 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 al compilar. Errores comunes:
Error: Page "api/auth.mdx" is missing required field: title
Solución: Agrega el campo title a tu frontmatter.
Error: Invalid frontmatter in "guide.mdx": unexpected token
Solución: Verifica:
- Comillas faltantes alrededor de strings con caracteres especiales
- Sangría incorrecta
- Dos puntos faltantes después de las claves