Social share cards for every platform

Paste into any coding agent: Claude Code, Cursor, Codex, Copilot, Windsurf or Cline.

# Social share cards for every platform

On launch day, links to the production site will be shared on X, LinkedIn, Slack, Discord, Reddit and in messages. A link with no image or the wrong title gets far fewer clicks. Give every public page a correct share card, generated from the page's own title and description so new pages get one automatically.

Site: not given. Find the production URL in the project config, or ask me.

## Ground rules

1. Read before you write. Explore the parts of the codebase this job touches and tell me what is already in place.
2. Plan, then stop. Give me a numbered plan: what you will change, in which files, and why. Wait for my approval before editing anything.
3. Fix things at their source (the shared layout, the config, the generator), not with one-off patches page by page.
4. Keep the project's conventions: its framework APIs, file layout, naming and code style. Add no new dependency without asking.
5. Where something is already done well, say so and leave it alone.

## You will not

- Edit `.env` files, secrets or API keys, or print their values.
- Deploy, push, merge or publish anything.
- Delete data, or run migrations or scripts against a production database.
- Add tracking, third-party scripts or links to any site I did not ask for.
- Change copy, design or behaviour that this job does not need.
- Change the site's visual design or logo.

## Your stack

- Framework: Work out the framework, router and build output from the project files (package.json, lockfiles, framework config) before planning, and say which you found.
- Host: Work out where the site is hosted from the config files (vercel.json, netlify.toml, wrangler config, Dockerfile, fly.toml) and say which you found.

## Steps

### 1. Audit the current tags

Find where `og:` and `twitter:` tags are set. For the homepage, pricing, and one page of each dynamic type (a blog post, a product page, a profile), list what each tag would be. Flag pages that inherit the homepage's card by mistake: that is the most common bug.

### 2. Set the full tag set from one place

Every public page needs, built from the page's own data in the shared metadata helper:

- `og:title`, `og:description`, `og:url` (the canonical URL), `og:type` (`website`, or `article` for posts), `og:site_name`, `og:image` with `og:image:width`, `og:image:height` and `og:image:alt`;
- `twitter:card` set to `summary_large_image`, plus `twitter:title`, `twitter:description` and `twitter:image` (the same image), and `twitter:site` if there is an X account.

Use absolute URLs for images: many crawlers ignore relative ones.

### 3. An image for every page

Images should be 1200 x 630 pixels, under about 5 MB (smaller is better), PNG or JPEG, with the important text away from the edges. Static pages can use designed images; dynamic pages (posts, products) should get a generated image with the title on it, using the framework's image generation if it has one (for example `ImageResponse` in Next.js) or a build step. Keep one good default for pages without their own.

### 4. Check the crawlers can fetch it

Make sure image URLs return 200 with the right `Content-Type` and are not blocked by robots.txt, auth or bot protection, and that pages send the tags in the server HTML (share crawlers do not run JavaScript).

## Done means

- [ ] Every public page has its own og:title, og:description, og:url and og:image with dimensions and alt text.
- [ ] Every page has a summary_large_image X card using the same image.
- [ ] Dynamic pages get a generated image with their own title.
- [ ] Image URLs are absolute, return 200 and are not blocked to crawlers.

## Report back

When you finish, give me:

- what you changed, file by file;
- anything you skipped, and why;
- anything I must do by hand (DNS records, dashboards, accounts, deploys);
- how to check each change on the live site.