Metadata and social images
Describe each route for browsers, search engines, link previews, and assistive navigation.
Keep metadata beside the route
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.
Create src/pages/projects/[id].tsx
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",
};
}
Publish the fields consumers need
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, andnoFollowintentionally for non-public routes.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.
Verify the rendered document
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.
Serve social images as public assets
Store static share images under public or point Seo at a trusted media origin.
Tavo.jsdoes not generate Open Graph artwork from route code; create the image through your asset pipeline and publish the final URL.