What is the correct og:image size?

1200x630 pixels at a 1.91:1 aspect ratio is the universal sweet spot. Facebook, LinkedIn, Twitter, and Slack all render it cleanly at that size. Images smaller than 600x315 may be ignored by Facebook. Always host the image at an absolute https:// URL so crawlers can fetch it.

Why is my Facebook link preview not updating after I changed the tags?

Facebook aggressively caches OG data. Visit developers.facebook.com/tools/debug and paste your URL to force a re-scrape. LinkedIn has a similar tool at linkedin.com/post-inspector. Note that caches can take 24 hours to fully expire across their CDN.

What is the difference between og:title and the HTML title tag?

The HTML title tag controls the browser tab and Google search snippets. The og:title property is read by social platforms when someone shares your link. They can (and often should) differ: og:title can be more conversational or punchy, while the HTML title may include your brand name appended.

Does Twitter use og:title and og:image or its own twitter:* tags?

Twitter falls back to og:title, og:description, and og:image if no twitter:* tags are present, but explicit twitter:title and twitter:image give you independent control. This tool generates both sets so you get correct rendering regardless of whether the platform prefers one over the other.

What does twitter:card "summary_large_image" versus "summary" mean?

"summary_large_image" shows a full-width image above the title and description — much more visual and better for CTR on articles, blog posts, and marketing pages. "summary" shows a small square thumbnail to the left of the text, suited to news or compact link formats. Choose summary_large_image unless you have a specific reason to use summary.

Does Slack use standard Open Graph tags?

Yes. Slack reads og:title, og:description, og:image, and og:site_name when it unfurls a URL. For richer Slack integration (buttons, fields, custom branding) you would use the Slack API Block Kit, but for standard link previews OG tags are all that is needed.

Open Graph Preview Generator

When you share a link on Facebook, LinkedIn, Twitter, Slack, or Discord, each platform fetches your page’s Open Graph meta tags and renders a link card — a visual preview with an image, headline, and description. Getting those tags right is the difference between a plain URL nobody clicks and a polished card that drives traffic.

This tool lets you fill in every field, see a live preview for five different platforms side by side, run instant validation, and copy the complete HTML meta tag block ready to paste into your page’s head section.

How it works

Open Graph is a protocol introduced by Facebook in 2010 that gives web authors a standard way to control how their pages look when shared. The minimum viable set of tags is:

<meta property="og:title"       content="Your headline" />
<meta property="og:description" content="Your summary" />
<meta property="og:image"       content="https://example.com/image.jpg" />
<meta property="og:url"         content="https://example.com/page" />
<meta property="og:type"        content="website" />

Twitter (now X) introduced its own Twitter Card standard, which falls back to OG tags if no twitter:* tags are present. This generator outputs both sets so you get the correct render on every platform with a single copy-paste.

The preview cards are rendered entirely in your browser using styled React components that match each platform’s documented card layout. The tool attempts to load your og:image URL live inside the card; if it is unreachable (e.g. not yet uploaded, or a local path), the image area shows a placeholder — the rest of the preview still works.

Worked example

Say you are publishing a blog post at https://myblog.com/remote-work-guide. A good set of tags might be:

og:title — “The Complete Guide to Remote Work in 2026” (43 chars — well within the 88-char Facebook limit)
og:description — “Everything you need to know about tools, workflows, and habits that make distributed teams thrive.” (97 chars — two neat lines on most platforms)
og:image — https://myblog.com/images/remote-work-og.jpg (1200x630 JPEG, hosted at an absolute https:// URL)
og:url — https://myblog.com/remote-work-guide (the canonical URL; prevents duplicate entries in Facebook’s share count if the page is reachable at multiple paths)

Paste those into this tool, switch through the platform tabs, and you will see exactly how the card looks before a single line is deployed.

Validation rules

The tool checks four things automatically:

og:title — empty (error), under 15 chars (warn), over 95 chars (warn: LinkedIn clips at 88 and Facebook at 95), otherwise OK.
og:description — empty (warn), over 200 chars (warn: most platforms show only around 155 before truncating), otherwise OK.
og:url — empty (warn), not a valid absolute URL (error), otherwise OK.
og:image — empty means many platforms show no card at all (error), otherwise OK with a reminder to use 1200x630 px.

Formula note

There is no arithmetic formula here — the output is markup, not a number. The specification used is the Open Graph Protocol plus the Twitter Card documentation. The key sizing relationship is the 1.91:1 aspect ratio for images (1200 / 630 ≈ 1.905), which is the ratio that renders without letterboxing on every major platform.