og-fox

One-line OG image URLs for og-fox — managed social preview images for every page of your site. Pure URL construction: no fetch, no build step, nothing to break.

Install

npm install og-fox

Set your site key (from the og-fox dashboard, Coverage → your website):

# .env.local
OG_FOX_SITE_KEY=fx_a1b2c3d4e5

Next.js (App Router)

// 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 into a static metadata export with the literal pathname.

Anywhere else

import { ogImageUrl } from 'og-fox'

ogImageUrl('/blog/launch-notes')
// → 'https://og-fox.com/a/fx_a1b2c3d4e5/blog/launch-notes'

Full framework-by-framework instructions (Astro, SvelteKit, Nuxt, Remix, plain HTML): https://og-fox.com/install.md

CLI

This package also ships the og-fox CLI for setting up and managing coverage from the terminal. Authenticate once with an API key (create one in the dashboard under Settings → API keys):

npx og-fox login                 # paste your ogfx_… key (or --key / OG_FOX_API_KEY)
npx og-fox init --url https://acme.com   # detect framework, set OG_FOX_SITE_KEY, print the snippet
npx og-fox check /               # fetch the smart URL and report cache status
npx og-fox coverage --fail-on-missing    # print coverage; exit 1 if any page is missing (CI)
npx og-fox refresh /blog/x       # invalidate a page's cached image
npx og-fox sites                 # list your sites and their smart URLs

Config is stored at ~/.og-fox/config.json. In CI, set OG_FOX_API_KEY and OG_FOX_SITE_KEY instead of logging in.

For an MCP server (drive og-fox from Claude Desktop, Cursor, etc.), see og-fox-mcp.