@mannisto/astro-metadata
v1.0.1
Published
Astro components for managing your page head — metadata, social sharing, favicons, and SEO.
Maintainers
eremannistoReadme
Astro Metadata
Astro components for managing your page head — metadata, social sharing, favicons, and SEO.
Installation
# pnpm
pnpm add @mannisto/astro-metadata
# npm
npm install @mannisto/astro-metadata
# yarn
yarn add @mannisto/astro-metadataUsage
There are three ways to use this package. Pick what suits your project, or combine them freely.
Head component
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>Metadata API
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>Individual components
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>Components
Contributing
See CONTRIBUTING.md for setup and contribution guidelines.
License
MIT © Ere Männistö