API Docs — Social Card

🔤

Available Font Families

Use the dropdown on each OG example to preview any supported family.

Geist Sans

Inter

Space Grotesk

Ubuntu

Roboto

Nunito

Poppins

Raleway

Oswald

DM Sans

Plus Jakarta Sans

Outfit

Figtree

Syne

Onest

Bricolage Grotesque

Montserrat

Exo 2

Work Sans

Manrope

Barlow

Jost

Albert Sans

Lexend

Merriweather

Playfair Display

Lora

DM Serif Display

Fraunces

Instrument Serif

Libre Baskerville

EB Garamond

Cormorant Garamond

Bitter

Crimson Pro

Source Serif 4

JetBrains Mono

Fira Code

Roboto Mono

Source Code Pro

Space Mono

Ubuntu Mono

Inconsolata

DM Mono

Azeret Mono

Overpass Mono

Share Tech Mono

Chivo Mono

Courier Prime

Victor Mono

Cascadia Code

Maple Mono

Dancing Script

Pacifico

Caveat

Satisfy

Kaushan Script

Sacramento

Great Vibes

Righteous

Dela Gothic One

Bungee

Abril Fatface

Anton

Permanent Marker

Architects Daughter

Indie Flower

Gloria Hallelujah

Lobster

Bebas Neue

Quick peek mode for faster browsing.

OG Image Templates

GET

/api/og/general

Open in Builder Live example

Logo + title + description

Font

Parameter	Type	Default	Description
`siteName`	string	—	Brand / website name
`title`	string	—	Page title — replaces siteName in hero if provided
`description`	string	—	Subtitle text (max 2 lines)
`accentColor`	string	—	Used for title underline / logo border ring
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/general?siteName=OG+Graph&title=Open+Graph+Generator&description=Self-hostable+social+card+generator&theme=dark&accentColor=%236366f1&fontFamily=source-code-pro&bgStyle=gradient%2Bgrid

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/gradient

Open in Builder Live example

Vivid gradient headline

Font

Parameter	Type	Default	Description
`siteName`	string	—	Lower subheading
`title`	string	—	Main heading with gradient applied
`description`	string	—	Paragraph below heading
`gradientFrom`	string	—	CSS gradient start color (hex)
`gradientTo`	string	—	CSS gradient end color (hex)
`gradientAngle`	string	—	Gradient direction in degrees
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/gradient?title=Beautiful+Images&siteName=social-card&gradientFrom=%2300e887&gradientTo=%2300e0f3&theme=dark&fontFamily=fira-code&bgStyle=aurora%2Bdots

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/blog

Open in Builder Live example

Two-column with banner

Font

Parameter	Type	Default	Description
`title`	string	—	Post title (max 3 lines)
`banner`	string	—
`tags`	string	—	Comma-separated category tags (up to 4)
`authorName`	string	—	Author display name
`authorPhoto`	string	—
`authorHandle`	string	—	Social handle e.g. @johndoe
`readingTime`	string	—	e.g. "5 min read"
`publishDate`	string	—	ISO 8601 date e.g. 2026-04-28
`dateLocale`	string	—	BCP 47 locale for date formatting e.g. fr-FR (defaults to en-US)
`siteDomain`	string	—	Breadcrumb domain shown above date
`accentColor`	string	—	Accent bar color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/blog?title=How+to+Build+a+Blog&tags=Next.js%2CTypeScript&authorName=Jane+Doe&siteDomain=myblog.com&theme=dark&fontFamily=exo2&bgStyle=mesh%2Bnoise

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/minimal

Open in Builder Live example

Clean centered typography

Font

Parameter	Type	Default	Description
`title`	string	—	Large centered heading (max 3 lines)
`description`	string	—	Subtext below title (max 2 lines)
`eyebrow`	string	—	ALL-CAPS small label above title e.g. TUTORIAL
`bgColor`	string	—	Override background color (hex)
`textColor`	string	—	Override primary text color (hex)
`accentColor`	string	—	Color for eyebrow and bottom border accent
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/minimal?title=Clean+Design&eyebrow=TUTORIAL&theme=dark&accentColor=%236366f1&fontFamily=cascadia-code&bgStyle=solid%2Bvignette

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/article

Open in Builder Live example

Editorial long-form layout

Font

