Astro components for managing your page head — metadata, social sharing, favicons, and SEO.
# pnpm
pnpm add @mannisto/astro-metadata
# npm
npm install @mannisto/astro-metadata
# yarn
yarn add @mannisto/astro-metadataThere are three ways to use this package. Pick what suits your project, or combine them freely.
The simplest approach — use Head in your layout and pass props down from pages. Title, description and image flow into Open Graph and Twitter automatically.
---
import { Head } from "@mannisto/astro-metadata"
---
<html>
<Head
title="Home"
titleTemplate="%s | My Site"
description="Welcome to my site"
image={{ url: "/og.jpg", alt: "My Site", width: 1200, height: 630 }}
/>
<body>
<slot />
</body>
</html>Set metadata in pages, resolve in layouts — no prop drilling.
---
// pages/about.astro
import { Metadata } from "@mannisto/astro-metadata"
Metadata.set({
title: "About",
description: "Learn more about us",
})
------
// layouts/Layout.astro
import { Head, Metadata } from "@mannisto/astro-metadata"
const meta = Metadata.resolve({
title: "My Site",
titleTemplate: "%s | My Site",
})
---
<html>
<Head {...meta} />
<body>
<slot />
</body>
</html>Use components directly in your <head> for full control.
---
import { Title, Description, OpenGraph } from "@mannisto/astro-metadata"
---
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<Title value="My Page" template="%s | My Site" />
<Description value="Welcome to my site" />
<OpenGraph
title="My Page"
image={{ url: "/og.jpg", alt: "My Site" }}
/>
</head>
<body>
<slot />
</body>
</html>- Canonical
- Description
- Favicon
- Head
- Keywords
- LanguageAlternates
- OpenGraph
- Robots
- Schema
- Title
See CONTRIBUTING.md for setup and contribution guidelines.
MIT © Ere Männistö
