You share a link in a Slack channel or a LinkedIn post, and instead of your carefully designed page, it shows a stretched, cropped screenshot, the wrong headline, or no image at all. The page itself is fine. What's missing is a small set of meta tags that tell social platforms exactly what to display.
That's what Open Graph tags do. They sit quietly in your page's <head>,
never seen by a visitor browsing the site directly, but read by every platform that turns
your URL into a preview card the moment someone pastes it in.
Open Graph meta tags are <meta> tags in a page's <head>
that control the title, description, and image shown when a link is shared on platforms
like Facebook, LinkedIn, and Slack. The four essentials are og:title,
og:type, og:image, and og:url — add those and
most platforms will render a clean, accurate preview instead of guessing.
What are Open Graph meta tags?
Open Graph is a protocol originally introduced by Facebook so that any web page could describe itself as a rich object — with a title, image, and description — instead of a bare URL. Most major platforms now read the same tags.
- They live in the <head>. Each tag is a
<meta property="og:..." content="...">line, invisible to anyone reading the page normally. - The four core properties.
og:title,og:type,og:image, andog:urlare the minimum set most platforms expect before they'll build a full preview card. - Extras refine the preview.
og:description,og:site_name, andog:image:altaren't mandatory, but they fill in details the platform would otherwise leave blank or guess at. - Platform-specific tags can sit alongside them. Twitter Card tags (
twitter:card,twitter:image) give X finer control, though it falls back to Open Graph data if they're absent.
In short: Open Graph tags are the difference between a link that shows exactly what you intended and one that shows whatever the platform managed to scrape off the page.
Why Open Graph tags matter
These tags are invisible on the page itself, which is exactly why they're easy to skip — and why skipping them has a real, visible cost elsewhere:
- First impressions happen off your site. Most people decide whether to click a shared link based on the preview card alone, before ever landing on your page.
- Broken previews look untrustworthy. A missing image or a title that doesn't match the page reads as a low-effort or even spammy link to a skeptical viewer.
- Every share is free distribution. A well-formed preview makes a shared link function like a small ad, with no ad spend involved.
- Consistency builds recognition. A site whose links always render cleanly starts to feel more established, simply because the preview never looks broken.
og:image — anything much smaller risks the platform downscaling it or
rejecting it from the preview entirely.
Step-by-step: adding Open Graph tags to a page
-
Decide the page's og:type. Use
websitefor most pages andarticlefor blog posts — this tells platforms how to categorize the content. -
Write a dedicated og:title. It can match your
<title>tag, but keep it under roughly 60 characters so platforms don't truncate it awkwardly. - Write an og:description. One or two sentences, under about 155 characters, that describe the specific page — not a generic sitewide summary.
-
Set og:image to a 1200×630 image. Use an absolute URL (starting with
https://), not a relative path, or some platforms will fail to load it. - Add og:url with the canonical page URL. This tells platforms which version of the URL to treat as the source of truth, even if the link was shared with tracking parameters attached.
- Paste the tags into your CMS's head or meta fields. WordPress, Shopify, Webflow, and most builders have a per-page meta or social-preview section built for exactly this.
- Clear the platform's cache and re-check. Run the live URL through Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a fresh scrape and confirm the preview looks right.
Common mistakes to avoid
1. Using a relative path for og:image
A path like /images/cover.jpg works fine in a browser but often fails when a
platform's scraper tries to fetch it — og:image needs a full, absolute URL
including the domain.
2. Reusing one image and title sitewide
Setting the same og:image and og:title on every page means every
shared link looks identical, whether someone shared your homepage or a specific product
page — the preview stops telling the viewer anything useful.
3. Forgetting the cache clears manually
After changing tags on an already-shared page, the old preview persists until it's force-refreshed through the platform's own debugging tool — simply re-uploading the page isn't enough.
4. Skipping og:image:width and og:image:height
Without these, some platforms have to download the image first just to figure out its dimensions before rendering a preview, which can slow down or occasionally break the preview generation.
Real-world examples
How different types of pages typically set up their Open Graph tags:
Each example uses tags scoped to that exact page — none of them rely on a single generic image or description reused across the whole site.
Open Graph vs. other social tags compared
Open Graph isn't the only meta tag standard platforms read. Here's how it compares to the others you'll encounter.
| Tag set | Used by | Controls | Required? |
|---|---|---|---|
| Open Graph (og:*) | Facebook, LinkedIn, Slack, Discord, iMessage | Title, description, image, URL, type | Effectively yes |
| Twitter Cards (twitter:*) | X (Twitter) | Card layout, image, title on X specifically | Optional, falls back to OG |
| Standard meta description | Google Search snippets | Search result description only | Recommended, separate purpose |
| Schema.org JSON-LD | Google rich results | Rich snippets, not social previews | Unrelated to sharing |
Generate your Open Graph tags right now — free
The Rebrixe Open Graph Generator builds a complete, correctly formatted set of tags — title, description, image, type, and URL — ready to paste straight into your page's head. No account, no watermark, nothing to code.