npm.io
0.0.1-20260822.b • Published 6h ago

@sandlada/astro-page-meta

Licence
MIT
Version
0.0.1-20260822.b
Deps
0
Size
54 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

@sandlada/astro-page-meta

npm version GitHub License

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 ImageMetadata or URL strings for image, icon, ogImage, and twitterImage.
  • Dynamic MIME Type Resolution: Detects .svg, .ico, .png, .webp, .jpg for favicons dynamically.
  • Twitter Cards Support: summary, summary_large_image, player, and app card types.
  • Type-Safe: Full TypeScript interfaces exported for props and metadata payloads.

Installation

npm install @sandlada/astro-page-meta

Usage

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';

License

MIT

Keywords

astroastro-componentmeta-tagsseoopen-graphtwitter-cardssandlada