Metadata & SEO

VitNode manages SEO metadata through TanStack Router's head option. Titles are formatted against your site's global name, emitting standard <title>, <meta name="description">, and Open Graph tags.

Quick start

1. In a Plugin Route (Recommended)

Plugins declare metadata using definePluginRoute. Metadata can read dynamically from loaderData:

import { definePluginRoute } from "@vitnode/core/routing"

export const route = definePluginRoute({
  load: async ({ params }) => await fetchArticle(params.slug),
  head: ({ loaderData }) => ({
    title: loaderData?.title,
    description: loaderData?.summary,
    robots: "index, follow",
  }),
})

The browser tab automatically displays Article Title - VitNode.

2. In an Application Route File

For host app routes, call pageHead inside createFileRoute:

import { createFileRoute } from "@tanstack/react-router"
import { pageHead } from "#/lib/page-head"

export const Route = createFileRoute("/_main/about")({
  head: () =>
    pageHead({
      title: "About Us",
      description: "Learn more about our team and vision.",
      robots: "index, follow",
    }),
  component: AboutPage,
})

pageHead is created from createRouteHead(metadata) in src/lib/page-head.ts, formatting "<page> - <site>" consistently across all pages.

Open Graph & Social Sharing

Add Open Graph card attributes for rich social previews on Twitter, Facebook, and Discord:

head: () =>
  pageHead({
    title: "About Us",
    description: "Building the modern community platform.",
    openGraph: {
      type: "website",
      image: "https://vitnode.com/og-image.png",
    },
  }),

pageHead Options Reference

Learn More