Why your link looks broken when pasted, and the Open Graph tags that fix it
Paste your link into Slack or X and you get an ugly bare URL instead of a rich card. That is a missing-metadata problem, not a platform bug. Here are the handful of Open Graph tags that produce a proper preview, and the one mistake that stops them working.
Last updated June 17, 2026When your link renders as a bare URL instead of a rich card, you are missing Open Graph (OG) tags. Four cover almost everything: og:title, og:description, og:image, and og:url, plus twitter:card to get the large-image layout on X. Every major platform (Slack, X, LinkedIn, Discord, WhatsApp, iMessage) reads these to build the preview. The one mistake that breaks them: putting the tags only in JavaScript-rendered HTML, where the scrapers never see them. They must be in the HTML the server returns.
- A bare-URL link preview means no Open Graph tags. The fix is four meta tags, not a platform setting.
- The core four:
og:title,og:description,og:image,og:url. Addtwitter:card = summary_large_imagefor the big-image card on X. - One set of OG tags serves nearly every platform. X reads its own
twitter:tags first, then falls back to OG. - OG tags must be in the server-rendered HTML. If they only appear after client-side JavaScript runs, the scrapers see nothing and you get a bare URL.
When your link shows up as a bare URL in Slack or X instead of a rich card with an image, you are missing Open Graph tags. It looks like the platform broke, but the platform is doing exactly what it should: it looked for the metadata that tells it how to draw a preview, found none, and fell back to the raw link. The fix is a handful of meta tags in your page <head>. Here are the ones that matter, the single tag X needs, and the one mistake that stops all of them working.
01 · The standardWhat Open Graph is
A small set of <meta> tags, originally from Facebook, that tell any platform how to display your page when its link is shared: the title, description, image, and canonical URL to show in the preview card. Nearly every platform that renders link previews reads them.
Open Graph is the shared language of link previews. When you paste a URL into Slack, X, LinkedIn, Discord, WhatsApp, or iMessage, that platform sends a scraper to fetch your page and read its OG tags, then builds a card from what it finds. One set of tags serves almost all of them, which is what makes this cheap: you write the metadata once, and every platform that matters uses it.
02 · The core four, plus oneThe tags that matter
Four Open Graph tags cover almost every case, plus one X-specific tag for the large-image layout:
<meta property="og:title" content="Pagewatch monitors any webpage for changes" />
<meta
property="og:description"
content="Get an alert the moment any page you care about changes. No code, no manual checking."
/>
<meta property="og:image" content="https://pagewatch.dev/og.png" />
<meta property="og:url" content="https://pagewatch.dev" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />og:title and og:description are the card’s text, og:image is the preview image, and og:url is the canonical link the card points to. og:type is usually website for a product page. The twitter:card tag tells X to use the big-image layout rather than a small thumbnail; without it, X may show a cramped card or none, because summary_large_image has no Open Graph equivalent. Get the image right and you double the card’s impact, which is its own topic worth getting right.
A note on X specifically: it reads its own twitter: tags first and falls back to your OG tags for the title, description, and image. So you do not need to duplicate everything; OG tags plus the single twitter:card line usually produce a clean card on X and everywhere else.
03 · JavaScript-injected tagsThe mistake that breaks all of it
The most common reason correct-looking OG tags still produce a bare URL: the tags are added by client-side JavaScript after the page loads. Social scrapers fetch your raw HTML and do not execute JavaScript, so if your meta tags only exist after hydration, the scraper sees a page with no OG tags at all. The tags must be in the HTML your server returns. This is the same parseability problem that hides JavaScript-rendered content from crawlers, and it bites link previews just as hard.
If you are on a framework that server-renders or pre-renders your pages, your OG tags will be in the initial HTML and this is a non-issue. If your page is a client-rendered single-page app, you need to render the meta tags server-side, or every shared link will fall back to a bare URL no matter how perfect your tags are.
04 · The Findable floorWhere it fits
Open Graph tags are the heart of being shareable, which is the Findable half of getting your page ready: it is on your own site, it takes ten minutes, and it decides whether every link anyone ever shares of you looks like a real product or a broken stub. A bare-URL preview quietly costs you the clicks from exactly the channels a new product depends on, the Slack message, the tweet, the DM.
Before you launch, write the tags, then test the preview so you are not debugging it live in front of an audience. And while you are in the <head>, clear out any default-template metadata that ships with a starter project, because a bare URL and a “Vite App” title come from the same neglected place.
Common questions
og:title, og:description, og:image, and og:url to your page <head>, and the next time someone pastes your link they get a proper preview with a title, description, and image. If you added the tags and it is still bare, they are probably being injected by JavaScript where scrapers cannot see them.twitter: tags but falls back to your OG tags for the title, description, and image if the twitter: ones are missing. The one tag worth adding specifically for X is twitter:card set to summary_large_image, because the big-image layout has no Open Graph equivalent. Otherwise, OG tags alone usually produce a working card everywhere.og:title usually performs better when shared.Get your free launch-readiness score
See what else is between your product and its first real users — Nilkick scores your readiness and hands you the map. Free, no login.
https:// optional · no account · we don't email you
Title tag and meta description for a product no one is searching for yet
When nobody searches your name yet, your title tag should lead with what you do, and your meta description should read like ad copy. Lengths, what Google rewrites, and what to write.
The Open Graph image that actually gets clicks
Your OG image is the biggest element of a shared link card. The specs that matter (1200x630, absolute HTTPS URL), what makes one earn a click, and the mistakes that waste it.
How to test your link preview before you share it anywhere
Before you post your launch, check how your link card renders. The tools to preview it, the caching gotcha that shows a stale card, and the checklist to run first.