Quickstart Guide

Get up and running with the Open Graph Image Generator API in under 5 minutes: craft a URL, add meta tags, and verify.

Generate high-performance, dynamic social preview cards for your web pages in three simple steps.

Step 1: Craft the Image URL

Every image is generated on demand from a GET request to /v1/images/{template}.png with query parameters.

For example, to create a card using the minimal template with a custom title and dark theme:

GET https://api.generativeog.in/v1/images/minimal.png?title=Hello+World&theme=dark

URL Parameter Rules:

  • title is required for all templates (1–120 characters).
  • Parameter keys and values must be standard URL query encoded (encodeURIComponent).
  • Hex colors must be supplied without the # prefix (e.g., bg=0a0a0a&accent=3b82f6).
  • Max URL length is 2,048 characters.

Test your URL in the Interactive Playground to preview parameter changes in real time.

Step 2: Add Social Meta Tags

Paste the generated image URL into the <head> of your HTML document. Include both Open Graph (og:*) and Twitter Card (twitter:*) meta tags:

<head>
  <!-- Standard Page Metadata -->
  <title>Hello World — Modern Web Engineering</title>
  <meta
    name="description"
    content="A comprehensive tutorial on generating dynamic social preview cards."
  />

  <!-- Open Graph Protocol (Facebook, LinkedIn, Discord, Slack, iMessage) -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Hello World" />
  <meta
    property="og:description"
    content="A comprehensive tutorial on generating dynamic social preview cards."
  />
  <meta
    property="og:image"
    content="https://api.generativeog.in/v1/images/minimal.png?title=Hello+World&amp;theme=dark"
  />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Hello World" />

  <!-- Twitter / X Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Hello World" />
  <meta
    name="twitter:description"
    content="A comprehensive tutorial on generating dynamic social preview cards."
  />
  <meta
    name="twitter:image"
    content="https://api.generativeog.in/v1/images/minimal.png?title=Hello+World&amp;theme=dark"
  />
</head>

Note on HTML entity escaping: When placing URLs with query parameters inside HTML attributes, always encode & as &amp; to ensure valid HTML syntax.

Step 3: Verify with Developer Tools

Once deployed, verify that social platform crawlers can fetch and display your image:

  1. Internal Page Inspector: Use our Page Inspector to inspect HTTP status, redirect chains, Open Graph tags, and diagnostic warnings.
  2. Internal Image Inspector: Use the Image Inspector to test direct image dimensions, byte weight, and multi-frame platform crops.
  3. Official Platform Scrapers:

What’s Next?