@sandlada/astro-page-meta
v0.0.1-20260822.b
Published
Astro component for emitting SEO, Open Graph, and Twitter page meta tags.
Readme
@sandlada/astro-page-meta
For Private Use.
A powerful, type-safe Astro component for managing SEO, Open Graph Protocol (OGP), and Twitter Cards metadata in the HTML <head>.
Features
- 🎯 Single Component Architecture: Unified
<PageMeta />component covers standard SEO, Open Graph, and Twitter Cards. - 🌐 Strict Open Graph (OGP) Compliance: Proper nested structured meta tags (
video:actor+video:actor:role,music:album+music:album:disc/track, etc.). - 🔗 Automatic Absolute URL Resolution: Automatically converts relative image/media/canonical URLs to absolute URLs using
Astro.site/Astro.url. - 🖼️ Astro Image Support: Accepts Astro
ImageMetadataor URL strings forimage,icon,ogImage, andtwitterImage. - 🏷️ Dynamic MIME Type Resolution: Detects
.svg,.ico,.png,.webp,.jpgfor favicons dynamically. - 🐦 Twitter Cards Support:
summary,summary_large_image,player, andappcard types. - 🔒 Type-Safe: Full TypeScript interfaces exported for props and metadata payloads.
Installation
npm install @sandlada/astro-page-metaUsage
1. Basic Website Metadata
---
import { PageMeta } from '@sandlada/astro-page-meta';
import heroImage from '../assets/hero.png';
import favicon from '../assets/favicon.svg';
---
<!doctype html>
<html lang="en">
<head>
<PageMeta
title="My Awesome Website"
description="Welcome to my awesome website built with Astro."
url="https://example.com/"
icon={favicon}
image={heroImage}
imageAlt="Website hero preview"
twitterSite="@example"
/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>2. Article (Open Graph article)
---
import { PageMeta } from '@sandlada/astro-page-meta';
---
<head>
<PageMeta
title="Understanding Open Graph Meta Tags"
description="A deep dive into constructing perfect social metadata."
ogType="article"
ogArticlePublishedTime="2026-08-22T00:00:00Z"
ogArticleModifiedTime="2026-08-22T12:00:00Z"
ogArticleAuthor={['https://github.com/author1']}
ogArticleSection="Web Development"
ogArticleTag={['Astro', 'SEO', 'Open Graph']}
twitterCard="summary_large_image"
twitterLabel1="Written by"
twitterData1="Kai Orion"
twitterLabel2="Reading time"
twitterData2="5 min"
/>
</head>3. Video (Open Graph video.movie / video.episode)
---
import { PageMeta } from '@sandlada/astro-page-meta';
---
<head>
<PageMeta
title="Big Buck Bunny (2008)"
description="An open-source animated short film by the Blender Foundation."
ogType="video.movie"
ogVideo="https://example.com/video.mp4"
ogVideoDuration={596}
ogVideoReleaseDate="2008-04-10"
ogVideoActor={[
{ actor: 'https://example.com/actor1', role: 'Bunny' },
{ actor: 'https://example.com/actor2', role: 'Squirrel' },
]}
ogVideoDirector={['https://example.com/director']}
/>
</head>4. Twitter Player Card
---
import { PageMeta } from '@sandlada/astro-page-meta';
---
<head>
<PageMeta
title="Video Player Demo"
description="Watch this video embedded via Twitter Player Card."
twitterCard="player"
twitterPlayer="https://example.com/player.html"
twitterPlayerWidth={1280}
twitterPlayerHeight={720}
twitterPlayerStream="https://example.com/video.webm"
twitterPlayerStreamContentType="video/webm"
/>
</head>TypeScript Types
All types can be imported directly from the package:
import type {
IPageMeta,
IOpenGraph,
ITwitterCard,
PageMetaImage,
PageMetaIcon
} from '@sandlada/astro-page-meta';