mintlify__docs/es/organize/pages.mdx

---
title: "Páginas"
description: "Configura metadatos, títulos, descripciones, iconos y modos de diseño de página usando propiedades YAML de frontmatter al inicio de tu documentación MDX."
keywords: ["etiquetas", "etiqueta", "frontmatter", "metadata", "diseño"]
---

Cada página es un archivo Markdown. Puedes usar tipos de archivo `.mdx` o `.md` para tus páginas. Recomendamos MDX, que combina Markdown con componentes de React para crear documentación enriquecida e interactiva. El Markdown plano (`.md`) puede agilizar la migración desde otras plataformas, pero cambiar a MDX habilita más 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 controlan 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">
  El título de tu página que aparece en la navegación y en las pestañas del navegador.

  Si se omite, Mintlify genera un título a partir de la ruta. El último segmento de la ruta se convierte en el título, con los guiones y guiones bajos reemplazados por espacios y la primera letra en mayúscula. Por ejemplo, `guides/getting-started.md` se convierte en **Primeros pasos**.
</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)
  * nombre del [icono de Tabler](https://tabler.io/icons)
  * URL de un icono alojado externamente
  * Ruta a un archivo de icono en tu proyecto
</ResponseField>

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

  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="hidden" type="boolean">
  Establécelo en `true` para eliminar la página de la navegación de la barra lateral. Los usuarios aún pueden acceder a la página mediante su URL, pero los motores de búsqueda no la indexan. Para hacer visible una página de nuevo, elimina este campo por completo. **No** lo establezcas en `false` ya que produce un comportamiento indefinido. Consulta [Páginas ocultas](/es/organize/hidden-pages) para más detalles.
</ResponseField>

<ResponseField name="noindex" type="boolean">
  Establécelo en `true` para evitar que los motores de búsqueda indexen la página. Consulta [Deshabilitar la indexación](/es/optimize/seo#disable-indexing) para más detalles. Todas las páginas con `hidden: true` en su frontmatter reciben `noindex: true` automáticamente.
</ResponseField>

<ResponseField name="boost" type="number">
  Multiplica la clasificación de la página en la búsqueda integrada por este factor. Usa valores mayores que `1` para priorizar la página y valores entre `0` y `1` para despriorizarla. Consulta [Boost de búsqueda](/es/optimize/search-boost) para más detalles.
</ResponseField>

<ResponseField name="deprecated" type="boolean">
  Establécelo en `true` para mostrar una etiqueta "en desuso" junto al título de la página. Úsalo para marcar contenido desactualizado o funciones heredadas sin dejar de mantener la página accesible.
</ResponseField>

<ResponseField name="hideFooterPagination" type="boolean">
  Establécelo en `true` para ocultar los enlaces de navegación de página anterior/siguiente en la parte inferior de la página. Úsalo para páginas independientes como páginas de destino o páginas de referencia donde la navegación secuencial no aplica.
</ResponseField>

<ResponseField name="hideApiMarker" type="boolean">
  Establécelo en `true` para ocultar la insignia del método HTTP (como GET o POST) junto al título de la página en la barra lateral. Úsalo para páginas de API donde desees una apariencia más limpia en la barra lateral.
</ResponseField>

<ResponseField name="groups" type="string[]">
  Restringe la página a usuarios en grupos específicos. Los usuarios deben pertenecer a al menos uno de los grupos listados para acceder a la página. Primero debes configurar la [autenticación](/es/deploy/authentication-setup). Consulta [Controlar el acceso con grupos](/es/deploy/authentication-setup#control-access-with-groups) para más información.
</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
---
title: "Acerca del frontmatter"
description: "El frontmatter son los metadatos que controlan 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 el diseño de tu página con el ajuste `mode`.

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

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

```yaml
---
title: "Título de página predeterminado"
---
```

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

El modo ancho oculta la tabla de contenidos. Utiliza este modo para páginas sin encabezados o si quieres contar con espacio horizontal adicional. El modo ancho está disponible en todos los temas.

```yaml
---
title: "Título de página amplia"
mode: "wide"
---
```

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

El modo personalizado ofrece un diseño minimalista y elimina todos los elementos excepto la barra de navegación superior. La barra lateral, la tabla de contenidos y el pie de página están ocultos. Considera el modo personalizado como un lienzo en blanco para crear páginas de destino o diseños únicos con una navegación mínima. Todos los temas son compatibles con el modo personalizado.

```yaml
---
title: "Título de página personalizado"
mode: "custom"
---
```

<Warning>
  La propiedad `style` puede provocar un cambio en el diseño al cargar la página. Para evitar este problema, utiliza preferentemente [Tailwind CSS o CSS personalizado](/es/customize/custom-scripts).
</Warning>


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

El modo Frame ofrece un diseño similar al modo personalizado, pero mantiene la barra lateral de navegación. Usa este modo para incluir HTML y componentes personalizados mientras preservas la experiencia de navegación predeterminada. Los temas Aspen, Almond, Luma y Sequoia son compatibles con el modo Frame.

```yaml
---
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. Usa el modo Center para las páginas de cambios u otras páginas donde quieras centrar la atención en el contenido. Los temas Mint, Linden, Willow y Maple son compatibles con el modo Center.

```yaml
---
title: "Centrar título de página"
mode: "center"
---
```

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

Para crear un área de pruebas de la API interactiva, añade una especificación de la API a tu frontmatter configurando `api` o `openapi`.

```yaml
---
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
---
title: "Paquete npm"
url: "https://www.npmjs.com/package/mint"
---
```

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

Mintlify genera automáticamente la mayoría de las metaetiquetas de SEO. Puedes establecer manualmente las metaetiquetas de SEO para personalizar tu estrategia de SEO, la difusión en redes sociales y la compatibilidad con los navegadores.

<Note>
  Envuelve siempre entre comillas las metaetiquetas que incluyan dos puntos.
</Note>

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

Ayuda a los usuarios a descubrir una página específica en los resultados de búsqueda añadiendo `keywords` en tu metadata. Estas palabras clave no aparecen en el contenido de la página. Si los usuarios buscan esas palabras clave, la página aparecerá en los resultados de búsqueda.

```yaml
---
keywords: ['configuración', 'configuración inicial', 'primeros pasos']
---
```

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

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

```json docs.json
"metadata": {
  "timestamp": true
}
```

Para anular la configuración global de la marca de tiempo en una página individual, usa el campo `timestamp` del frontmatter. Usa este campo para mostrar u ocultar las marcas de tiempo en páginas específicas.

```yaml
---
title: "Título de la página"
timestamp: false
---
```

Si estableces `timestamp: true`, la página siempre muestra la marca de tiempo aunque la configuración global sea `false`. Si estableces `timestamp: false`, la página oculta la marca de tiempo aunque la configuración global sea `true`.