Add Open Graph + Twitter Card tags — Replit

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 Replit

Cloud IDE with Replit Agent

Replit Agent works best when you hand it a precise instruction and a scoped folder. Paste the prompt below into your Replit 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 Replit

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

In Replit, ask the Replit Agent to make these exact changes across the project:

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 Replit

1. Open your Replit project.
2. Copy the prompt above with the copy button.
3. Paste into the Replit 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 Replit 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 Replit prompts

Images