Astro Integration Guide

Astro is designed for high-performance, content-driven websites. Integrating Open Graph preview cards is straightforward using standard frontmatter and HTML <meta> tags.

---

Layout Component Pattern (src/layouts/BlogPost.astro)

---
interface Props {
  title: string;
  description: string;
  author?: string;
}

const { title, description, author = "Editorial Team" } = Astro.props;

const ogParams = new URLSearchParams({
  title,
  description,
  author,
  theme: "dark",
  size: "landscape",
});

const ogImageUrl = `https://api.generativeog.in/v1/images/article.png?${ogParams.toString()}`;
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />

  <!-- Open Graph -->
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImageUrl} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={ogImageUrl} />
</head>

---

Integrating with Astro Content Collections

If you use getCollection('blog') in src/pages/blog/[...slug].astro:

---
import { getCollection, render } from "astro:content";
import BlogPost from "@/layouts/BlogPost.astro";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<BlogPost
  title={post.data.title}
  description={post.data.description}
  author={post.data.author}
>
  <Content />
</BlogPost>

Astro generates static HTML at build time, and every single blog post gets an automatically constructed, custom social share preview card URL without needing any browser rendering dependencies in your build step!