Metadata and social images

Export a static head value when every visit shares the same metadata. Use a head function when the title, description, status, or social image depends on route parameters or loader data.

tsximport { Seo } from "@tavojs/core";
import type { PageLoadContext, PageProps } from "@tavojs/core/router";
import { Page, Text } from "@tavojs/ui";

type Project = { name: string; summary: string; image: string };
type ProjectParams = { id: string };

export function load({ params }: PageLoadContext): Promise<Project> {
  return getProject(params.id);
}

export function head({ data, params }: PageLoadContext & { data?: Project }) {
  return (
    <Seo
      title={data ? `${data.name} - Projects` : "Project"}
      description={data?.summary}
      canonical={`https://example.com/projects/${encodeURIComponent(params.id)}`}
      openGraph={{ type: "website", image: data?.image }}
      twitter={{ card: "summary_large_image", image: data?.image }}
    />
  );
}

export default function ProjectPage({
  data,
}: PageProps<Project, ProjectParams>) {
  return (
    <Page>
      <Text as="h1" variant="h1">
        {data?.name}
      </Text>
    </Page>
  );
}

async function getProject(id: string): Promise<Project> {
  return {
    name: `Project ${id}`,
    summary: "A project managed with Tavo.js.",
    image: "https://media.example.com/projects/social.png",
  };
}

• Use one specific title and plain-language description per public route.

• Set a canonical URL when multiple URLs can expose equivalent content.

• Use robots, noIndex, and noFollow to control indexing. These directives are public metadata, not access control; authenticate and authorize private content on the server.

• Provide Open Graph and Twitter images with stable HTTPS URLs and useful source dimensions.

• Set theme-color when the browser chrome should follow the product theme.

Store static share images under public or point Seo at a trusted media origin. Tavo.js does not generate Open Graph artwork from route code; create the image through your asset pipeline and publish the final URL.

Replace example.com and the sample image URL with your real public HTTPS origin and an existing image. Seo writes metadata tags; it does not create the referenced image. Inspect the production SSR HTML, not only the browser DOM after navigation. Confirm the title, canonical URL, description, robots policy, and social tags for static, dynamic, success, and not-found routes.