Open Graph Generator
Contact Us
Astro Implementation

Open Graph & Metadata Implementation in Astro

Astro pre-renders HTML on the server by default, making it ideal for Open Graph tags since crawlers receive 100% server-rendered meta tags.

Implementation Best Practices

  • ✓Pass metadata props down into a central BaseLayout.astro component.
  • ✓Use Astro.site and Astro.url.pathname to construct canonical URLs automatically.
  • ✓Inject JSON-LD structured data via set:html={JSON.stringify(schema)}.

Astro Code Example

--- 
// src/layouts/Layout.astro
interface Props {
  title: string;
  description: string;
  image?: string;
}
const { title, description, image = "/og-banner.png" } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalURL} />

  <meta property="og:type" content="website" />
  <meta property="og:url" content={canonicalURL} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={new URL(image, Astro.site)} />

  <meta name="twitter:card" content="summary_large_image" />
</head>

Audit & Verify Your Implementation

Open Graph Inspector →Open Graph Generator →