Add Open Graph + Twitter Card tags — Claude Code

When your URL is pasted into Slack, WhatsApp, LinkedIn, or X, the preview card is built from Open Graph tags. Missing tags give you a bare URL with no image — 3-5x lower click rate.

rocket_launch

Fixing this in Claude Code

Anthropic's official terminal coding agent

Claude Code can grep the whole codebase first, plan the change, then edit every affected file. Paste the prompt below into your Claude Code chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for Claude Code

Copy and paste this into your Claude Code chat exactly as-is.

Run Claude Code in the project root and make these exact changes, scanning the whole codebase first:

Add Open Graph tags

1. Add <meta property="og:title">, <meta property="og:description"> and <meta property="og:image"> in <head>.
2. Use a 1200x630 image for og:image and host it under a stable URL.
3. Mirror the same values into Twitter Card meta tags (twitter:title, twitter:description, twitter:image).

Why this matters

Roughly half of the traffic to most SaaS and content sites comes from links pasted into messaging apps, Slack channels, X, LinkedIn posts, and AI chats. Every one of those surfaces renders a preview card. No og:image means no preview, which means people scroll past.

Open Graph is the single format that controls all of these previews. You write it once in the HTML head, and Facebook, LinkedIn, Slack, WhatsApp, Telegram, Discord, and Signal all use it. Twitter/X uses a very similar format (twitter:card) — mirror the OG values and you are done.

AI chat tools (ChatGPT, Claude) also fetch OG tags when rendering a link card in their response. A missing og:image makes your site look abandoned in those surfaces too.

How to use this prompt in Claude Code

1. Open your Claude Code project.
2. Copy the prompt above with the copy button.
3. Paste into the Claude Code chat and send.
4. Review the diff, accept the changes, redeploy.
5. Verify the fix using the checklist below.

Common mistakes to avoid

error_outlineReferencing og:image with a relative URL — many scrapers require absolute URLs.
error_outlineUsing a 1024×1024 square image — LinkedIn and Slack crop it.
error_outlineForgetting to ship the actual image file to /public, so og:image 404s.
error_outlineUsing the same og:image on every page — fine as a fallback, but article pages deserve their own.
error_outlineSetting only og:* without twitter:* — X falls back to OG but the card format is different; cards without `twitter:card` default to a smaller layout.

How to verify the fix worked

check_circlePaste your URL into https://www.opengraph.xyz/ — must render title, description, and a correct 1200×630 image.
check_circleTest on https://cards-dev.twitter.com/validator — must show a summary_large_image card.
check_circlePaste the URL into Slack, LinkedIn, and WhatsApp — each should render the preview.
check_circle`curl -s URL | grep "og:image"` — confirms the tag renders server-side, not after JS.

Frequently asked questions

What is the correct og:image size?expand_more

1200×630 pixels, PNG or JPEG, under 1 MB. This fits LinkedIn, Slack, WhatsApp, and Facebook correctly without cropping.

Do I need both og:* and twitter:*?expand_more

Twitter/X falls back to og:* for most fields, but `twitter:card` must be set to `summary_large_image` to get the big image layout. Mirror them for safety.

Can I auto-generate og:images per page?expand_more

Yes — Next.js has `ImageResponse` for dynamic OG images, and Vercel OG is a common pattern. For static sites, a script that renders a template with the page title works.

Want all 34 prompts tailored to your Claude Code site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related Claude Code prompts

Images