Open Graph tags are HTML meta tags in the <head> of a page that tell social platforms and messaging apps how to render a link preview, including the title, description, and image. They turn a bare URL into a controlled, clickable share card on LinkedIn, Slack, iMessage, and WhatsApp.
Key Takeaways
- Open Graph tags control the preview card for every share across social and chat apps, making them a free distribution asset.
- Four tags are effectively required: og:title, og:type, og:image, and og:url.
- og:image must be an absolute URL at 1200x630 (1.91:1) and must not sit behind authentication or a scraper-blocking CDN.
- Twitter/X falls back to Open Graph when Twitter Card tags are missing, but you should still declare cards explicitly.
- Broken previews are usually scraper-cache, relative-URL, or client-side-rendering problems, not missing tags.
- Treat each preview as ad creative: the social audience has different intent than the SERP audience.
What Are Open Graph Tags?
Open Graph is a metadata protocol that lets any web page become a rich object in a social graph. You declare it with <meta> tags prefixed with og: inside the document <head>. When a platform's crawler fetches your URL, it reads those tags and assembles a preview card instead of showing a bare link.
The protocol originated at Facebook but is now read broadly. Slack, LinkedIn, WhatsApp, iMessage, Discord, and most link-unfurl systems parse the same og: properties. A minimal implementation looks like this:
<meta property="og:title" content="Open Graph Tags Guide">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/open-graph-tags-guide">
Each tag is a name-value pair. The property attribute names the field and the content attribute provides the value. There is no JavaScript required for the tags themselves; they live in static HTML the crawler receives on first request.
Why Do Open Graph Tags Matter for Marketing Performance?
A share is free distribution, and the preview is its ad creative. When someone posts your link in Slack, LinkedIn, iMessage, or WhatsApp, the card is the only thing most recipients see before deciding to click. A weak or missing preview suppresses click-through on traffic you already earned.
CTR on shared links compounds. One good og:image and og:description can lift engagement across every future share of that URL, with zero marginal cost. That makes preview quality a conversion surface, not a cosmetic detail.
The social audience is different from the search audience. Someone scanning a feed is in browse mode, not query mode, so the copy that wins the click is benefit-led and concrete rather than keyword-matched.
Which Open Graph Tags Are Required?
Four tags are effectively required for a valid preview: og:title, og:type, og:image, and og:url. Without all four, platforms may render a fallback card or no card at all. After those, add og:description, og:site_name, and og:locale to tighten control.
- og:title - the title shown in the card, often distinct from the SEO title tag.
- og:type - the object type, typically "website" or "article".
- og:image - the absolute URL of the preview image.
- og:url - the canonical URL, used for deduplication across shares.
- og:description - one or two sentences of supporting copy.
- og:site_name - the name of your site or brand.
- og:locale - the content language, such as "en_US".
og:type of "article" can carry extra fields like og:article:section and og:article:published_time, but those are optional refinements. Start with the four required tags and the three helpers before adding structured extensions.
What Is the Difference Between Open Graph and Twitter Cards?
Twitter/X reads its own Twitter Card tags first, then falls back to Open Graph when those are absent. They are two protocols with overlapping purpose, and you generally want both declared so each platform renders optimally.
| Dimension | Open Graph | Twitter Cards |
|---|---|---|
| Owner / protocol | Facebook-originated, now broad | X Corp (Twitter) |
| Tag prefix | og: | twitter: |
| Fallback behavior | Primary for most platforms | Falls back to OG if absent |
| Image handling | og:image, single or array | twitter:image, one per card |
| Card types | type is semantic (article, etc.) | summary, summary_large_image |
| Do you need both? | Yes, baseline for all platforms | Yes, for best X rendering |
The practical rule: ship Open Graph as the foundation, then add twitter:card, twitter:title, twitter:description, and twitter:image for X. If you only have time for one, Open Graph covers the wider set of surfaces.
What Image Size Should Og:Image Be?
Use 1200x630 pixels, which is a 1.91:1 ratio and the safe default across LinkedIn, Facebook, and Slack. Platforms will scale down, but they will not reliably upscale a small image, so start at full size.
Mind the constraints. The image URL must be absolute, not relative. Keep the file under roughly 5 MB and prefer JPEG or PNG; some platforms reject very large files or slow-loading hosts. Never gate the image behind authentication or a CDN rule that blocks the platform scraper.
- Minimum useful size is about 600x315, but 1200x630 is the target.
- Absolute URL only:
https://example.com/og.png, never/og.png. - Avoid relying on platform cropping; compose the key content centered.
- Host the image on a fast, scraper-accessible origin or CDN.
A worked example: if your brand block occupies the left 40 percent of a 1200x630 canvas, keep text and logo within the central 720x630 region so LinkedIn's tighter crop still shows them. That arithmetic keeps the message intact across crop rules.
How Do You Write an Og:Title and Og:Description That Earn Clicks?
Write the og:title for the feed, not the search engine. It should be concrete and benefit-led, often shorter and punchier than the SEO title tag because social readers skim fast. Keep it under 60 characters so it is not truncated.
The og:description is your one or two sentence pitch. Lead with the outcome the reader gets, not the topic category. "Cut link-preview debugging from hours to minutes" beats "A guide to Open Graph tags" because it states a result.
Separate the two audiences deliberately. The SERP audience typed a query and expects a match; the social audience landed mid-scroll and expects a reason to care. Reusing the exact SEO title tag for every share leaves clicks on the table.
How Do You Add Open Graph Tags to Your Site?
Add tags at the layout level with per-page overrides driven by the CMS. The sequence below keeps defaults sane while letting specific pages win.
- Inventory your page templates and identify where the
<head>is rendered. - Set default og:title, og:description, og:image, and og:url at the layout or base template.
- Override those defaults per page from CMS fields so blog posts and landing pages differ.
- Generate absolute URLs on the server, including the og:image and og:url, never relative paths.
- Add a dynamic or per-template og:image so each page type gets a relevant card.
- Deploy the change and confirm the tags appear in the initial server HTML.
- Validate with each platform debugger (LinkedIn, Facebook, X, Slack).
- Purge the CDN and page cache so crawlers fetch the updated head on next scrape.
Automate the defaults so new pages inherit correct tags without manual edits. A missing override should fall back to a site-level card, not to a blank preview.
Why Is My Link Preview Not Showing or Showing the Wrong Image?
Most failures are not missing tags but crawler-side caching or render timing. Walk the list below before rewriting anything.
- Platform scraper cache: the crawler stored an old card; rescrape with the debugger.
- Relative URLs: og:image or og:url without a scheme fails silently.
- Blocked crawlers: a robots.txt or CDN rule prevents the scraper from fetching.
- Client-side rendering: tags injected by JS are absent from the initial HTML the crawler sees.
- Redirects that drop tags: a redirect chain can strip or confuse the head.
- Image too large or CDN-blocked: the scraper cannot download the asset.
- Missing og:url: platforms cannot dedupe, so stale cards persist for the same content.
The fastest diagnosis is to fetch the URL with a crawler user agent and inspect the raw HTML. If the tags are present in the static response, the problem is cache or image access, not markup.
How Do You Clear a Cached Link Preview?
Use the platform's own debugger to force a rescrape. LinkedIn, Facebook, and X each expose a tool that re-fetches the URL and refreshes the stored card. Paste the link, trigger the refresh, and wait a few minutes for propagation.
If the card still will not update after a rescrape, cache-bust the image URL as a last resort. Append a version query like ?v=2 to the og:image so the scraper treats it as a new asset, then re-run the debugger. Change the file name rather than only the query string when a CDN aggressively caches by path.
Prevent recurrence by purging the page cache at deploy time and by keeping og:url stable so dedupe works in your favor rather than against you.
Do Open Graph Tags Affect SEO or AI Search?
Open Graph tags are not a direct ranking factor. Search engines do not boost a page because its og:description is well written. Their effect on organic is indirect: better previews raise click-through on shared links, and shared links can earn more backlinks.
For AI search, the picture is different in practice. LLM crawlers and answer engines routinely read page metadata when summarizing a URL, so accurate og:title and og:description reduce misattribution in generated answers. Treat them as a factual summary layer the machines consume.
The safe stance: write og:description to be true, specific, and distinct from the meta description. That serves both human sharers and automated summarizers without gaming any algorithm.
How Should You Handle Open Graph Tags on a Single-Page App?
Server-side render or prerender the document head. Scrapers do not execute JavaScript, so any tags your SPA injects after load will be invisible to the crawler. The initial HTML response must contain the correct og: meta tags.
Use your framework's SSR or static-generation mode to emit per-route heads. In a client-only build, add a prerender step that visits each route and saves the fully rendered HTML, then serve that from the CDN. Validate by fetching the route as a crawler and confirming the tags sit in the static response.
If SSR is not feasible, at minimum render a sensible default head and accept that dynamic per-page cards will be limited. A correct default beats a blank or wrong one.
How Do You Audit Open Graph Coverage Across a Whole Site?
Enumerate your routes from the sitemap or CMS and check each one's rendered head. Script a crawl that requests every URL with a crawler user agent and asserts the four required tags are present and absolute.
- Export the URL list from the sitemap or CMS.
- Fetch each URL and parse the
<head>for og:title, og:type, og:image, og:url. - Flag any relative og:image or missing og:url for fix.
- Spot-check image accessibility from a scraped-user-agent request.
- Report coverage by template so you can fix root causes, not just pages.
Run the audit on a schedule, not once. New templates and CMS fields drift, and a coverage report catches regressions before they reach a share.
Frequently Asked Questions
What Are Open Graph Tags Used For?
Open Graph tags control how a URL renders when shared on social networks and messaging apps. They define the title, description, image, and canonical URL shown in the preview card. Without them, platforms fall back to arbitrary page content, producing low-quality or inconsistent share cards that depress click-through on earned distribution.
Is Og:Image Required for a Link Preview?
og:image is one of the four effectively required tags, alongside og:title, og:type, and og:url. Platforms can render a text-only card without it, but a share without an image loses most of its visual pull in a feed. Always supply an absolute 1200x630 image so the card shows the intended creative rather than a fallback.
Do Twitter Cards Replace Open Graph?
No. Twitter Cards and Open Graph are separate protocols, and X reads Twitter Card tags first but falls back to Open Graph when they are missing. The practical approach is to declare both: Open Graph for the broad set of platforms and Twitter Card tags for optimal rendering on X. Open Graph alone covers more surfaces than Twitter Cards alone.
Why Does My Preview Show an Old Image After I Changed It?
Platform scrapers cache the rendered card, so a changed og:image does not appear until the cache is cleared. Use the platform debugger to force a rescrape, and if that fails, cache-bust the image URL with a version parameter or new file name. Also purge your own CDN and page cache so the crawler fetches fresh HTML on the next request.
Can Open Graph Tags Be Added with Javascript?
They should not be, because social and LLM crawlers do not execute JavaScript. Tags injected client-side after load will be absent from the initial HTML the crawler receives, so the preview falls back or breaks. Render the meta tags server-side or via prerendering so they exist in the static response the scraper downloads.