SEO & Meta

StateMesh manages document metadata per route. The router automatically updates <title>, <meta>, and Open Graph tags on every navigation.

Static Meta

{
  path: "/",
  component: () => import("./Home"),
  meta: {
    title: "Home | My Store",
    description: "Welcome to My Store",
    ogImage: "/images/home-og.png"
  }
}

Dynamic Meta

Meta can be a function that receives loader data:

{
  path: "/products/:id",
  loader: async ({ params, mesh }) => mesh.resource("product.detail").fetch({ id: params.id }),
  meta: ({ loaderData }) => ({
    title: `${loaderData.name} | My Store`,
    description: loaderData.description,
    ogImage: loaderData.image
  })
}

updateDocumentMeta

Call manually for custom meta updates:

import { updateDocumentMeta } from "statemesh-core/router";

updateDocumentMeta({
  title: "Custom Page",
  description: "Custom description",
  canonical: "https://example.com/page",
  og: {
    title: "Custom OG Title",
    image: "https://example.com/og.png"
  }
});

RouteMeta Type

Field	Type	Description
title	string	Document title
description	string	<meta name="description">
canonical	string	<link rel="canonical">
og	object	Open Graph tags (title, description, image, type)

Important Notes

TIP

The router automatically updates meta on every navigation. You don't need to call updateDocumentMeta manually when using route-level meta.

Next Steps

• Advanced — Keep-alive, prefetch, shared elements
• Routes — Route definitions