Set up og-fox in two minutes

og-fox gives every page of your site a branded social preview image (the card that shows when a link is shared on X, LinkedIn, Slack, iMessage…) — through one URL you paste into your code once. After that, everything is managed from your dashboard. You never redeploy to change an image.

How it works

1
Add your site, get a site key
Add your website in the dashboard (Coverage page). It gets a short public key like fx_a1b2c3d4e5. The key isn't a secret — it appears in your HTML.
2
Paste one URL pattern into your site
Point every page's og:image meta tag at your smart URL plus that page's own path:
```
https://og-fox.com/a/fx_a1b2c3d4e5{pathname}

https://og-fox.com/a/fx_a1b2c3d4e5/blog/launch-notes
https://og-fox.com/a/fx_a1b2c3d4e5/pricing
https://og-fox.com/a/fx_a1b2c3d4e5/          ← homepage
```
It always returns a 1200×630 PNG and never 404s — a brand-new page automatically gets an AI-designed card in your brand (on paid sites), with a live screenshot as the instant fallback.
3
Manage everything from the dashboard
Every page that requests an image shows up in Coverage automatically. Prefer full manual control? Swap any page between an AI-designed card and a live screenshot — the URL in your code never changes, so there's nothing to redeploy.

Three ways to install it

🤖 Fastest: hand it to your coding agent

Copy the agent prompt from your dashboard (Coverage → your website → Smart URL card → “Agent prompt” tab) and paste it into Claude Code, Cursor, or any coding agent. It follows og-fox.com/install.md — deterministic instructions written for agents — and wires up every page in your repo.

Add og-fox OG images to this repo. My site key is `fx_a1b2c3d4e5`. Follow the instructions at https://og-fox.com/install.md exactly. When done, list the pages you covered and show one example image URL.

⚡ Next.js: one helper

npm install og-fox

# .env.local
OG_FOX_SITE_KEY=fx_a1b2c3d4e5

// app/blog/[slug]/page.tsx
import { ogMetadata } from 'og-fox/next'

export async function generateMetadata({ params }) {
  const { slug } = await params
  return { title: '…', ...ogMetadata(`/blog/${slug}`) }
}

For static routes, spread ogMetadata() into a static metadata export with the literal pathname.

🌐 Any site: one meta tag

<meta property="og:image"
      content="https://og-fox.com/a/fx_a1b2c3d4e5/about" />
<meta name="twitter:card" content="summary_large_image" />

Add it to each page's <head>with that page's own path. Astro, SvelteKit, Nuxt, and Remix snippets are in the install guide.

Check that it worked

Request your homepage's image directly — you should get a PNG back:

curl -sI "https://og-fox.com/a/fx_a1b2c3d4e5/"
# → HTTP 200, Content-Type: image/png, X-Cache: MISS (then HIT)

The moment a real request comes in, your dashboard badge flips to Live and we email you. From then on, watch pages appear in Coverage as crawlers and shares hit them.

Common questions

What shows for a page I haven’t designed a card for?

On a paid site, a brand-new page gets an AI-designed card in your brand automatically. Until that's ready, we serve a clean live screenshot, so nothing is ever blank. Want full control? Switch any page between an AI card and a screenshot from Coverage — the URL stays the same.

Is the site key a secret?

No. It appears in your public HTML by design, and it can only serve images for pages on your registered domain. It cannot read or change anything.

How fresh are the images?

Rendered images are cached hard (social crawlers love that). Screenshot cards refresh on a 7-day cycle by default; AI cards update the moment you regenerate them; and every page has a "Refresh now" button in the dashboard.

Do I need to list my pages anywhere?

No. Any path on your domain works immediately, and pages register themselves in your dashboard the first time their image is requested. You can also crawl your sitemap from Coverage to see everything up front.

What about query strings like ?utm_source=…?

Ignored by default — every variant of a path gets the same image, and tracking parameters never fragment your cache.

Ready?

Create a workspace — onboarding walks you through brand extraction, picking your card style, an OG audit of your site, and this exact install step.