WebToolX

Command Palette

Search for a command to run...

SEO Tools

Open Graph Preview

Generate Open Graph and Twitter Card meta tags and preview exactly how your page will appear when shared on Facebook, LinkedIn, X and Slack.

0 / 60
0 / 155

Social card preview

Image URL will appear here

example.com

Your page title

Your page description will appear here.

Generated meta tags

<meta name="twitter:card" content="summary_large_image" />

What are Open Graph meta tags?

When someone shares a link on Facebook, LinkedIn, Slack or iMessage, the platform scrapes your page and displays a rich preview card — image, title and description — pulled from <meta property="og:*"> tags in the <head>. Without these tags, platforms fall back to guessing from page content, often with poor or missing images and truncated titles.

How to use this tool

  • Fill in your page title, description, canonical URL and image URL.
  • The social card preview on the right updates instantly, showing exactly how your link will look when shared.
  • Click Copy tags to copy the full block of og: and twitter: meta tags, then paste them into your HTML <head>.

og: vs twitter: — which do you need?

Open Graph (og:*) is the universal standard used by Facebook, LinkedIn, Slack and dozens of other platforms. X (Twitter) defined its own twitter:* properties but falls back to OG values when its own tags are missing. Generating both ensures the richest card on every platform. This tool outputs both sets in a single click.

Image sizing tips

Facebook and LinkedIn recommend 1200 × 630 px for the best appearance. Twitter's summary_large_image card also prefers a 2:1 ratio. Keep file size under 8 MB and use HTTPS URLs to avoid mixed-content warnings that can cause scrapers to skip your image entirely.

Frequently Asked Questions

What are Open Graph tags?

Open Graph tags are <meta> elements placed in the <head> of a page that tell social networks — Facebook, LinkedIn, Slack, iMessage and others — what title, description and image to display when someone shares the link. Without them, platforms fall back to guessing, often with poor results.

Do I need separate Twitter Card tags?

Technically yes. X (formerly Twitter) reads its own twitter:* meta tags rather than og:* ones, though it does fall back to OG if the twitter tags are absent. This tool generates both sets simultaneously so you get the best appearance on every platform with no extra effort.

Why does my image not appear after I update the tags?

Social networks aggressively cache page metadata. After deploying updated tags, use each platform's sharing debugger (Facebook Sharing Debugger, LinkedIn Post Inspector, X Card Validator) to force a re-scrape and clear the cached version.