Set up og-fox in two minutes

How it works

1. 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. 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 gets an automatic screenshot card until you design something better.

3. 3

   Manage everything from the dashboard

   Every page that requests an image shows up in Coverage automatically. Swap a page to a designed template, edit its copy, or refresh its screenshot — the URL in your code never changes, so there's nothing to redeploy.

Three ways to install it

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.

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}`) }
}

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

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.