Parameter	Type	Default	Description
`title`	string	—	Headline (max 3 lines)
`excerpt`	string	—	1-2 sentence teaser (max 2 lines)
`authorName`	string	—	Author name
`authorPhoto`	string	—
`publicationName`	string	—	Newsletter / publication brand name
`publicationLogo`	string	—
`readingTime`	string	—	e.g. "8 min read"
`publishDate`	string	—	ISO 8601 date e.g. 2026-04-28
`dateLocale`	string	—	BCP 47 locale for date formatting e.g. fr-FR (defaults to en-US)
`accentColor`	string	—	Left edge accent bar + publication name color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/article?title=The+Future+of+Web+Dev&excerpt=A+deep+dive+into+modern+tooling&authorName=Jane+Doe&publicationName=Tech+Weekly&theme=dark&fontFamily=share-tech-mono&bgStyle=gradient%2Bvignette

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/product

Open in Builder Live example

Features + screenshot

Font

Parameter	Type	Default	Description
`productName`	string	—	Large product name
`tagline`	string	—	One-liner value proposition
`feature1`	string	—	First feature bullet
`feature2`	string	—	Second feature bullet
`feature3`	string	—	Third feature bullet
`badge`	string	—	Small pill badge e.g. "v2 Live"
`cta`	string	—	CTA text e.g. "Get Started Free"
`screenshot`	string	—
`accentColor`	string	—	Badge, CTA pill, feature dots, glow color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/product?productName=My+SaaS&tagline=Build+faster&feature1=Open+source&feature2=Edge+ready&cta=Get+Started&theme=dark&accentColor=%238b5cf6&fontFamily=crimson-pro&bgStyle=aurora%2Bgrid

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/portfolio

Open in Builder Live example

Avatar + skills showcase

Font

Parameter	Type	Default	Description
`name`	string	—	Full name — largest text element
`role`	string	—	Job title e.g. "Full-Stack Developer"
`bio`	string	—	One-liner personal tagline
`avatar`	string	—
`skills`	string	—	Comma-separated tech tags (up to 6)
`githubHandle`	string	—	GitHub username
`twitterHandle`	string	—	Twitter/X handle
`websiteUrl`	string	—	Personal site URL
`location`	string	—	City / country
`available`	string	—	Shows green Open to work badge when true
`accentColor`	string	—	Skill chips, social handles, avatar ring
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/portfolio?name=Jane+Doe&role=Full-Stack+Developer&skills=React%2CTypeScript%2CGo&available=true&theme=dark&accentColor=%233b82f6&fontFamily=bungee&bgStyle=aurora%2Bgrid%2Bnoise

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/quote

Open in Builder Live example

Bold quote card

Font

Parameter	Type	Default	Description
`quote`	string	—	Primary quote text
`author`	string	—	Quote author
`kicker`	string	—	Small category label
`accentColor`	string	—	Accent color for quote bar and author
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/quote?quote=Build+fast.+Ship+often.&author=Mohamed+Faouzi&kicker=Engineering&theme=dark&accentColor=%2314b8a6&fontFamily=syne&bgStyle=mesh%2Bvignette

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/changelog

Open in Builder Live example

Release notes card

Font

Parameter	Type	Default	Description
`productName`	string	—	Product name
`version`	string	—	Release version
`headline`	string	—	Release headline
`change1`	string	—	First changelog item
`change2`	string	—	Second changelog item
`change3`	string	—	Third changelog item
`accentColor`	string	—	Accent color
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/changelog?productName=OG+Graph&version=v2.1.0&headline=Performance+and+UX+upgrade&change1=New+style+system&change2=Font+controls+for+all+templates&change3=New+endpoint+variants&theme=dark&accentColor=%2338bdf8&fontFamily=great-vibes&bgStyle=gradient%2Bgrid

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/event

Open in Builder Live example

Conference / meetup card

Font

Parameter	Type	Default	Description
`eventName`	string	—	Conference or event name
`tagline`	string	—	Short event tagline or theme
`eventDate`	string	—	ISO 8601 date e.g. 2026-09-15
`dateLocale`	string	—	BCP 47 locale for date formatting e.g. fr-FR
`location`	string	—	City and country or venue name
`host`	string	—	Organizer or host name
`accentColor`	string	—	Accent color for date, dividers
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/event?eventName=DesignConf+2026&tagline=The+future+of+design&location=Paris%2C+France&host=Acme+Events&theme=dark&accentColor=%23f97316&fontFamily=bricolage&bgStyle=gradient%2Bgrid

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

GET

/api/og/launch

Open in Builder Live example

Product launch announcement

Font

