Skip to main content

OG Image Template

v1.0.0

Generate Open Graph image HTML/CSS templates — Vercel OG ready, multi-size variants.

OG Meta Tags + Vercel OG
<!-- In <head> -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Build Better Software" />
<meta property="og:description" content="Tools and insights for modern developers" />
<meta property="og:image" content="https://example.com/og/default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="DevTools" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@devtools" />

<!-- Vercel @vercel/og (Next.js App Router) -->
// app/og/route.tsx
import { ImageResponse } from "next/og";
export function GET() {
  return new ImageResponse(
    <div style={{ display: "flex", background: "#111", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", color: "white", fontSize: 48 }}>
      <h1>Build Better Software</h1>
    </div>,
    { width: 1200, height: 630 }
  );
}