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

hdply · 2026-07-17

You share your page's link and it shows up as a bare URL with no image, or a broken grey box. Meanwhile other people's links get a nice card with a picture, title and description. The difference isn't luck — it's a handful of <meta> tags called Open Graph, and adding them takes five minutes.

What Open Graph is

Open Graph (OG) is a small set of meta tags that tell Facebook, LinkedIn, Slack, iMessage, Discord and most other platforms how to display your link. When someone pastes your URL, the platform fetches the page, reads these tags, and builds the preview card from them. No tags, no card.

The tags you need

Put these inside the <head> of your HTML:

<meta property="og:title" content="My Portfolio">
<meta property="og:description" content="Designer and front-end developer.">
<meta property="og:image" content="https://your-site.hdply.com/preview.png">
<meta property="og:url" content="https://your-site.hdply.com/">
<meta property="og:type" content="website">

Two rules that trip people up: the og:image must be an absolute URL (starting with https://, not /preview.png), and the image must be publicly reachable. If you host the page on hdply, upload the image alongside the page and reference its full URL.

Getting the image right

Aim for 1200 × 630 pixels — the size platforms crop to. Keep important text away from the edges, and keep the file reasonably small (under a few hundred KB) so the preview loads quickly. A PNG or JPG both work.

Twitter/X cards

X reads OG tags but also supports its own, which give you control over the card style:

<meta name="twitter:card" content="summary_large_image">

With summary_large_image, X shows the big-image card instead of a small thumbnail.

Test before you share

Platforms cache previews aggressively, so if you share first and add tags later, the old blank version can stick around. Add the tags first, then use a preview debugger (Facebook's Sharing Debugger, or opengraph.xyz) to see the card and force a refresh. Once it looks right, share away.