Open Graph Checker & OG Image Preview
When someone shares your link, the image, title, and description that pop up aren't chosen by the social network — they come from “Open Graph” tags in your page's code. Get them wrong and your link shares as a blank box or the wrong image, which kills clicks. This tool renders how your page will actually appear on Facebook, LinkedIn, and X so you can fix it before it goes out.
How to use
- Paste your page URL into the URL field and click Fetch.
- Wait for the status bar to show Fetched — the tool reads your live page's
<head>and extracts all OG and Twitter tags. - Your OG Score appears at the top of the output — a percentage from 0 to 100 based on how many criteria are met.
- Scroll through the five platform previews: Facebook, X (Twitter), LinkedIn, WhatsApp, and Slack. Each renders the title, description, image, and domain the way that platform actually displays share cards.
- Use the Copy Tags button to copy a ready-to-paste block of optimised OG meta tags for your page's
<head>.
How it works
Clicking Fetch calls the /api/page-meta endpoint. The server fetches your URL, parses the HTML <head>, and returns all Open Graph and Twitter Card meta tag values along with the fallback <title> and <meta name="description"> for use when OG tags are absent.
The scoring engine then evaluates 11 criteria:
| Criterion | Points |
|---|---|
og:title present |
10 |
og:description present |
10 |
og:image present |
15 |
og:type present |
5 |
og:url present |
5 |
twitter:card present |
10 |
twitter:title present |
10 |
twitter:description present |
10 |
og:site_name present |
5 |
| Title within 70 chars | 10 |
| Description within 200 chars | 10 |
The five platform preview cards are rendered client-side using the fetched values, with each platform's known layout constraints applied (card aspect ratio, font size, character truncation points).
Worked example
URL fetched: https://github.com
| Tag | Value |
|---|---|
og:title |
GitHub · Build and ship software |
og:description |
GitHub is where over 100 million developers … |
og:image |
https://github.githubassets.com/images/modules/site/social-cards/homepage.png |
og:type |
website |
twitter:card |
summary_large_image |
OG Score: 95 / 100 — all major tags present, title and description within limits.
The Facebook preview renders the large hero image with the og:title in bold below it. The X preview uses the same image with a smaller title overlay. LinkedIn shows title, description, and domain. WhatsApp shows a small left-side thumbnail. Slack shows title, description, and a small image icon.
Reference: per-platform limits
| Platform | Image ratio | Title chars | Description chars |
|---|---|---|---|
| 1.91:1 (1200 × 628 px) | ~100 | ~300 | |
| X (Twitter) | 2:1 (1200 × 600 px) | ~70 | ~200 |
| 1.91:1 | ~70 | ~150 | |
| Thumbnail (square crop) | ~80 | ~200 | |
| Slack | Thumbnail | ~80 | ~150 |
Tips for better share cards
- Add an og:image on every page. A missing image causes most platforms to show a plain text card — dramatically lower click-through.
- Keep og:title under 70 characters. At that length it displays without truncation on all five platforms.
- Write og:description under 150 characters for safe display across all platforms.
- Set og:type to
websiteorarticle— many CMS-generated pages omit this tag and lose structured rendering on some platforms. - Use an absolute URL for og:image (starting with
https://). A relative path will not resolve correctly when the social platform fetches it from its own servers. - Test after every significant page update. Platforms cache OG data; use their official cache-busting tools after any change.
Common OG implementation mistakes
Relative URL for og:image. Setting og:image to a path like /images/hero.jpg instead of https://example.com/images/hero.jpg is the most common reason share cards show no image. When a social platform fetches the image, it makes a direct HTTP request from its own servers — there is no base URL context, so the relative path resolves to nothing. Always use an absolute HTTPS URL.
Wrong og:type for article pages. Most CMS-generated pages default to og:type = website. For blog posts and news articles, set og:type = article and add the supplementary article:published_time, article:author, and article:section properties. Facebook and LinkedIn use these to add "Published on…" metadata to the share card, improving click-through.
og:image too small. An image smaller than 600 × 315 px is treated as a thumbnail by Facebook and will not render as a large card. Images below 200 × 200 px may be ignored entirely. The tool's platform-limit table shows the recommended 1200 × 630 px target; use this as your standard.
Stale og:image after a redesign. The og:image URL often points to an old image long after the page has been redesigned. The OG Preview tool fetches the live URL and shows the current image — run it after every significant visual update to confirm the cache-busted image URL is correct.
Forcing a cache refresh
After updating OG tags, social platforms continue serving the cached version for hours or days. To force a refresh:
- Facebook / Instagram: Use the Sharing Debugger and click "Scrape Again".
- LinkedIn: Use the Post Inspector and click "Inspect".
- X (Twitter): The Card Validator at cards-dev.twitter.com/validator re-fetches on each use.
- WhatsApp: Add a query string to the URL (e.g.,
?v=2) to give it a new cache key — WhatsApp treats the URL with the query string as a distinct resource.
The OG Preview tool always fetches fresh data on each run, so it shows what the platform would see after a cache clear.
Sources
- The Open Graph Protocol — ogp.me
- Meta for Developers — Sharing Debugger
- LinkedIn Marketing Solutions — Post Inspector
- Twitter Developer Platform — Card Validator
Last updated: October 2026
Frequently Asked Questions
- What is Open Graph?
- Open Graph (OG) is a protocol originally created by Facebook that controls how URLs appear when shared on social networks. Tags like og:title, og:description, and og:image define the title, text, and image shown in a link preview card.
- Why does my preview look different from what the tool shows?
- Social platforms cache OG data aggressively. After updating your tags, use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a cache refresh. The tool always fetches fresh data; the platform may serve a cached version for days.
- What image size should I use for og:image?
- The recommended size is 1200 × 630 px (1.91:1 aspect ratio). Facebook and LinkedIn crop to this ratio. X (Twitter) with summary_large_image shows approximately 1200 × 628 px. WhatsApp and Slack scale the image down to thumbnail size.
- What is the OG Score?
- The OG Score is a 0–100 percentage based on 11 criteria: presence and length of og:title, og:description, og:image, og:type, og:url, twitter:card, twitter:title, twitter:description, plus the site-name and image dimensions where detectable.
- Does the tool work on pages that require login?
- No. The server fetches your URL as an anonymous visitor. Pages behind authentication will return the login page rather than the actual content. Test using the public-facing URL.
- What is the difference between og:title and the page title?
- The page title (in the <title> tag) is what Google shows in search results. og:title is what social networks show in share cards. They can differ — og:title is often shorter and more punchy, without the site-name suffix.
- Why does the WhatsApp preview look different from Facebook?
- WhatsApp renders images as small thumbnails rather than large cards, and it applies its own character limits for title and description. The tool shows platform-specific rendering for each of the five networks.
- Can I test a URL that is not yet live?
- No — the server must be able to reach the URL. For pre-launch testing, you can paste the expected tag values directly into the raw-tags input and preview them without a live URL.