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; for single-valued tags (title, description, canonical, og:title, robots, …) a page-level tag overrides the layout-level tag with the same key, while repeatable tags (og:image, <link rel="preload">, icons, …) accumulate. 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:

Merge behavior	Tags
Single-valued (a page’s tag overrides the same tag from a layout)	`<title>`, `<meta name="description">`, `<link rel="canonical">`, `og:title`, `robots`, `viewport`, and the other one-per-document tags
Repeatable (tags accumulate instead of overriding)	`og:image` (and its `og:image:*` sub-tags), `og:video`, `og:audio`, `article:tag`, `article:author`, and `<link>` tags with a repeatable `rel`: `stylesheet`, `preload`, `modulepreload`, `prefetch`, `preconnect`, `dns-prefetch`, `icon`, `apple-touch-icon`, `alternate`

So you can define defaults in a layout and override the single-valued ones per page. Children may be grouped in a fragment (<>…</>) or produced with .map(); both are treated the same as direct children.

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