SEO
Open Graph Tags
Meta tags that control how your links look when shared on Slack, LinkedIn, Discord, iMessage, and most social platforms.
medium severityWhat is this?
Open Graph is a protocol (created by Facebook, now universal) that lets you control the preview shown when someone shares your URL. Without OG tags, shared links show as plain text. With them, you get a rich card with image, title, and description.
The four core tags:
<meta property="og:title" content="Your App Name"> <meta property="og:description" content="What it does in one sentence"> <meta property="og:image" content="https://yourdomain.com/og.png"> <meta property="og:url" content="https://yourdomain.com">
Why it matters
- Links shared on Slack, Discord, LinkedIn, iMessage show as a plain URL instead of a rich card
- Dramatically lower click-through. A rich preview with a good image can 2-3x clicks on a shared link
- Looks unprofessional. When you share your app link and it shows no preview, it looks unfinished
How to fix it
- Add the four core OG tags to your
<head> - Create an OG image: 1200×630px PNG works best on all platforms
- Test with: developers.facebook.com/tools/debug or opengraph.xyz
Providers & tools
Dynamic OG image generation:
- Vercel OG (
@vercel/og) - generate images from JSX at the edge, free - Satori - the underlying library, framework-agnostic
- Cloudinary - text overlays on images, URL-based generation
Design tools for static OG images:
- Figma - 1200×630 frame, export as PNG
- og-image.vercel.app - quick generator
Check if your domain has this issue