mintlify__docs/es/organize/pages.mdx

---
title: "Páginas"
description: "Configura la metadata de la página, los títulos y las propiedades de frontmatter."
keywords: ["etiquetas", "etiqueta", "frontmatter", "metadata", "diseño"]
---

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
---
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
---
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
---
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
---
title: "Título de página personalizado"
mode: "custom"
---
```

<Warning>
  Usar la propiedad `style` en páginas en modo personalizado puede provocar un desplazamiento de diseño al cargar la página. En su lugar, usa [Tailwind CSS o CSS personalizado](/es/customize/custom-scripts) para evitar este problema.
</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. 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
---
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
---
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
---
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>

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
---
"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
---
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
"metadata": {
  "timestamp": true
}
```

Anula la configuración global de la marca de tiempo en páginas individuales con el campo `timestamp` del frontmatter. Usa este campo para mostrar u ocultar selectivamente las marcas de tiempo en páginas específicas.

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

Cuando se establece en `true`, la marca de tiempo se muestra aunque la configuración global sea `false`. Cuando se establece en `false`, la marca de tiempo se oculta aunque la configuración global sea `true`.