<-/.<.>/.||./.Trellis Docs

Head Metadata

Last updated: 03/04/2026Edit this page

Trellis Docs automatically generates HTML <head> metadata from your frontmatter fields. This controls how pages appear in search engines and social media previews.

Title and description

The title and description frontmatter fields map directly to <title> and <meta name="description">:

---
title: Getting Started
description: Set up a new Trellis documentation project in minutes.
---

Generates:

<title>Getting Started | My Docs</title>
<meta name="description" content="Set up a new Trellis documentation project in minutes." />

The site name (configured in config/site.ts as title) is appended to the page title automatically.

Keywords

The keywords frontmatter array is used by the search index for relevance weighting but is not rendered as a <meta name="keywords"> tag, as modern search engines ignore it.

---
keywords: [setup, installation, quickstart]
---

Canonical URL

Trellis Docs generates a canonical URL for each page based on the url field in config/site.ts and the page's path:

<link rel="canonical" href="https://example.com/guides/docs/" />

Customizing metadata

To add custom meta tags (Open Graph, Twitter cards, etc.), edit the generateMetadata function in app/(docs)/[...slug]/page.tsx. The function receives the page's frontmatter and can return any Next.js metadata fields:

app/(docs)/[...slug]/page.tsx
export async function generateMetadata({ params }) {
  const doc = await getDocBySlug(params.slug)
  return {
    title: doc.meta.title,
    description: doc.meta.description,
    openGraph: {
      title: doc.meta.title,
      description: doc.meta.description,
      type: 'article',
    },
  }
}

See the Next.js Metadata docs for the full list of supported fields.

Was this page helpful?