Turn any URL into an Open Graph image
Add one og:image tag, and every page you share gets its own preview card: its title, its icon, its color. Nothing to design, nothing to deploy.
Or try one of these:
Add it to your page
Paste these inside your page's <head>.
<meta property="og:image" content="https://dogimg.vercel.app/api/og?url=https%3A%2F%2Fyour-site.com%2Fpost" /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="630" /><meta name="twitter:card" content="summary_large_image" />The Open Graph image API
One endpoint, one parameter, no key. Put the URL straight into your og:image tag and crawlers from Slack, X, LinkedIn, Facebook, Discord and KakaoTalk will fetch the card themselves.
GET https://dogimg.vercel.app/api/og?url={page URL}Parameter
url- The page to draw a card for. It has to be public and served over http or https; without a scheme, https is assumed. Pass it through
encodeURIComponentif it has a query string of its own.
From the command line
curl "https://dogimg.vercel.app/api/og?url=https://github.com" \
--output og.pngResponses
200image/png, 1200×630. Cached for an hour in browsers and a day on the CDN. After that day, the next request still gets the old card while a fresh one is drawn behind it.200- When the page can't be fetched or isn't HTML, you still get an image: a plain card carrying the hostname, cached for five minutes at most. It is marked with an
x-dogimg-fallback: 1header. A hostname that resolves to a private or local address, or a redirect that leads to one, is refused this way too. 400- Plain text. The
urlisn't http(s), has no hostname, or names a private or local address. 500- Plain text. The card could not be drawn.
Questions
- What is an Open Graph image?
- It is the picture that appears when a link is shared in a chat app or on social media. A page declares it with the og:image meta tag; without one, most apps show a bare link or a badly cropped guess.
- Does it work with any website?
- Any public page that answers with HTML. DOGimg doesn't run JavaScript, so the metadata has to be in the HTML your server sends. When a page can't be reached at all, you get a plain card with its hostname instead of an error.
- How do I choose the color of my card?
- Declare a theme-color meta tag with a hex, rgb() or named color that isn't gray, white or black. Without one, DOGimg uses the dominant color of your favicon, and failing that a hue derived from your hostname.
- I changed my title. Why is the card still the old one?
- Cards are cached for a day on the CDN, and the first request after that day is still answered with the old card while a new one is drawn. Apps like Slack, X and KakaoTalk keep their own copy of a link preview on top of that, and those are theirs to clear.
- Is it free? Do I need an API key?
- It is free, open source under the MIT license, and needs no key. If you would rather not depend on this instance, deploy your own copy from the GitHub repository.
- Does a generated image help SEO?
- Not as a ranking signal. What it changes is how your link looks once it is shared: a card with a title and a color gets noticed, and clicked, more often than a bare URL.