PageMetadata
Open in ChatGPTAn all-in-one metadata component that streamlines SEO tags, social preview images, favicon links, font preloading, and optional client-side routing—providing a structured, maintainable way to manage metadata across Astro projects.
Install
pnpm dlx hybrid-astro-ui@latest add page-metadatanpx hybrid-astro-ui@latest add page-metadatayarn dlx hybrid-astro-ui@latest add page-metadatabunx hybrid-astro-ui@latest add page-metadataUsage
---
import { PageMetadata } from "@/src/components/hybrid-astro-ui/page-metadata"
import Image from ".........."
---
<head>
<PageMetadata
title="Hybrid Astro UI - Beautifully Crafted UI Components for Your Next Project"
description="Hybrid-Astro-UI using a hybrid model: zero-JS Astro + progressive enhancement with web components."
ogType="website"
enableClientRouter
loadRSS
favicons={[
{ rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
{ rel: "icon", type: "image/png", href: "/favicon-32.png", sizes: "32x32" },
{ rel: "icon", type: "image/png", href: "/favicon-16.png", sizes: "16x16" },
{ rel: "apple-touch-icon", type: "image/png", href: "/apple-touch-icon.png", sizes: "180x180" },
{ rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#8D40E7" },
{ rel: "manifest", href: "/site.webmanifest" }
]}
preloadFonts={[
{ href: "/fonts/Inter-Regular.woff2", type: "font/woff2" },
{ href: "/fonts/Inter-Medium.woff2", type: "font/woff2" },
{ href: "/fonts/Inter-Bold.woff2", type: "font/woff2" }
]}
image={Image}
googleSiteVerification="hxfjalmjklasdhhcasdooqwejasjdjx"
/>
</head>Props
-
title
Defines the
<title>of the page and is used everywhere metadata matters — browsers, search engines, and social networks. It should be short, descriptive, and unique per page. -
description
Sets the meta description used by search engines and social previews. A concise summary of the page helps improve click-through rates and SEO.
-
image
The image used for Open Graph and Twitter previews (e.g., when sharing your site on X, Facebook, Discord, etc.). Passed as an Astro ImageMetadata object to ensure proper resolution and bundling.
-
ogType
Specifies the Open Graph content type, such as “website” or “article”. This tells social platforms how to classify the page when generating previews.
-
enableClientRouter
When enabled, injects Astro’s
<ClientRouter />into the page. Useful if you rely on client-side transitions or partial hydration, but safe to disable for fully static sites. -
loadRSS (optional)
Adds an RSS
<link rel="alternate">tag to the page metadata when set to true. This does not generate the RSS feed — you must create it yourself using @astrojs/rss or another feed generator.This prop simply exposes the feed to browsers and feed readers, making it discoverable. Ideal for blogs or documentation sites that already provide an RSS file such as /rss.xml.
-
favicons
An array of favicon definitions used to generate the correct
<link>tags for different browsers and devices. Supports modern SVG favicons, PNG fallbacks, Apple touch icons, PWA manifests, and Safari pinned tabs. -
preloadFonts (optional)
Allows you to preload important web fonts to improve performance and reduce layout shifts. Each entry defines a href and a valid font MIME type (woff2, woff, ttf, etc.).
-
googleSiteVerification (optional)
Adds the meta verification token required by Google Search Console to prove ownership of your website. If omitted, no verification tag is included — ideal for local development or sites that don’t use Search Console.