Open Graph Preview

Open Graph Preview takes a page URL, fetches its HTML on our server, and extracts the Open Graph meta tags (og:title, og:description, og:image) plus Twitter Card (twitter:*) tags. It then renders the share card roughly as it would appear on Facebook, Slack, LinkedIn and similar platforms — a handy check before you ship.

The most common reasons a share card breaks or shows no thumbnail are a missing og:image, a non-absolute image URL, or a missing og:title. This tool fetches the page once, like a social crawler would, and shows exactly which tags are empty so you know what to fix.

Key OG tags

• og:title: the card title. If absent, the page title is sometimes used instead.
• og:description: the card body text, usually truncated to a few lines.
• og:image: the thumbnail. Use an absolute URL (recommended 1.91:1, at least 1200x630).
• og:url: the canonical URL. Prefer a clean address over one with tracking parameters.
• og:type: the content type, such as website or article.

Twitter Cards

Twitter (X) prefers its own twitter:card, twitter:title and twitter:image tags. When those are missing, most clients fall back to the og:* values, so a solid set of OG tags covers most platforms at once. Use twitter:card=summary for a small card and summary_large_image for a large image card.

When the thumbnail is missing

If og:image is a relative path, some crawlers will not pick it up. Always use an absolute URL starting with https, and make sure the image is publicly accessible (no login or hotlink protection). Caches can show an old card, so refreshing the cache in each platform's debugger can help too. To create the OG tags from scratch, the Open Graph tag generator builds the meta tags you need in one go.

Image specs and cropping by platform

The same og:image can render differently across platforms because each one has its own recommended size, crop ratio, and cache-busting tool. Cards that look cropped top-to-bottom or blurry are almost always a ratio/resolution mismatch with the recommended value.

What the crawler sees: a worked example

Say a page ships <meta property="og:image" content="/images/cover.png"> with a relative path. A crawler cannot resolve the domain, so it looks for the broken address /images/cover.png, the card renders with an empty thumbnail slot, and og:image is flagged as “relative path”. Change it to content="https://example.com/images/cover.png"and the same page renders a correct card. Likewise, if og:title is empty, the preview falls back to the page’s <title> text — which also tells you why your card title and browser-tab title can differ.

Common pitfall

• If og:image points to an image behind a login or hotlink protection, it shows in your browser but the crawler cannot fetch it, leaving the card blank. Open the image URL while logged out to verify.
• Use the right attribute: OG tags use property="og:image" while Twitter uses name="twitter:image" — the attribute names differ.
• If the preview looks fine but only the live social site shows an old card, it is a platform cache issue, not a tool bug — refresh it in the debugger listed in the table above.