SEO

Optimize your site for search engines with the Head component.

Overview

The Head component provides comprehensive SEO metadata for your pages. It renders <meta> tags for search engines, social media previews, and browser behavior.

Basic Usage

import { Head } from "@/registry/components/head"

<Head
  title="My Page"
  description="A page built with XaC Labs UI."
/>

This renders essential tags: charset, viewport, favicon, description, og:title, og:description, and <title>.

Full Configuration

<Head
  title="Components - XaC Labs UI"
  description="Browse accessible, themeable components."
  generator="Astro"
  keywords="react, components, ui library, tailwind"
  url="https://ui.xaclabs.dev/docs/components"
  image="https://ui.xaclabs.dev/og-image.png"
  siteName="XaC Labs UI"
  type="website"
  twitterCard="summary_large_image"
  robots="index, follow"
  themeColor="#09090b"
  canonical="https://ui.xaclabs.dev/docs/components"
/>

Props Reference

Prop	Type	Default	Description
`title`	`string`	—	Page title (required)
`description`	`string`	—	Meta description (required)
`generator`	`string`	—	Generator meta tag (e.g. `"Astro"`)
`keywords`	`string`	—	Comma-separated keywords
`url`	`string`	—	Canonical page URL
`image`	`string`	—	Open Graph / Twitter image URL
`siteName`	`string`	`"XaC Labs UI"`	Open Graph site name
`type`	`string`	`"website"`	Open Graph type (`"website"`, `"article"`)
`twitterCard`	`string`	`"summary_large_image"`	Twitter card type
`robots`	`string`	—	Robots directive (e.g. `"index, follow"`)
`themeColor`	`string`	—	Browser theme color
`canonical`	`string`	—	Canonical URL (falls back to `url`)

Open Graph

Open Graph tags control how your page appears when shared on social media platforms like Facebook, LinkedIn, and Discord.

The Head component renders:

og:title — from title
og:description — from description
og:type — from type (defaults to "website")
og:url — from url
og:image — from image
og:site_name — from siteName (defaults to "XaC Labs UI")

Twitter Cards

Twitter card meta tags control the preview displayed on X (formerly Twitter):

twitter:card — from twitterCard (defaults to "summary_large_image")
twitter:title — from title
twitter:description — from description
twitter:image — from image

Layout Integration

In an Astro layout, pass Head as a component inside <head>:

---
import { Head } from '@/registry/components/head';
---
<html>
  <head>
    <Head title="My App" description="App description." url={Astro.url.href} />
  </head>
  <body>
    <slot />
  </body>
</html>

The url prop can be derived from Astro.url.href for automatic canonical URLs.

Best Practices

Always provide title and description — these are the most impactful SEO tags.
Keep description between 50–160 characters for optimal search result display.
Use canonical to avoid duplicate content issues on paginated or filtered pages.
Set robots to "noindex, nofollow" for private or draft pages.
Provide an image (1200×630px recommended) for rich social media previews.
Use type="article" for blog posts and type="website" for other pages.

PreviousTypography NextOverview