Head and SEO

Set page metadata with the Head component: title, description, Open Graph and Twitter cards, favicons, fonts, and JSON-LD. Multiple Head components in the tree merge; page-level tags override layout-level tags for duplicate keys. Examples below use the default app router. Set router: "pages" in veryfront.config.ts to switch to the pages router.

Prerequisites

At least one page in your project (see Pages and routing).

Basic metadata

import { Head } from "veryfront/head";

export default function AboutPage() {
  return (
    <>
      <Head>
        <title>About Us</title>
        <meta name="description" content="Learn about the team and mission." />
      </Head>
      <main>
        <h1>About Us</h1>
      </main>
    </>
  );
}

The Head component renders its children into the document’s <head>. When multiple Head components are present (e.g., in a layout and a page), they merge: page-level tags override layout-level tags for duplicate keys.

Open Graph

<Head>
  <title>My Article</title>
  <meta property="og:title" content="My Article" />
  <meta property="og:description" content="A great read." />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:type" content="article" />
  <meta name="twitter:card" content="summary_large_image" />
</Head>;

Favicon and icons

<Head>
  <link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</Head>;

Fonts

Load Google Fonts with the GoogleFonts component:

import { GoogleFonts } from "veryfront/fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <GoogleFonts
        fonts={[
          { name: "Inter", weights: [400, 500, 700] },
          { name: "Fira Code", weights: [400] },
        ]}
      />
      {children}
    </>
  );
}

Structured data (JSON-LD)

<Head>
  <script type="application/ld+json">
    {JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "My Article",
      "author": { "@type": "Person", "name": "Jane Doe" },
    })}
  </script>
</Head>;

Per-page metadata in layouts

Set defaults in the layout, override in pages:

// app/layout.tsx
import { Head } from "veryfront/head";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Head>
        <title>My App</title>
        <meta name="description" content="Default description" />
      </Head>
      {children}
    </>
  );
}

// app/about/page.tsx
import { Head } from "veryfront/head";

export default function About() {
  return (
    <>
      <Head>
        <title>About - My App</title>
        <meta name="description" content="About the team." />
      </Head>
      <h1>About</h1>
    </>
  );
}

The about page overrides both the title and description from the layout.

MDX frontmatter

MDX pages can set metadata via frontmatter:

---
title: "Blog Post Title"
description: "A brief summary of the post."
---

# {frontmatter.title}

Content here.

The framework automatically injects title and description from frontmatter into the <head>.

Verify it worked

Open the page in the browser and inspect the document <head>. Confirm:

<title> matches what you set.
The description, og:*, and twitter:* meta tags are present and have the expected values.
For social previews, use the Facebook sharing debugger and Twitter card validator once the site is deployed.

Getting Started

Concepts

Guides

API Reference

Prerequisites

Basic metadata

Open Graph

Favicon and icons

Fonts

Structured data (JSON-LD)

Per-page metadata in layouts

MDX frontmatter

Verify it worked

​Prerequisites

​Basic metadata

​Open Graph

​Favicon and icons

​Fonts

​Structured data (JSON-LD)

​Per-page metadata in layouts

​MDX frontmatter

​Verify it worked

Prerequisites

Basic metadata

Open Graph

Favicon and icons

Fonts

Structured data (JSON-LD)

Per-page metadata in layouts

MDX frontmatter

Verify it worked