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 — including, increasingly,
Google Discover and AI answer engines that summarize your page before anyone clicks it.
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, plus
an image at least 1200 pixels wide, and most platforms (including Google Discover) 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.
What a broken vs. fixed preview looks like
This is the actual, visible difference Open Graph tags make. Same page, same content — one has tags, one doesn't.
Without tags, the platform scrapes whatever it can find — often the page's raw
<title>, the first paragraph of body text, and no image, or the wrong
one. With tags in place, every field is deliberate.
Every Open Graph tag, explained
A quick reference for what each property actually does and whether you need it.
<title>
tag, but keep it under ~60 characters or platforms will truncate it.
Required
article for blog posts,
website for most other pages, product for e-commerce listings.
Required
https://), ideally
1200×630px.
Required
og:image:height
og:image. Without these, some platforms
download the image first just to measure it, which can delay or break the preview.
Recommended
<meta name="robots" content="max-image-preview:large">
is what allows Google Discover to show your image at full card size instead of a small thumbnail.
Recommended
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.
- Discover and AI answer engines read the same tags. Google Discover pulls og:title and og:image to build feed cards, and AI tools that summarize or cite pages often lean on the same fields to describe what a page is about.
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.
- Add the robots max-image-preview tag. This single line is what unlocks the large image card in Google Discover — without it, Discover may skip a large image entirely even if og:image is set correctly.
- 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.
Open Graph tags in practice: real examples
Descriptions only go so far. Here are three complete, real tag sets for common page types — copy the structure, swap in your own content.
<meta property="og:title" content="10 Sourdough Mistakes Beginners Make">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/sourdough-og.jpg">
<meta property="og:url" content="https://example.com/blog/sourdough-mistakes">
<meta property="og:description" content="The most common sourdough failures and exactly how to fix each one.">og:type is article, not
website, because this is a single piece of timestamped content, not a
hub page — some platforms use this to decide whether to show an author or publish
date alongside the preview. The title is specific and matches user search intent
("sourdough mistakes"), not a generic site tagline.
<meta property="og:title" content="Aeron Task Chair — Herman Miller">
<meta property="og:type" content="product">
<meta property="og:image" content="https://example.com/images/aeron-chair-front.jpg">
<meta property="og:url" content="https://example.com/products/aeron-task-chair">
<meta property="product:price:amount" content="1395.00">
<meta property="product:price:currency" content="USD">og:type is product,
which unlocks extra properties like product:price:amount — platforms that
support rich commerce previews can show price directly in the card. The image is a
clean, on-white product shot, not a lifestyle photo, since it needs to read clearly at
thumbnail size.
<meta property="og:title" content="Rebrixe — 500+ Free Tools, No Signup">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/images/site-og-cover.jpg">
<meta property="og:url" content="https://example.com/">
<meta property="og:site_name" content="Rebrixe">og:type reverts to website
here since the homepage represents the whole site, not one article or product.
og:site_name is set explicitly rather than left to platform guesswork,
since it's the one page where brand identity matters more than a specific headline.
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.
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.
Open Graph vs. other social tags compared
Open Graph isn't the only meta tag standard platforms read. The short version: use Open Graph for social sharing, Schema for search rich results — they solve different problems and neither replaces the other.
| Tag set | Used by | Needed? |
|---|---|---|
| Open Graph (og:*) Controls title, image, description for shares |
Facebook, LinkedIn, Slack, Discord, iMessage | Yes — add to every page |
| Twitter Cards (twitter:*) Fine-tunes the card layout on X |
X (Twitter) | Optional — falls back to Open Graph |
| Meta description Search result snippet text |
Google Search | Yes, but for SEO — not sharing |
| Schema.org (JSON-LD) Powers rich results, not preview cards |
Google rich results | No — different purpose entirely |
In practice: set Open Graph tags for how links look when shared, a meta description for how the page looks in Google search results, and Schema markup separately if you want rich results like star ratings or FAQ dropdowns. They can all coexist on the same page.
Found this useful in your own writing or documentation? Feel free to link back — here's a ready-made citation:
Rebrixe. "Open Graph Meta Tags: The Complete Guide." Rebrixe.com, 2026. https://rebrixe.com/blogs/open-graph-meta-tags-guide
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.