Parameter	Type	Default	Description
`productName`	string	—	Product or project name
`punchline`	string	—	One-line bold value proposition
`launchDate`	string	—	ISO 8601 date or freeform text e.g. "Coming soon"
`highlight1`	string	—	First key highlight
`highlight2`	string	—	Second key highlight
`highlight3`	string	—	Third key highlight
`badge`	string	—	Pill badge text e.g. "Now live"
`accentColor`	string	—	Accent color for highlights and badge
`theme`	string	—	Color theme: 'dark' \| 'light' \| 'auto'
`target`	string	—	Platform preset — sets output dimensions
`fontFamily`	string	—	Typography preset
`bgTone`	string	—	Background tone preset
`bgCustomColor`	string	—	Custom background base color
`bgGradientFrom`	string	—	Gradient start color override (for gradient base)
`bgGradientTo`	string	—	Gradient end color override (for gradient base)
`bgStyle`	string	—	Composable background tokens e.g. gradient+grid+noise
`logo`	string	—
`logoWidth`	string	—	Logo width in px
`logoHeight`	string	—	Logo height in px (auto if omitted)

Example URL

https://social-card.mfaouzi.com/api/og/launch?productName=SuperApp&punchline=The+tool+you+wished+existed&badge=Now+live&highlight1=10%C3%97+faster&highlight2=Open+source&highlight3=Zero+config&theme=dark&accentColor=%23ec4899&fontFamily=maple-mono&bgStyle=aurora%2Bdots

Response Spec

Content-Type: image/png

Binary PNG image bytes (1200x630 by default; target override supported).

SVG Badges

GET

/api/badge/label

Live example

Premium two-segment label/value badge.

Parameter	Type	Default	Description
`label`	string	—	Left-side label text
`message`	string	—	Right-side message text
`color`	string	—
`labelColor`	string	—
`style`	string	—	Badge style: 'flat' \| 'pill'
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/label?label=version&message=2.1.0&color=%236366f1&style=flat

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

GET

/api/badge/stat

Live example

Premium single-metric display card with optional icon.

Parameter	Type	Default	Description
`label`	string	—	Metric label
`value`	string	—	Metric value (raw string — supports abbreviations like 1.2k)
`unit`	string	—	Unit suffix e.g. %, ms, MB
`color`	string	—
`icon`	string	—	Optional icon slug
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/stat?label=Stars&value=4.2k&icon=star&color=%23f59e0b

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

GET

/api/badge/status

Live example

Glass-style service health indicator with semantic colors.

Parameter	Type	Default	Description
`label`	string	—	Service or component name
`status`	string	—	Current operational status
`color`	string	—	Override status color (hex) — defaults to semantic color
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/status?label=API&status=online

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

GET

/api/badge/progress

Live example

Premium progress bar for coverage, funding goals, completion.

Parameter	Type	Default	Description
`label`	string	—	Label above the bar
`value`	string	—	Progress value 0–100
`color`	string	—
`width`	string	—	Total badge width in px
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/progress?label=Coverage&value=87&color=%2322c55e

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

GET

/api/badge/score

Live example

Premium circular score ring — Lighthouse, ratings.

Parameter	Type	Default	Description
`label`	string	—	Score category label
`value`	string	—	Achieved score
`max`	string	—	Maximum possible score
`color`	string	—
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/score?label=Performance&value=95&color=%236366f1

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

GET

/api/badge/socials

Live example

Social proof pill with platform icon and glass body.

Parameter	Type	Default	Description
`platform`	string	—	Social platform
`handle`	string	—	Username or handle (without @)
`followers`	string	—	Follower / subscriber count (raw string e.g. 4.2k)
`color`	string	—
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/socials?platform=github&handle=acme&followers=4.2k&color=%236366f1

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

GET

/api/badge/tech-stack

Live example

Premium tech tag row for README or portfolio.

Parameter	Type	Default	Description
`stack`	string	—	Comma-separated list of tech names (up to 8)
`color`	string	—
`style`	string	—	Layout: 'tags' (pill chips) \| 'row' (compact)
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/tech-stack?stack=React%2CTypeScript%2CGo&color=%236366f1&style=tags

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

GET

/api/badge/availability

Live example

Premium "Open to work" / availability status banner.

Parameter	Type	Default	Description
`label`	string	—	Name or role label
`available`	string	—	'true' shows green open-to-work state
`hireText`	string	—	Custom CTA text e.g. 'Available for freelance'
`color`	string	—
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/badge/availability?label=Jane+Doe&available=true&hireText=Open+to+work&color=%2322c55e

Response Spec

Content-Type: image/svg+xml; charset=utf-8

UTF-8 SVG markup string.

SEO Assets

GET

/api/seo/favicon

Live example

32×32 PNG for <link rel="icon">.

