SOCIAL PREVIEW

Open Graph checker

Retrieve a public URL to preview approximate share cards for Google, X / Twitter, Facebook, LinkedIn, Slack, and Discord from server-rendered metadata, inspect tag fallbacks, and probe og:image pixel dimensions.

How to check Open Graph and social share tags

To inspect how your webpage's server-rendered metadata translates into social share cards, submit the public URL and review the six platform cards and coverage table.

  1. Enter the full public webpage address (including https://) into the Webpage URL field.
  2. Select Check Social Tags to fetch the initial HTML response and extract <title>, meta[name="description"], og:*, and twitter:* tags.
  3. Compare the six generated cards in Social share previews (Google, X / Twitter, Facebook, LinkedIn, Slack, and Discord), checking the source badge (such as Open Graph, Twitter Card, or HTML fallback), image dimension probe, and truncation warnings on each card.
  4. Expand View metadata coverage at the bottom of the report to verify the exact values returned for all 9 core tags.

Reading your results: Platform fallback chains and limits

Different networks read different meta tags and apply different character caps before truncating titles and descriptions. Open Graph Checker models the exact fallback hierarchy and character thresholds below:

Platform card Title & description fallback priority Image source Title limit Description limit
Google <title> + meta[name="description"] (never uses Open Graph) None (text snippet card) 60 chars 160 chars
X / Twitter 1. twitter:title / twitter:description
2. og:title / og:description (Open Graph fallback)
3. <title> / meta description (HTML fallback)
twitter:image, then og:image 70 chars 200 chars
Facebook 1. og:title / og:description
2. <title> / meta description (HTML fallback)
og:image 150 chars 300 chars
LinkedIn 1. og:title / og:description
2. <title> / meta description (HTML fallback)
og:image 150 chars 300 chars
Slack 1. og:title / og:description
2. <title> / meta description (HTML fallback)
og:image 150 chars 300 chars
Discord 1. og:title / og:description
2. <title> / meta description (HTML fallback)
og:image 256 chars 4,096 chars

Below the cards, View metadata coverage inspects 9 specific fields: <title>, meta description, og:title, og:description, og:image, og:url, twitter:card, twitter:title, and twitter:image. When an image URL is present, your browser probes it with referrerPolicy="no-referrer": the badge starts at Checking image… and updates to the natural pixel dimensions (such as 1200 × 630px) or Image could not be loaded.

Capability boundary: Every card is an approximate preview built from the current server-rendered HTML. This tool does not execute client-side JavaScript and cannot clear cached cards stored on Facebook, LinkedIn, X, Slack, or Discord servers.

Worked example: Diagnosing missing images and Twitter fallbacks

Suppose you publish a blog post with the following server-rendered <head> tags:

<title>How HTTP Caching Works: A Complete Guide for Web Engineers</title>
<meta name="description" content="Understand Cache-Control, ETag, and Vary headers with practical examples." />
<meta property="og:title" content="How HTTP Caching Works — Engineering Guide and Reference Checklist for Production APIs" />
<meta property="og:description" content="Understand Cache-Control, ETag, and Vary headers with practical examples." />
<meta property="og:url" content="https://example.com/http-caching/" />

When you run Open Graph Checker on this URL, the report surfaces three actionable findings immediately:

  1. Text-only social cards: Because neither og:image nor twitter:image is declared, all five social cards display a Text-only preview placeholder and warn: No og:image — facebook preview will be text-only. (and on X: No og:image or twitter:image — twitter preview will be text-only.).
  2. Source fallback on X / Twitter: Because twitter:title is omitted while og:title is present, the X / Twitter card displays the badge Open Graph fallback rather than Twitter Card.
  3. Platform-specific title truncation: The 86-character og:title fits inside Facebook, LinkedIn, Slack (150-character limit) and Discord (256-character limit), but triggers Title may truncate after 70 characters. on the X / Twitter card. Meanwhile, the Google card ignores og:title completely and uses the 58-character HTML <title>, passing with ✓ Metadata fits this platform.
SolViewer Open Graph checker showing share-preview metadata coverage
Example Open Graph report showing multi-platform share cards and metadata coverage.

Why a live Facebook, LinkedIn, or Slack card differs from this preview

When you fix a broken og:image or update an og:title on your server, Open Graph Checker immediately reflects the new HTML because it fetches your origin directly. However, pasting the same URL into Facebook, LinkedIn, X, or Slack may still show last week's image or title. Here is why:

  • Aggressive platform caching: Social networks do not re-fetch your HTML every time a user views a post. The first time a URL is shared, the platform's scraper downloads your metadata and caches the rendered card image on its own CDN for days or weeks.
  • How to force a cache refresh: Once SolViewer confirms your server HTML contains the updated tags, open the official Facebook Sharing Debugger (click Scrape Again) or the LinkedIn Post Inspector to purge their stored snapshot. Another reliable technique when changing an image is to rename the image file or append a version query string (such as og-card-v2.png) so social crawlers treat it as a brand-new asset.
  • Crawler-specific blocks: Slack (Slackbot-LinkExpanding), Facebook (facebookexternalhit), and LinkedIn (LinkedInBot) send different User-Agent headers and originate from different IP ranges. If your CDN WAF or /robots.txt blocks one of those bots, that network will fail to unfurl your card even when the HTML tags are valid.

Common problems and fixes

Resolve common social preview failures with these HTML and server fixes:

  • The image badge says Image could not be loaded.
    Cause: Your og:image URL returns a 404/403 error, points to an expired temporary asset, blocks requests without a Referer header (hotlink protection), or serves an unsupported format.
    Fix: Serve a public HTTPS PNG, JPEG, or WebP image (typically 1200 × 630px for summary_large_image cards) that allows anonymous no-referrer GET requests. See Facebook's Best Practices for Sharing Images:
    <meta property="og:image" content="https://example.com/media/share-card.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta name="twitter:card" content="summary_large_image" />
  • All Open Graph tags show Missing here, but you see them in Chrome Inspect Element.
    Cause: Your frontend framework (such as client-rendered React Helmet or Vue Meta) injects meta[property^="og:"] tags via JavaScript after the page loads in a browser. Social media link crawlers (Facebook, LinkedIn, Slack, Discord, X) do not execute arbitrary page JavaScript when unfurling links.
    Fix: Render all Open Graph and Twitter Card tags on the server (SSR) or at build time (SSG) so they exist in the initial HTTP response.
  • Relative og:image paths fail on external social platforms.
    Cause: Writing content="/images/og.png" instead of a full URL. While SolViewer resolves relative paths against the page URL so you can test the image, the Open Graph protocol strictly requires a full URL with scheme and hostname.
    Fix: Always write absolute https:// URLs in og:image and og:url.
  • The Google card does not show your og:title or og:image.
    Cause: Google Search builds its standard text snippet from <title>, meta[name="description"], and visible page copy rather than Open Graph tags.
    Fix: Keep both your standard HTML metadata and your Open Graph metadata populated. Use SERP Snippet Preview to test pixel truncation for Google search results.

How this check works

Open Graph Checker requests the public URL and parses the returned HTML with DOMParser without executing scripts. It extracts standard HTML metadata, nine Open Graph properties (title, description, image, url, type, site_name, image:width, image:height, and image:alt), and seven Twitter Card properties (card, title, description, image, site, creator, and image:alt).

Each of the six platform cards applies its documented fallback chain and character limits, while the browser loads the resolved preview image with referrerPolicy="no-referrer" to read naturalWidth and naturalHeight. Note that the Open Graph specification defines four required properties for every object—og:title, og:type, og:image, and og:url—and you can verify og:type directly in SEO Checker or View Source.

All URL fetches follow the SolViewer public retrieval limits.

Frequently asked questions

Why is my Open Graph image not showing when I share a link?

The three most common causes are: (1) og:image is injected by client-side JavaScript instead of server HTML, (2) the image URL is relative or blocked by hotlink/firewall rules, or (3) the social platform cached an older version of your page before the image tag was added. Check whether og:image is listed in View metadata coverage and whether the pixel dimensions load on the card.

What is the recommended image size for Open Graph and Twitter Cards?

A 1200 × 630px image (1.91:1 aspect ratio) under 5 MB in PNG, JPEG, or WebP format works cleanly across Facebook, LinkedIn, Slack, Discord, and X (when paired with twitter:card set to summary_large_image).

Do I need to duplicate every Open Graph tag as a twitter:* tag?

No. X / Twitter automatically falls back to og:title, og:description, and og:image when twitter:title, twitter:description, and twitter:image are omitted. Defining <meta name="twitter:card" content="summary_large_image"> alongside your Open Graph tags is sufficient unless you want X-specific copy or images.

Does Open Graph metadata directly improve Google search rankings?

No. Open Graph tags are designed for social networks and messaging apps. Google Search primarily uses <title>, meta[name="description"], visible headings, and structured data rather than Open Graph tags.

Why does Slack show my link preview while Facebook shows a blank card?

Slack unfurls links on demand and follows HTML fallbacks generously, whereas Facebook relies on its cached scrape and enforces stricter image size, MIME-type, and crawler access rules. Run the URL in Facebook's Sharing Debugger to inspect Facebook's exact scraper response.

Related tools

  • SEO Checker — validate og:type, bounded server-side Open Graph image response and dimensions, and full on-page SEO signals.
  • Meta Description Checker — audit your HTML meta[name="description"] pixel width and snippet directives for Google Search.
  • SERP Snippet Preview — test how your title and description truncate in desktop and mobile Google search results.
  • View Source — inspect the raw server HTML to confirm that og:* and twitter:* tags are not trapped inside client-side scripts.

Public URL requests follow the shared fetch limits on the About page.