Metadata & SEO

Pages and layouts can export a metadata object. The framework turns it into <title>, Open Graph, Twitter Card, and other meta tags.

Static metadata

app/about/page.tsx
export const metadata = {
  title: "About",
  description: "Learn more about Acme Co.",
  openGraph: {
    title: "About Acme",
    description: "Our story, our team, our mission.",
    images: ["/og/about.jpg"],
  },
};

export default function AboutPage() {
  return <h1>About</h1>;
}

Dynamic metadata

For pages that need to set metadata based on data, export an async generateMetadata function.

app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.cover] },
  };
}

Title templates

Set a title.template in the root layout's metadata to prefix every page title.

app/layout.tsx
export const metadata = {
  title: {
    template: "%s · Acme",
    default: "Acme",
  },
};

The Head component

For custom tags that aren't covered by metadata, use the Head, Title, Meta, and Style components from swift-rust.