Parameter	Type	Default	Description
`initial`	string	—	1–2 letter monogram shown when no logo is provided
`logo`	string	—	Absolute URL of a logo/icon image — renders instead of monogram
`color`	string	—	Background color (hex)
`accentColor`	string	—	Foreground / ring accent color (hex)
`shape`	string	—	Icon shape: 'circle' \| 'square' \| 'rounded'
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/seo/favicon?initial=OG&color=%230f0f0f&accentColor=%236366f1&shape=rounded

Response Spec

Content-Type: image/png

Binary PNG image bytes (32x32).

GET

/api/seo/apple-touch-icon

Live example

180×180 PNG for <link rel="apple-touch-icon">.

Parameter	Type	Default	Description
`initial`	string	—	1–2 letter monogram shown when no logo is provided
`logo`	string	—	Absolute URL of a logo/icon image — renders instead of monogram
`color`	string	—	Background color (hex)
`accentColor`	string	—	Foreground / ring accent color (hex)
`shape`	string	—	Icon shape: 'circle' \| 'square' \| 'rounded'
`theme`	string	—	Color theme: 'dark' \| 'light'

Example URL

https://social-card.mfaouzi.com/api/seo/apple-touch-icon?initial=OG&color=%230f0f0f&accentColor=%236366f1&shape=rounded

Response Spec

Content-Type: image/png

Binary PNG image bytes (180x180).

GET

/api/seo/manifest-icon

Live example

192 or 512 px PNG for PWA manifest.json.

Parameter	Type	Default	Description
`initial`	string	—	1–2 letter monogram shown when no logo is provided
`logo`	string	—	Absolute URL of a logo/icon image — renders instead of monogram
`color`	string	—	Background color (hex)
`accentColor`	string	—	Foreground / ring accent color (hex)
`shape`	string	—	Icon shape: 'circle' \| 'square' \| 'rounded'
`theme`	string	—	Color theme: 'dark' \| 'light'
`size`	string	—	Icon size: 192 or 512 px

Example URL

https://social-card.mfaouzi.com/api/seo/manifest-icon?initial=OG&color=%230f0f0f&accentColor=%236366f1&shape=rounded&size=512

Response Spec

Content-Type: image/png

Binary PNG image bytes (192x192 or 512x512 via ?size=192|512).

GET

/api/seo/twitter-card

Live example

800×418 PNG Twitter summary card.

Parameter	Type	Default	Description
`title`	string	—	Card headline
`description`	string	—	Short description (1–2 lines)
`siteName`	string	—	Site or brand name
`logo`	string	—	Logo image URL
`accentColor`	string	—	Accent color (hex)
`theme`	string	—	Color theme: 'dark' \| 'light'
`bgStyle`	string	—	Background style tokens e.g. 'gradient+grid'

Example URL

https://social-card.mfaouzi.com/api/seo/twitter-card?title=Open+Graph+Generator&siteName=social-card&accentColor=%236366f1&bgStyle=gradient%2Bgrid

Response Spec

Content-Type: image/png

Binary PNG image bytes (800x418).

GET

/api/seo/json-ld

Live example

Structured data script route (application/ld+json).

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "OG Graph",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "description": "Generate OG images and SEO assets",
  "url": "https://example.com"
}
</script>

Parameter	Type	Default	Description
`schemaType`	string	—	Schema.org type, e.g. 'Article', 'Product', 'FAQPage', 'Event', 'JobPosting'
`name`	string	—	Primary entity or page name
`headline`	string	—	Headline for article/content
`description`	string	—	Short summary (1-2 lines)
`url`	string	—	Canonical URL
`image`	string	—	Primary image URL
`datePublished`	string	—	ISO 8601 date e.g. 2026-05-03
`dateModified`	string	—	ISO 8601 date e.g. 2026-05-03
`authorName`	string	—	Author / creator name
`publisherName`	string	—	Publisher / organization name
`sameAs1`	string	—	Social profile URL 1
`sameAs2`	string	—	Social profile URL 2
`sameAs3`	string	—	Social profile URL 3
`price`	string	—	Product price e.g. 49.00
`priceCurrency`	string	—	ISO currency code e.g. USD
`applicationCategory`	string	—	App category e.g. DeveloperApplication
`operatingSystem`	string	—	OS target e.g. Web
`faqQuestion1`	string	—	FAQ first question
`faqAnswer1`	string	—	FAQ first answer
`faqQuestion2`	string	—	FAQ second question
`faqAnswer2`	string	—	FAQ second answer
`jsonRaw`	string	—	Advanced JSON-LD object payload (overrides generated fields)

Example URL

https://social-card.mfaouzi.com/api/seo/json-ld?schemaType=SoftwareApplication&name=OG+Graph&description=Generate+OG+images+and+SEO+assets&url=https%3A%2F%2Fexample.com

Response Spec

