A lightweight, type-safe, and zero-config SEO component designed for Astro projects that entralizes your SEO configuration.
- 🔒 Type-Safe: Built with TypeScript. Enjoy full autocomplete and validation for all your SEO props.
- 🔗 Absolute URLs: Automatically converts relative image paths (e.g.,
/og.png) to absolute URLs, ensuring your social cards work perfectly on Twitter and Facebook. - 📱 Social Ready: Pre-configured Open Graph and Twitter Card support out of the box.
- ⚡ Zero Config: Intelligently uses your
astro.config.mjssite URL as the base. - 🧩 Self-Contained: No external type files needed. Everything is encapsulated in a single component.
Simply import the src/components/SEO.astro component inside the <head> tag:
---
import SEO from "../components/SEO.astro";
interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props;
---
<head>
<!-- ... other head elements ... -->
<SEO
title={title}
description={description}
image={{
src: "/images/og-default.png",
alt: "A descriptive alt text for accessibility"
}}
twitter={{
handle: "@myhandle",
card: "summary_large_image"
}}
/>
</head>| Prop | Type | Description |
|---|---|---|
name |
string |
Required. The name of the website. |
title |
string |
Required. The title of the page. |
description |
string |
Required. A short description for search engines and social cards. |
image |
{ src, alt } |
Optional. The image for social sharing. Supports relative paths! |
canonicalURL |
URL | string |
Optional. Defaults to the current page URL. |
og |
object |
Optional. Override specific Open Graph properties. |
twitter |
object |
Optional. Override specific Twitter properties. |
Define your site in astro.config.mjs to make the absolute URL resolution work automatically:
// astro.config.mjs
export default defineConfig({
site: 'https://www.your-domain.com',
});Previews generated from static HTML using og: and twitter: tags rendered by this component.
-
X (Twitter)
-
Discord
You can use tools like meta tag previewers to verify your tags before deploying.
PRs and suggestions are welcome 🙌
- Fork the repo
- Create a feature branch:
- Commit and push:
- Open a Pull Request
MIT ©BracoZS