> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Páginas

> Configura la metadata de la página, los títulos y las propiedades de frontmatter.

Cada página es un archivo Markdown. Tanto `.mdx` como `.md` son tipos de archivo compatibles. Recomendamos usar MDX, que combina Markdown con componentes de React para crear documentación enriquecida e interactiva. El Markdown plano (`.md`) se admite para facilitar la migración desde otras plataformas, pero se debería actualizar a MDX para obtener todas las funcionalidades.

<div id="page-metadata">
  ## Metadatos de la página
</div>

Cada página comienza con frontmatter, los metadatos YAML delimitados por `---` al inicio de un archivo. Estos metadatos definen cómo aparece y se comporta tu página.

Usa el frontmatter para controlar:

* Títulos y descripciones de la página
* Títulos de la barra lateral, iconos y etiquetas
* Diseños de página
* Metatags de SEO
* Metadatos personalizados

<ResponseField name="title" type="string" required>
  El título de tu página que aparece en la navegación y en las pestañas del navegador.
</ResponseField>

<ResponseField name="description" type="string">
  Una breve descripción de lo que cubre esta página. Aparece debajo del título y mejora el SEO.
</ResponseField>

<ResponseField name="sidebarTitle" type="string">
  Un título corto que se muestra en la navegación de la barra lateral.
</ResponseField>

<ResponseField name="icon" type="string">
  El icono que se mostrará.

  Opciones:

  * nombre del [icono de Font Awesome](https://fontawesome.com/icons)
  * nombre del [icono de Lucide](https://lucide.dev/icons)
  * URL de un icono alojado externamente
  * Ruta a un archivo de icono en tu proyecto
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo del icono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con iconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="tag" type="string">
  Una etiqueta que aparece junto al título de tu página en la barra lateral.
</ResponseField>

<ResponseField name="<custom>" type="string">
  Cualquier frontmatter YAML válido. Por ejemplo, `product: "API"` o `version: "1.0.0"`.
</ResponseField>

```yaml Example YAML frontmatter wrap theme={null}
---
title: "Acerca del frontmatter"
description: "El frontmatter es el metadata que controla cómo aparece y se comporta tu página"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---
```

<div id="page-mode">
  ## Modo de página
</div>

Controla cómo se muestra tu página con el ajuste `mode`.

<div id="default">
  ### Predeterminado
</div>

Si no se define ningún modo, se utiliza un diseño estándar con una barra lateral de navegación y una tabla de contenidos.

```yaml theme={null}
---
title: "Título de página predeterminado"
---
```

<div id="wide">
  ### Ancho
</div>

El modo ancho oculta la tabla de contenidos. Es útil para páginas que no tienen encabezados o si prefieres aprovechar el espacio horizontal adicional. El modo ancho está disponible en todos los temas.

```yaml theme={null}
---
title: "Título de página amplia"
mode: "wide"
---
```

<div id="custom">
  ### Personalizado
</div>

El modo personalizado ofrece un diseño minimalista que elimina todos los elementos excepto la barra superior. Es un lienzo en blanco para crear páginas de destino u otros diseños únicos en los que quieras que haya elementos de navigation mínimos. El modo personalizado está disponible para todos los temas.

```yaml theme={null}
---
title: "Título de página personalizado"
mode: "custom"
---
```

<div id="frame">
  ### Frame
</div>

El modo Frame ofrece un diseño similar al modo personalizado, pero mantiene la barra lateral de navegación. Este modo de página permite usar HTML y componentes personalizados sin perder la experiencia de navegación predeterminada. El modo Frame solo está disponible en los temas Aspen y Almond.

```yaml theme={null}
---
title: "Título de página Frame"
mode: "frame"
---
```

<div id="center">
  ### Center
</div>

El modo Center elimina la barra lateral y la tabla de contenidos, centrando el contenido. Es útil para la página de cambios u otras páginas donde quieras destacar el contenido. El modo Center está disponible para los temas Mint y Linden.

```yaml theme={null}
---
title: "Centrar título de página"
mode: "center"
---
```

<div id="api-pages">
  ## Páginas de la API
</div>

Crea áreas de pruebas de la API interactivas añadiendo una especificación de la API a tu frontmatter, `api` o `openapi`.

```yaml theme={null}
---
openapi: "GET /endpoint"
---
```

Obtén más información sobre cómo crear [documentación de API](/es/api-playground/overview).

<div id="external-links">
  ## Enlaces externos
</div>

Enlaza a sitios externos directamente desde tu navigation con la metadata `url`.

```yaml theme={null}
---
title: "Paquete npm"
url: "https://www.npmjs.com/package/mint"
---
```

<div id="search-engine-optimization">
  ## Optimización para motores de búsqueda (SEO)
</div>

La mayoría de las metaetiquetas de SEO se generan automáticamente. Puedes establecer manualmente las metaetiquetas de SEO para mejorar el SEO de tu sitio, su difusión en redes sociales y la compatibilidad con los navegadores.

<Note>
  Las metaetiquetas con dos puntos deben ir entre comillas.
</Note>

```yaml theme={null}
---
"twitter:image": "/images/social-preview.jpg"
---
```

Consulta [SEO](/es/optimize/seo) para conocer todas las opciones de metadata de SEO.

<div id="internal-search-keywords">
  ## Palabras clave para la búsqueda interna
</div>

Mejora la capacidad de descubrimiento de una página específica en la búsqueda integrada añadiendo `keywords` en tu metadata. Estas palabras clave no aparecerán como parte del contenido de la página ni en los resultados de búsqueda, pero los usuarios que las busquen verán la página como resultado.

```yaml theme={null}
---
keywords: ['configuración', 'configuración inicial', 'primeros pasos']
---
```

<div id="last-modified-timestamp">
  ## Marca de tiempo de la última modificación
</div>

Añade una marca de tiempo «Última modificación el \[fecha]» a todas las páginas activando `metadata.timestamp` en tu [configuración global](/es/organize/settings#metadata).

```json docs.json theme={null}
"metadata": {
  "timestamp": true
}
```