Site Kit

Page metadata with Seo

Add Seo to your React page so search results and shared links have a useful title and description.

Example

Import from the platform-owned @free-vibecode/site-kit package. Put the component inside your page’s render tree; React places its metadata in the document head.

import { Seo } from "@free-vibecode/site-kit"

export default function App() {
  return (
    <>
      <Seo
        title="Wildflower Studio"
        description="Handmade ceramics for everyday rituals."
        canonicalUrl="https://example.com/"
        imageUrl="https://example.com/preview.jpg"
        siteName="Wildflower Studio"
      />
      <main>
        <h1>Made to be used, made to last.</h1>
      </main>
    </>
  )
}

Props

Seo component props
Prop	Required	Purpose
`title`	Yes	Page title and social title.
`description`	Yes	Search and social description.
`canonicalUrl`	No	Preferred public URL for the page.
`imageUrl`	No	Image URL for a social preview.
`siteName`	No	Name of the wider website.

All prop values are strings. Omit optional props you do not have; do not use placeholder URLs.

What it renders

<title> and a description meta tag.
Open Graph title, description and og:type set to website.
A twitter:card meta tag set to summary_large_image.
When supplied, a canonical link, Open Graph image and Open Graph site name.