Vercel builds

Vercel runs your build script and serves the output folder. Add Headlark to that script and the HTML Vercel deploys already has its SEO tags.

1. Install

npm i -D headlark

2. Run it on production builds

// package.json
"scripts": {
  "build": "vite build && if [ \"$VERCEL_ENV\" = production ]; then headlark dist --site-url https://example.com; fi"
}

Vercel sets VERCEL_ENV during the build. Limiting Headlark to production keeps preview deploys from writing canonicals that point at your live domain, and from using your plan's rewrites. Swap vite build and dist for your framework: astro build and dist for Astro, next build and out for a Next.js static export.

3. Add your key

Project → Settings → Environment Variables: add HEADLARK_KEY with your site's secret key from the dashboard, for the Production environment.

Good to know