mintlify__docs/organize/pages.mdx

---
title: "Pages"
description: "Configure page metadata, titles, and frontmatter properties."
keywords: ["tags", "tag", "frontmatter", "metadata", "layout"]
---

Each page is a Markdown file. Both `.mdx` and `.md` file types are supported. We recommend using MDX, which combines Markdown with React components to create rich, interactive documentation. Plain Markdown (`.md`) is supported for easier migration from other platforms, but should be updated to MDX for full functionality.

## Page metadata

Every page starts with frontmatter, the YAML metadata enclosed by `---` at the beginning of a file. This metadata defines how your page appears and behaves.

Use frontmatter to control:

- Page titles and descriptions
- Sidebar titles, icons, and tags
- Page layouts
- SEO meta tags
- Custom metadata

<ResponseField name="title" type="string" required>
  The title of your page that appears in navigation and browser tabs.
</ResponseField>

<ResponseField name="description" type="string">
  A brief description of what this page covers. Appears under the title and improves SEO.
</ResponseField>

<ResponseField name="sidebarTitle" type="string">
  A short title that displays in the sidebar navigation.
</ResponseField>

<ResponseField name="icon" type="string">
  The icon to display.
  
  Options:
  - [Font Awesome icon](https://fontawesome.com/icons) name
  - [Lucide icon](https://lucide.dev/icons) name
  - URL to an externally hosted icon
  - Path to an icon file in your project
</ResponseField>

<ResponseField name="iconType" type="string">
  The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons. 
  
  Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="tag" type="string">
  A tag that appears next to your page title in the sidebar.
</ResponseField>

<ResponseField name="<custom>" type="string">
  Any valid YAML frontmatter. For example, `product: "API"` or `version: "1.0.0"`.
</ResponseField>

```yaml Example YAML frontmatter wrap
---
title: "About frontmatter"
description: "Frontmatter is the metadata that controls how your page appears and behaves"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---
```

## Page mode

Control how your page displays with the `mode` setting.

### Default

If no mode is defined, defaults to a standard layout with a sidebar navigation and table of contents.

```yaml
---
title: "Default page title"
---
```

### Wide

Wide mode hides the table of contents. This is useful for pages that do not have any headings or if you prefer to use the extra horizontal space. Wide mode is available for all themes.

```yaml
---
title: "Wide page title"
mode: "wide"
---
```

### Custom

Custom mode provides a minimalist layout that removes all elements except for the top navbar. Custom mode is a blank canvas to create landing pages or any other unique layouts that you want to have minimal navigation elements for. Custom mode is available for all themes.

```yaml
---
title: "Custom page title"
mode: "custom"
---
```

<Warning>
  Using the `style` property on custom mode pages can cause a layout shift on page load. Use [Tailwind CSS or custom CSS](/customize/custom-scripts) instead to avoid this issue.
</Warning>

### Frame

Frame mode provides a layout similar to custom mode, but preserves the sidebar navigation. This page mode allows for custom HTML and components while maintaining the default navigation experience. Frame mode is only available for Aspen and Almond themes.

```yaml
---
title: "Frame page title"
mode: "frame"
---
```

### Center

Center mode removes the sidebar and table of contents, centering the content. This is useful for changelogs or other pages where you want to emphasize the content. Center mode is available for Mint and Linden themes.

```yaml
---
title: "Center page title"
mode: "center"
---
```

## API pages

Create interactive API playgrounds by adding an API specification to your frontmatter, `api` or `openapi`.

```yaml
---
openapi: "GET /endpoint"
---
```

Learn more about building [API documentation](/api-playground/overview).

## External links

Link to external sites directly from your navigation with the `url` metadata.

```yaml
---
title: "npm Package"
url: "https://www.npmjs.com/package/mint"
---
```

## Search engine optimization

Most SEO meta tags are automatically generated. You can set SEO meta tags manually to improve your site's SEO, social sharing, and browser compatibility.

<Note>
  Meta tags with colons must be wrapped in quotes.
</Note>

```yaml
---
"twitter:image": "/images/social-preview.jpg"
---
```

See [SEO](/optimize/seo) for complete SEO metadata options.

## Internal search keywords

Enhance a specific page's discoverability in the built-in search by providing `keywords` in your metadata. These keywords won't appear as part of the page content or in search results, but users that search for them will be shown the page as a result.

```yaml
---
keywords: ['configuration', 'setup', 'getting started']
---
```

## Last modified timestamp

Add a "Last modified on [date]" timestamp to all pages by enabling `metadata.timestamp` in your [global settings](/organize/settings#metadata).

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

Override the global timestamp setting on individual pages with the `timestamp` frontmatter field. Use this field to selectively show or hide timestamps on specific pages.

```yaml
---
title: "Page title"
timestamp: false
---
```

When set to `true`, the timestamp displays even if the global setting is `false`. When set to `false`, the timestamp is hidden even if the global setting is `true`.