Free · 1200×630 PNG

OG images, from a URL.

Point your og:image tag at /og?title= and every page gets a 1200 × 630 card with its own title, a line of description and your colours. It's the picture people see when your link is shared in a feed or a chat. No key, no account, no design file.

imgsrc.pub · OG image

live

Title

Description

Background

Font

The preview is the real response from that URL, exactly what your page would load.

https://imgsrc.pub/og?title=We%20shipped%20dark%20mode&description=Six%20months%2C%20four%20hundred%20colours%2C%20one%20toggle.&bg=0b1020&color=ffffff

Open ↗

200 OKimage/png1200×630loading…

Use cases

A card for every page, from data you already have.

If a page has a title, it can have a share card. Build the URL in your template and new pages get one the moment they go live.

Blog posts and docs

Use the post's title and excerpt: /og?title={title}&description={excerpt}. Every article gets its own card without anyone opening a design tool, including the ones you publish next year.

Changelogs and release notes

Give each release a card like "2.4: faster builds" in your brand colours, so a link in Slack or on LinkedIn reads as news instead of a bare URL.

Listings, profiles and product pages

Thousands of database-driven pages can each have a readable card without rendering images in your build step or storing them anywhere.

Prototypes and staging sites

Fill the og:image tag while the designed cards are still on someone's list, so link previews already look deliberate when you test sharing.

What you get

Your words, set on a 1200 × 630 card.

The card is drawn on the server at 1200 × 630 pixels, the 1.91:1 shape that Facebook, LinkedIn and X's large image card use. The title is set in bold at 60 px, centred, and wraps onto a new line at 1,000 px wide. The description sits below it at 30 px. Colours are hex values without the #, and the font can be any family installed on the server: sans-serif, serif or monospace.

Titles look best at one or two lines, roughly 50 characters; a third line starts to crowd the description. Each combination of parameters is drawn once, stored and sent with a one-year cache header. Social networks keep their own copy of a preview too, so after you change a card, ask the platform's sharing debugger to fetch it again.

Share card: We shipped dark mode — bg=0b1020

Share card: Release 2.4: faster builds — bg=5148e0

Share card: The quiet guide to pricing pages — bg=fbbf24 · font=serif

Share card: Office hours, Thursday 4pm — bg=f4f5fa · font=monospace

Parameters

Five parameters, all optional.

Start from https://imgsrc.pub/og and add what you need. Encode spaces and punctuation in the values.

Parameter	Values	Default	What it does
title	URL-encoded string	Placeholder Title	The headline, bold at 60 px. Wraps at 1,000 px wide.
description	URL-encoded string	Placeholder description goes here.	The line under the title, at 30 px.
bg	hex, no #	6200ea	Background colour.
color	hex, no #	ffffff	Colour of both lines of text.
font	sans-serif · serif · monospace	sans-serif	Font family for both lines, from the fonts installed on the server.

<meta property="og:image"
  content="https://imgsrc.pub/og?title=We%20shipped%20dark%20mode&amp;description=One%20toggle.&amp;bg=0B1020" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

In your code

One tag in your head.

Put the URL in og:image, give crawlers the width and height, and ask X for the large card. In Next.js, build the URL from the post in generateMetadata.

FAQ

OG image questions.

Is the OG image generator free?+

Yes. There is no account, no API key and no watermark. Each card is drawn once, stored, and served from then on with a one-year cache header.

Which sites show the card?+

Anything that reads the og:image tag: Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage and most other link previews. For X, also add twitter:card set to summary_large_image so it shows the large version.

I changed the title but the old card still shows. Why?+

The platform cached the old preview. A new title is a new URL, so imgsrc.pub draws a fresh card, but sites like Facebook and LinkedIn keep their copy until you ask their sharing debugger to fetch the page again.

How long can the title be?+

One or two lines read best, about 50 characters. The title wraps at 1,000 px wide, and from the third line on it starts to run into the description.

Can I use my own font or add a logo?+

Not on this endpoint. It uses the fonts installed on the server (sans-serif, serif or monospace) and draws text only. If you want an illustrated card, the AI OG image tool renders one from a prompt for credits.

Do I need to escape the & in the meta tag?+

In HTML you can write & between parameters to be strictly valid, and browsers and crawlers read both forms. In JSX, React and Next.js metadata, write the plain URL and let the framework escape it.

More tools