Every time someone copies a URL into Facebook, LinkedIn, Slack, or WhatsApp, those platforms fetch the page and look for a set of special HTML tags — Open Graph meta tags. These tags tell social platforms exactly what title, description, and image to display in the preview card. Without them, the platform has to guess, often producing broken or misleading previews that hurt click-through rates.
Open Graph was introduced by Facebook in 2010 to create a standard protocol for turning ordinary web pages into rich, shareable objects. The idea was simple: embed structured metadata directly in the <head> of a page so that any application — not just Facebook — can read it without scraping or inferring content. Today, virtually every major platform respects OG tags, from LinkedIn and Pinterest to Telegram and Discord.
For developers, marketers, and SEO professionals, understanding and correctly implementing Open Graph tags is one of the highest-leverage, lowest-effort improvements you can make to a site. A well-crafted OG setup can dramatically increase the share rate and visual impact of your content when it spreads across social networks.
How Open Graph Works
The Open Graph protocol is built on top of standard HTML <meta> tags placed inside the <head> section of a page. Instead of the usual name attribute, OG tags use a property attribute prefixed with og:. When a user shares a URL, the receiving platform sends a crawler to fetch the page HTML, parses these tags, and uses the values to build the preview card.
Here is what a minimal but complete Open Graph implementation looks like:
<head>
<meta property="og:title" content="How to Bake Sourdough Bread" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/sourdough" />
<meta property="og:image" content="https://example.com/img/sourdough.jpg" />
<meta property="og:description" content="A step-by-step guide to baking a perfect sourdough loaf at home." />
<meta property="og:site_name" content="Example Blog" />
</head>
The protocol is completely declarative — there is no JavaScript required, no server-side handshake, no API key. The crawler reads the static HTML and extracts the values it needs. This simplicity is a large part of why Open Graph became the de facto standard.
The Essential Open Graph Tags
The Open Graph protocol defines dozens of possible properties, but in practice six tags cover the vast majority of use cases. The first four (og:title, og:type, og:image, og:url) are considered required by the spec; the rest are strongly recommended.
| Tag | What it does | Example value | Notes |
|---|---|---|---|
| og:title | The title of the page as it should appear in the social preview card | How to Bake Sourdough Bread |
Keep under 60 characters to avoid truncation |
| og:description | A short description that provides context below the title in the preview | A step-by-step guide to baking a perfect sourdough loaf at home. |
Recommended 155–200 characters |
| og:image | The URL of the image that appears in the preview card thumbnail | https://example.com/img/sourdough.jpg |
1200×630 px recommended; absolute URL required |
| og:url | The canonical URL of the page — the "permanent" address | https://example.com/sourdough |
Helps platforms deduplicate shared links |
| og:type | The object type of the page (article, website, video, product, etc.) | article or website |
Defaults to website if omitted |
| og:site_name | The name of the overall site (not the specific page title) | Example Blog |
Displayed in smaller text below the main title on some platforms |
For articles, you can also add og:article:published_time, og:article:author, and og:article:section to enable richer display in news aggregators. For e-commerce, the product type unlocks price and availability fields.
Open Graph Image Requirements
The og:image tag is the single most impactful element of your Open Graph setup. A compelling, correctly-sized image can double or triple the click-through rate of a shared link compared to a broken or missing preview.
Recommended dimensions
- Ideal size: 1200×630 pixels (aspect ratio 1.91:1)
- Minimum size: 600×315 pixels — smaller images may not display as a large card on some platforms
- Square fallback: 1200×1200 pixels works well for Instagram and WhatsApp previews
Formats and file size
- Use JPEG for photographs and PNG for graphics with text or transparency
- Keep file size under 8 MB (Facebook's hard limit); aim for under 1 MB for fast loading
- WebP is supported by some platforms but not all — JPEG/PNG are safer choices
Common image mistakes
- Using a relative URL:
og:imagemust be an absolute URL including the protocol (https://) - Hot-linking protected images: If your CDN blocks external scrapers, the platform crawler cannot download the image
- Text too close to edges: Some platforms crop images differently — keep critical content in the central 80% of the frame
- Not updating the cache: Facebook caches OG images aggressively; use the Facebook Sharing Debugger to force a re-scrape after updates
How to Check Open Graph Tags on Any Website
Before publishing or after making changes, you should always verify that your Open Graph tags are present, correctly formatted, and pulling the right image. There are several ways to do this.
The fastest method is to use URL Summary, a free tool that fetches any URL and instantly displays all its Open Graph tags alongside SEO metadata, Twitter Card data, and social media links. You can see the exact values a social platform crawler would receive — no browser extension or developer tools required.
Paste any URL into urlsummary.echovalue.dev to instantly inspect its Open Graph tags, og:image preview, Twitter Card data, and full metadata — all in one view.
Platform-specific debuggers are also useful when you need to verify how a specific network will render your preview:
- Facebook: Facebook Sharing Debugger — also lets you clear the cache
- LinkedIn: LinkedIn Post Inspector
- Twitter/X: Twitter Card Validator
Open Graph vs Twitter Cards
Twitter (now X) developed its own metadata system called Twitter Cards, which uses twitter: prefixed tags rather than og:. The functionality largely overlaps, but there are key differences:
| Feature | Open Graph | Twitter Cards |
|---|---|---|
| Primary platform | Facebook, LinkedIn, Slack, Discord, WhatsApp… | Twitter / X |
| Attribute prefix | og: (via property attribute) |
twitter: (via name attribute) |
| Card layout control | Limited — platform decides the card style | Explicit — choose summary, summary_large_image, app, player |
| Fallback behavior | No fallback (either present or absent) | Falls back to OG tags if Twitter tags are missing |
The practical recommendation: implement both. The Twitter-specific tags are only a few extra lines of HTML, and having them ensures the best possible display on every platform. Twitter's fallback to OG tags works reasonably well, but setting twitter:card to summary_large_image explicitly triggers the larger card format that shows your image prominently instead of as a small thumbnail.
/* Twitter Card tags — add alongside your OG tags */
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Bake Sourdough Bread" />
<meta name="twitter:description" content="A step-by-step guide to baking a perfect sourdough loaf." />
<meta name="twitter:image" content="https://example.com/img/sourdough.jpg" />
Common Open Graph Mistakes
Even experienced developers make these mistakes. Auditing your site for them takes only a few minutes and can have an immediate positive impact on social sharing performance.
- Missing og:image entirely — The most common issue. Without an image, most platforms show only a tiny text card or no preview at all.
- Using the same OG tags on every page — Each page should have unique
og:title,og:description, andog:url. Generic site-wide tags reduce relevance and click-through. - og:url pointing to the wrong page — Using your homepage URL for every page confuses platforms that try to aggregate shares and can break like counts.
- Image is too small or wrong aspect ratio — Images below 600×315 px often render as tiny thumbnails instead of large cards. Facebook may refuse to display them at all.
- og:description duplicating the page title — The description should add context, not repeat the title. Use it to explain the value or hook of the content.
- Forgetting to invalidate the social cache — After fixing OG tags, old previews may persist for days on Facebook and LinkedIn until you use their debugging tools to force a re-scrape.
- Blocking crawlers with authentication or JavaScript rendering — Social platform crawlers do not execute JavaScript. If your OG tags are injected by a JS framework (SPA) at runtime rather than in the initial HTML response, crawlers will not find them. Use server-side rendering or static HTML for meta tags.
Frequently Asked Questions
Open Graph is a protocol originally created by Facebook that allows any web page to become a rich object in a social graph. By adding OG meta tags to your HTML, you control exactly how your page title, description, and image appear when someone shares your URL on platforms like Facebook, LinkedIn, Slack, or WhatsApp. Without OG tags, platforms guess the content — often poorly — which hurts engagement and click-through rates.
The four basic Open Graph tags required for a valid OG implementation are og:title, og:type, og:image, and og:url. Without these, social platforms will fall back to scraping your page content directly, often with poor results. Adding og:description and og:site_name is strongly recommended to complete the preview.
The recommended og:image size is 1200×630 pixels with an aspect ratio of 1.91:1. Images should be at least 600×315 pixels to display correctly, but 1200×630 is preferred for high-resolution screens. Keep file size under 8 MB and use JPEG or PNG format. Always use an absolute URL — relative paths are not supported.
Yes, for full coverage you should implement both. Twitter has its own set of meta tags (twitter:card, twitter:title, etc.) that take precedence on Twitter/X. However, Twitter will also fall back to Open Graph tags if Twitter Card tags are absent, so OG tags alone provide partial Twitter support. Adding the Twitter-specific tags takes only 4–5 extra lines and enables explicit control over the card format (e.g., summary_large_image).
Start Checking Your Open Graph Tags
Open Graph tags are a small investment with a large return. A few lines of HTML in your <head> determine whether your content looks polished and compelling or broken and generic when shared across social media. Once correctly implemented, they work automatically for every share of every page — no ongoing maintenance required.
The checklist is straightforward: ensure every page has a unique og:title, a descriptive og:description, a correctly-sized og:image at an absolute URL, and the correct og:url. Add Twitter Card tags for complete platform coverage and verify your implementation with a dedicated inspection tool before and after any changes.
Inspect Any Page's Open Graph Tags — Free
URL Summary fetches any URL and displays all its OG tags, Twitter Card data, SEO metadata, and more in one clean report. No signup required.
Analyze a URL now