OG Image Generation

import { createOGImageSVG } from "react-ssr-seo-toolkit/og";

const svg = createOGImageSVG({
  title: "How to Build an SSR App with React",
  description: "A complete guide to server-rendered React with proper SEO.",
  brand: "My Blog",
  accentColor: "#6366f1",
  // template: "default" is the default
});

// Serve from Express:
app.get("/og/default.svg", (req, res) => {
  res.type("image/svg+xml").send(svg);
});

// Dynamic endpoint with query param:
app.get("/og/:slug.svg", (req, res) => {
  const page = getPageBySlug(req.params.slug);
  res.type("image/svg+xml").send(
    createOGImageSVG({ title: page.title, brand: "My Blog" })
  );
});

// Use as og:image:
openGraph: {
  images: [{ url: "https://mysite.com/og/my-post.svg", width: 1200, height: 630 }]
}

const svg = createOGImageSVG({
  title: "Premier League Preview 2026",
  description: "Everything you need to know about the upcoming season.",
  template: "article",
  category: "Sports",
  author: "James Walker",
  dateString: "May 8, 2026",
  brand: "Trustix UK",
  accentColor: "#e63946",
});

const svg = createOGImageSVG({
  title: "Liverpool vs Arsenal",
  template: "sports-event",
  homeTeam: "Liverpool",
  awayTeam: "Arsenal",
  eventDate: "Saturday, May 15, 2026 · 17:30",
  brand: "Trustix UK",
  accentColor: "#ffd700",
});

import sharp from "sharp";
import { createOGImageSVG } from "react-ssr-seo-toolkit/og";

app.get("/og/:slug.png", async (req, res) => {
  const page = await getPage(req.params.slug);

  const svg = createOGImageSVG({
    title: page.title,
    description: page.excerpt,
    brand: "Trustix UK",
  });

  const png = await sharp(Buffer.from(svg))
    .resize(1200, 630)
    .png()
    .toBuffer();

  res
    .type("image/png")
    .set("Cache-Control", "public, max-age=86400")
    .send(png);
});