Toolcroft

SEO & Marketing

Open Graph Preview - Social Card Simulator

Preview how your page looks when shared on Facebook, X (Twitter), LinkedIn, Discord, and Slack. Paste your page HTML or fill in the fields manually. No network requests.

Your inputs are saved in this browser only. No data is ever sent to a server, and saved values won't be visible in other browsers or devices.

example.com

Example Page Title

This is a description for social sharing.

What are Open Graph tags?

Open Graph (OG) tags are meta tags in your page's <head> that tell social platforms how to display your content when it is shared as a link. They were originally created by Facebook but are now used by every major platform including X, LinkedIn, Discord, and Slack.

Essential OG tags

  • og:title - the card headline (up to ~60 characters).
  • og:description - the supporting text below the headline.
  • og:image - the thumbnail image. Use at least 1200 × 630 px at a 1.91:1 ratio for best results.
  • og:url - the canonical URL for this content.

Twitter Card tags

X (Twitter) uses its own twitter:* tags. If they are absent, it falls back to the OG equivalents. Set twitter:card to summary_large_image for a full- width image card, or summary for a thumbnail beside the text.

Validation and debugging tools

After adding OG tags, social platforms cache the scraped data. Use these tools to validate and force a re-scrape:

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug - scrapes your page and shows which OG tags were found. Use "Scrape Again" to clear the cache.
  • Twitter Card Validator: cards-dev.twitter.com/validator - validates twitter:card tags and shows the card preview.
  • LinkedIn Post Inspector: linkedin.com/post-inspector - shows how LinkedIn reads your OG tags and clears its cache.
  • WhatsApp: preview updates automatically for new links; old links may remain cached in individual chats.

Article-specific OG tags

When og:type is set to article, additional tags become available and are recognized by Facebook, LinkedIn, and some aggregators:

  • article:author - URL of the author's profile page.
  • article:published_time - ISO 8601 date (e.g., 2024-01-15T12:00:00Z).
  • article:modified_time - last update date.
  • article:section - the section or category of the article.
  • article:tag - one or more topic tags (use one tag per meta element).

These tags help news aggregators and article-sharing platforms surface content in topic feeds.

Structured data vs. Open Graph tags

OG tags and JSON-LD structured data serve different purposes and should both be implemented:

  • OG tags: control how your page appears as a link preview on social networks (Facebook, X, LinkedIn, Discord, Slack). They affect the card image, title, and description.
  • JSON-LD structured data: tells Google's crawler about the semantic meaning of your content (Article, Product, Recipe, Event, etc.). This powers Google Search rich results, featured snippets, and the knowledge graph - not social cards.

Both can share the same title and description values, but they are read by different systems for different purposes.