Set document metadata for titles, descriptions and link previews. Use it at the page boundary so metadata describes the current page rather than an embedded example.
Examples
Metadata
Generated document metadata, shown as text to preserve this page's title and description.
Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.
bun add @kongmy-dev/sapphire-ui react react-dom
"use client";
import { SEOHead } from "@kongmy-dev/sapphire-ui/seo-head";
function MetadataExample() {
return (
<>
<SEOHead
title="Sapphire metadata example"
description="Accessible document metadata"
isWebSite
/>
<p>
Document metadata includes a title, description, and website structured
data.
</p>
</>
);
}
export default MetadataExample;
HTML markup
Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.
Raw Html
JSX usage
Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.
bun add @kongmy-dev/sapphire-ui react react-dom
"use client";
import { generateSEOTags } from "@kongmy-dev/sapphire-ui/seo-head";
function RawHTMLExample() {
return (
<pre>
{generateSEOTags({
title: 'Server-rendered metadata',
description: 'Works without React.',
})}
</pre>
);
}
export default RawHTMLExample;
HTML markup
Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.
Props
Generated from the current public TypeScript signatures, including composed behaviour props. “—” means no default is declared in the local signature; forwarded behaviour defaults are not inferred.