Page-level settings
Page-level settings
Set titles, descriptions, slugs, layout, and visibility using frontmatter
Page-level settings
You can optionally use frontmatter to set each page’s title, full slug override, meta description, a URL to suggest edits to the page, and its OpenGraph image. You can also use frontmatter to disable certain page elements like the table of contents, on-page feedback, and page actions.
For advanced styling and functionality customizations beyond frontmatter options, see custom CSS and JavaScript.
Frontmatter must be added to the top of a .md or .mdx file, before the rest of the content. Use sets of three dashes to indicate the beginning and end of your frontmatter, as shown:
Frontmatter uses YAML syntax, but values are also processed as MDX. Some characters need quoting, while others need backslash escaping.
Sets the page’s <title> element. This appears in browser tabs, bookmarks, and search results.
The page title can be set in two ways:
The final title will include the site-wide suffix. For example:
Sets the title displayed in the sidebar navigation. This takes precedence over sidebar titles defined in docs.yml. Use this when you want a shorter navigation label while keeping a descriptive page title.
The sidebar title can be set in two ways:
sidebar-title is set):Renders as a subtitle on the page. If description is not set, subtitle is also used as the meta description tag and in llms.txt and llms-full.txt.
For example, scroll to the top of this page you’re visiting now and you’ll see the subtitle “Set titles, add meta descriptions, and more”.
Displays a “Last updated” timestamp in the page footer. Use this to show readers when the content was last modified. The value is displayed as-is, so you can use any date format you prefer.
This field is separate from the timestamps in your sitemap, which are managed automatically and used exclusively by search engines.
Want to automatically update the last-updated field when MDX files change? See Auto-update last updated dates to set up a GitHub Action workflow.
Overrides the full URL path for the page, starting from the root of your docs site. This takes precedence over any slug defined in docs.yml.
For example, if you set slug: email in frontmatter, the page will be available at /email regardless of its location in the navigation structure.
There are two ways to set a page’s URL slug:
slug in docs.yml, which is relative to the page’s location in the navigation:slug in frontmatter, which overrides everything and sets the absolute path from the root:The key difference is:
Set the meta description for a page. Like the page title, the meta description is important for SEO. It impacts the text that search engines display about your page in search results snippets. It can also influence search engine indexing and ranking. For more information, see Google’s guidelines for meta descriptions. The description is also used in llms.txt and llms-full.txt.
Provide the absolute link to the source .md or .mdx file in GitHub. Fern uses it to add an Edit this page link to the page, which users of your documentation can use to suggest corrections or additions. You can also configure this globally instead of page-by-page - see global configuration.
This URL works with both launch modes. With launch: github, it’s the primary link for the edit button. With launch: dashboard, it’s passed as a fallback so users can also navigate to the source on GitHub from the dashboard screen.
Configure the OpenGraph image metadata for a page using an absolute URL to an image hosted online. This image appears when your documentation links are shared on social media platforms, using the OpenGraph metadata protocol. For more information, see the web.dev explanation of OpenGraph.
Controls the conditional rendering of the table of contents feature on the right-side of the page. Set to true to disable this feature.
When the table of contents is hidden, Fern will center the contents of the page by default. To control the layout of the page, see the layout documentation.
Sets the maximum depth of the table of contents. For example, a value of 3 will only show <h1>, <h2>, and <h3> headings in the table of contents.
Controls the conditional rendering of the navigation links (previous, next) at the bottom of the page. Set to true to disable this feature.
This can be set globally in the global configuration.
Controls the conditional rendering of the on-page feedback form at the bottom of the page. Set to true to disable this feature.
This can be set globally in the global configuration.
Controls the conditional rendering of page action buttons (Copy Page, View as Markdown, Ask AI, ChatGPT, Claude, Claude Code, Cursor). Set to true to turn off page actions for an individual page.
Alternatively, configure page actions for your entire site in your docs.yml file.
Override the site-wide logo for a page. Specify different logos for light and dark modes using absolute URLs.
Currently, relative paths are not supported for this field.
Sets the page layout. Available options:
guide: The default documentation layout featuring a table of contents on the right side. Ideal for tutorials, how-to guides, and any content that benefits from easy navigation through sections.
overview: A wider layout (50% wider than guide) with a table of contents and navigation sidebar. Perfect for landing pages and section overviews that need more horizontal space while maintaining navigation.
reference: A full-width layout optimized for API or SDK reference. Always hides the table of contents so you can add another column, such as code examples. Navigation sidebar remains visible.
page: A distraction-free, full-screen layout that hides both the table of contents and navigation sidebar. Best for standalone content that benefits from focused reading experiences.
custom: A blank canvas layout that removes all default styling constraints. Hides both the table of contents and navigation sidebar, allowing complete control over the page layout.
Only the documented SEO fields are added to the HTML <head> as meta tags. Custom frontmatter fields won’t automatically appear in your page metadata. To add custom metadata, use custom JavaScript.
When set, the <title /> tag in the document head will use this value rather than the title property. This property changes the title that search engines see when crawling this page, and can be used to address Duplicate Title issues in your SEO report.
Overrides the canonical URL for this page. Must be a full URL including the protocol (i.e. https://buildwithfern.com/learn/docs/content/frontmatter)
Comma-separated string of keywords relevant to the page content (i.e. plants, garden, nursery). These keywords help search engines understand the page topic and contributes to search rankings. Use specific, relevant terms that users might search for when looking for the page’s content.
This field accepts only comma-separated strings, not bracketed arrays.
The name of your website as it should appear when your content is shared.
The title of your page as it should appear when your content is shared.
The description of your page as it should appear when your content is shared.
The URL of your page.
The URL or identifier of the image that will be displayed when your content is shared.
The width of the image in pixels.
The height of the image in pixels.
The locale of the page, typically in the format language_TERRITORY (e.g., en_US).
The URL or identifier of the logo image of your website that will be displayed when your content is shared.
The title of your page as it should appear in a tweet.
The description of your page as it should appear in a tweet.
The Twitter handle of the page creator or site.
The URL or identifier of the image that will be displayed in a tweet.
The name of your website as it should appear in a tweet.
The URL of your page.
The type of card to be used for sharing on Twitter. Options: summary, summary_large_image, app, player
If set to true, the page will not be indexed by search engines and will be excluded from llms.txt endpoints.
If set to true, a search engine will not follow any links present on the page.
Displays an availability badge on the page. When set in frontmatter, it overrides any availability defined in the navigation (docs.yml). Valid values are: stable, generally-available, in-development, pre-release, deprecated, or beta.
This is useful when you want to set availability for individual pages without modifying your docs.yml navigation configuration, or when you need to override the availability inherited from a parent section or folder.
For changelog pages only. Tags allow users to filter changelog entries by specific categories. Define tags as an array of strings in the frontmatter.