How to Make Your Link Look Good When Shared (OG Images)

hdply · 2026-08-15

You paste your link into Slack, and instead of a title and a picture you get a bare grey rectangle with a URL in it. Meanwhile everyone else's links show a headline, a description and an image. The difference is four meta tags, and adding them takes about two minutes.

What's happening when you paste a link

Chat apps and social platforms fetch your page with their own crawler and read the <head> looking for Open Graph tags — a small convention originally from Facebook that everyone now uses. No tags, nothing to show. Two consequences follow from "their own crawler":

The crawler doesn't run your JavaScript. Tags injected by a script generally won't be seen — they must be in the HTML you serve.
Previews are cached, sometimes for a long time. Fix your tags after sharing a link and the old preview can persist until the platform refreshes it.

The four tags that matter

<meta property="og:title" content="Maria Chen — Product Designer">
<meta property="og:description" content="Portfolio of interface and brand work, 2019–2026.">
<meta property="og:image" content="https://images.example.com/preview.png">
<meta property="og:url" content="https://maria.hdply.com/">

Three more are worth adding while you're there:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Maria Chen">
<meta name="twitter:card" content="summary_large_image">

That last one is what turns a small thumbnail into a full-width image card on X, and several other apps respect it too. Without it you get the cramped version.

Do I need separate Twitter tags?

Mostly no. X falls back to the og: tags for title, description and image, so twitter:card is usually the only one you need to add.

The image rules, which are where it goes wrong

The URL must be absolute. content="preview.png" fails; it has to start with https://. This is the single most common mistake.
Data URIs don't work. Crawlers require a real fetchable URL, so you cannot embed the preview image in the page the way you can embed an <img>.
Use 1200×630. That's the ratio these cards are designed around; other sizes get cropped unpredictably. Minimum useful width is about 600px.
Keep it under about 1 MB. Some crawlers give up on large files, and you get no preview rather than a slow one.
PNG or JPEG. WebP and SVG support is inconsistent across platforms; this is not the place to be modern.
The image must be publicly reachable. No login, no noindex-style blocking, no hotlink protection.

Where to put the image if your host serves one file

On a single-file host like hdply there's nowhere to upload preview.png alongside your HTML, and a data URI won't do. Options, in order of how well they hold up:

An image host or CDN you control — Cloudinary, ImageKit, an S3 bucket, or your company's existing asset domain.
A GitHub repository's raw file URL. Free and stable enough for a personal page.
A generated card service that renders an image from a URL's parameters.

Whichever you pick, make sure it's a URL you'll still control in a year. A broken og:image is a broken preview forever.

Designing the card itself

The image is usually displayed small, often 400px wide in a chat sidebar. Design for that:

Large type — a headline you can read at a glance, not a paragraph.
High contrast. It'll sit on both light and dark chat backgrounds.
Keep important content away from the edges; different platforms crop differently.
Don't repeat the title text verbatim — the title is already shown beside the image.

A complete head section

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Maria Chen — Product Designer</title>
  <meta name="description" content="Portfolio of interface and brand work, 2019–2026.">

  <meta property="og:type" content="website">
  <meta property="og:url" content="https://maria.hdply.com/">
  <meta property="og:title" content="Maria Chen — Product Designer">
  <meta property="og:description" content="Portfolio of interface and brand work, 2019–2026.">
  <meta property="og:image" content="https://images.example.com/preview.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta name="twitter:card" content="summary_large_image">
</head>

Declaring width and height lets platforms lay out the card before the image finishes loading, which avoids a flash of the small format.

Test before you share

Don't discover a broken preview by posting it. Every major platform has a debugger that fetches your page and shows what it sees — Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator. Each also has a "scrape again" action that clears the cached preview, which is how you fix a link you already shared.

The quickest local test: paste the URL into a message to yourself in whatever app you'll actually be sharing in.

Common questions

I fixed the tags but the old preview is still showing. That's the cache. Run the platform's debugger and re-scrape. If a platform has no debugger, adding a query string (?v=2) forces it to treat the link as new.

My preview works on one app and not another. Different platforms have different rules — usually image size or format. Check the tags with each one's validator.

Do these tags help SEO? Not directly; search ranking doesn't use Open Graph. But a link that shows a proper card gets clicked and shared more, and that traffic is real. See the meta tags guide for the ones that do affect search.