Mreact Docs

Reference

Metadata API

Metadata controls <head> output and selected response headers for pages and metadata routes. Prefer structured metadata fields before falling back to arbitrary head descriptors.

When to use this page

Use this page when adding document titles, descriptions, canonical links, Open Graph previews, icons, robots policy, CSP, or security headers.

Static metadata

import type { RouteMetadata } from "@reckona/mreact-router";

export const metadata: RouteMetadata = {
  title: "Pricing",
  description: "Plans for Mreact applications.",
  alternates: {
    canonical: "https://example.com/pricing",
  },
  openGraph: {
    title: "Pricing",
    image: "https://example.com/og/pricing.png",
  },
};

Dynamic metadata

generateMetadata() receives params, request, and loader data.

import type { GenerateMetadataContext, RouteMetadata } from "@reckona/mreact-router";

export function generateMetadata(
  context: GenerateMetadataContext<{ title: string }, { id: string }>,
): RouteMetadata {
  return {
    title: context.data.title,
    csp: {
      directives: {
        "default-src": ["'self'"],
        "script-src": ["'self'"],
      },
    },
    security: {
      contentTypeOptions: "nosniff",
      frameOptions: "DENY",
      referrerPolicy: "strict-origin-when-cross-origin",
    },
  };
}

Head descriptors

Use head only when the structured fields do not cover the tag you need. RouteHeadDescriptor supports base, link, meta, script, and style.

export const metadata = {
  head: [
    {
      tag: "link",
      attrs: {
        rel: "preconnect",
        href: "https://www.googletagmanager.com",
      },
    },
  ],
};

API reference: RouteMetadata, GenerateMetadataContext, RouteHeadDescriptor, RouteSecurityHeaders, and RouteStrictTransportSecurity.