Content-Type: application/ld+json; charset=utf-8

JSON object payload (or script body in raw response).

GET

/api/seo/robots-txt

Live example

Robots.txt helper route with optional AI crawler policy.

# robots.txt generated by Social Card SEO Builder
User-agent: *
Allow: /
Disallow: /private

# AI crawlers
User-agent: GPTBot
Allow: /
User-agent: Google-Extended
Allow: /
User-agent: PerplexityBot
Allow: /

Sitemap: https://example.com/sitemap.xml

Parameter	Type	Default	Description
`userAgent`	string	—	Primary User-agent
`allow`	string	—	Allow path
`disallow`	string	—	Disallow path
`sitemap`	string	—	Absolute sitemap URL
`crawlDelay`	string	—	Crawl delay in seconds (optional)
`aiCrawlerPolicy`	string	—	AI crawler policy for GPTBot / Google-Extended / PerplexityBot

Example URL

https://social-card.mfaouzi.com/api/seo/robots-txt?userAgent=*&allow=%2F&disallow=%2Fprivate&sitemap=https%3A%2F%2Fexample.com%2Fsitemap.xml&aiCrawlerPolicy=allow

Response Spec

Content-Type: text/plain; charset=utf-8

Plain text robots.txt content.

GET

/api/seo/meta-pack

Live example

Copy-ready HTML meta snippet route for canonical + OG + Twitter.

<!-- SEO meta pack generated by Social Card -->
<title>OG Graph</title>
<meta name="description" content="Generate OG images and SEO assets" />
<meta name="robots" content="index,follow,max-image-preview:large" />
<link rel="canonical" href="https://example.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="OG Graph" />
<meta property="og:description" content="Generate OG images and SEO assets" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://example.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="OG Graph" />
<meta name="twitter:description" content="Generate OG images and SEO assets" />
<meta name="theme-color" content="#0f0f0f" />

Parameter	Type	Default	Description
`title`	string	—	Page title
`description`	string	—	Meta description
`canonical`	string	—	Canonical page URL
`robots`	string	—	Meta robots content
`ogType`	string	—	Open Graph type
`ogImage`	string	—	Open Graph image URL
`siteName`	string	—	Open Graph site name
`locale`	string	—	Open Graph locale
`twitterCard`	string	—	Twitter card type
`twitterSite`	string	—	Twitter handle e.g. @og_graph
`themeColor`	string	—	Browser UI color
`keywords`	string	—	Comma-separated keyword list

Example URL

https://social-card.mfaouzi.com/api/seo/meta-pack?title=OG+Graph&description=Generate+OG+images+and+SEO+assets&canonical=https%3A%2F%2Fexample.com&ogType=website

Response Spec

Content-Type: text/plain; charset=utf-8

Plain text HTML tags snippet (<title>, <meta>, <link>).

📦

TypeScript SDK

Install social-card-sdk and generate URLs/buffers programmatically.

npm install social-card-sdk pnpm add social-card-sdk yarn add social-card-sdk

import {SocialCardClient} from 'social-card-sdk';
const client = new SocialCardClient();
const ogUrl = client.og.general({title: 'Hello Social Card'});

View package on npm

🧪

SEO Inspector API

Server-side single-page SEO analyzer with diagnostics and recommendations.

POST/api/seo/inspect

Open Inspector UI

Submit a URL and receive core SEO tags, Open Graph/Twitter data, heading/image checks, JSON-LD info, and actionable findings.

Request

POST https://social-card.mfaouzi.com/api/seo/inspect
Content-Type: application/json

{
  "url": "https://example.com"
}

cURL

curl -X POST "https://social-card.mfaouzi.com/api/seo/inspect" \
  -H "content-type: application/json" \
  -d '{"url":"https://example.com"}'

Response JSON (shape)

{5 items"success":true
"inspectedAt":"2026-05-03T15:00:00.000Z"
"summary":{5 items"score":84
"totalFindings":3
"errors":0
"warnings":2
"infos":1
}
"findingsBySeverity":{3 items"error":[]0 items
"warning":[...]1 item
"info":[]0 items
}
"data":{14 items"url":"https://example.com"
"finalUrl":"https://example.com/"
"statusCode":200
"title":"Example Domain"
"metaDescription":""
"canonical":""
"robots":""
"og":{...}5 items
"twitter":{...}5 items
"icons":{...}3 items
"headings":{...}2 items
"images":{...}2 items
"jsonLd":{...}3 items
"findings":[]0 items
}
}

Response Codes

200Image (PNG/SVG) or text payload (robots/meta/json-ld)
400JSON with Zod validation errors
500JSON with error message