---
title: Metadatos de página
description: Configura títulos, descripciones, iconos, anulaciones de barra lateral y metadatos SEO con el bloque YAML frontmatter 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:

```yaml
---
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](/es/components/update) en esta página |
| `private` | boolean | `false` | Requerir la [contraseña del sitio](/es/setup/password-protection) 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

```yaml
---
title: Authentication
description: Secure your API with OAuth 2.0 and API keys
icon: lock
---
```

### Título largo con anulación de barra lateral

```yaml
---
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

```yaml
---
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

```yaml
---
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

<AccordionGroup>
  <Accordion title="Escribe títulos atractivos" icon="heading" defaultOpen>
    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.

    ```yaml
    # Good - clear and keyword-rich
    title: Deploy to Production

    # Avoid - vague or too long
    title: How to Deploy Your Application to Production Servers
    ```
  </Accordion>

  <Accordion title="Elabora descripciones útiles" icon="align-left">
    Las 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

    ```yaml
    # Good - actionable and specific
    description: Deploy your docs to production in under 2 minutes with zero configuration

    # Avoid - generic or missing
    description: Documentation page
    ```
  </Accordion>

  <Accordion title="Usa iconos coherentes" icon="icons">
    Los 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](https://fontawesome.com/icons).
  </Accordion>
</AccordionGroup>

## Validación

Jamdesk valida el frontmatter al compilar. Errores comunes:

<Accordion title="Campos requeridos faltantes">
```text
Error: Page "api/auth.mdx" is missing required field: title
```

**Solución:** Agrega el campo `title` a tu frontmatter.
</Accordion>

<Accordion title="Sintaxis YAML inválida">
```text
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
</Accordion>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Optimización SEO" icon="magnifying-glass-chart" href="/es/content/seo">
    Optimiza tu documentación para los motores de búsqueda
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende los fundamentos de MDX
  </Card>
</Columns>