Open Graph Preview - Social Card Simulator

How to use this tool

1. Paste HTML or enter tag values. Paste your page's <head> HTML or enter supported Open Graph and X fields in Manual fields mode.
2. Review checks and cards. Check required tags, approximate character guidance, URL warnings, and the Facebook, X, LinkedIn, Discord, and Slack cards.
3. Copy the generated tags. Review and copy the non-empty OG and Twitter meta tags, then add them to your page's <head>.

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.

Pasted HTML and manually entered tag values are processed in this browser. The tool does not fetch the page URL or upload your input; preview images are requested by your browser from the image URLs you provide.

Essential OG tags

• og:title - the card headline (around 40–60 characters is a soft guide).
• 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.

The live checks flag missing core tags, invalid page or image URLs, and descriptions above approximate Facebook and X display guidance. These character counts are not platform guarantees. The generated HTML block includes non-empty values from the pasted or manual fields and can be copied back into your page's <head>.

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.
• X: review the twitter:card fields and use this local preview as an approximate guide; platform rendering can change.
• 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.