Tutorial

How to Preview Open Graph Images Before You Share

Preview an Open Graph share card, check title and image layout, and copy og meta tags before you publish.

By Haivix Team 8 min read
Abstract social share card silhouette with a wide image plane on a dark navy background

When someone pastes your URL into Slack, LinkedIn, or Facebook, the preview comes from Open Graph tags—especially og:title, og:description, and og:image. A broken image URL or a title that does not match the page wastes the click.

The Haivix Open Graph Image Preview builds a share-card mock from fields you enter: title (max 100), site name, description (max 300), page URL, and absolute image URL. It copies og:* tags for your page head. It does not scrape a live page or purge platform caches.

Using the preview

The card shows the image (or a 1200×630 placeholder), a domain label, title, and description. Domain comes from the page URL hostname when it parses; otherwise site name; otherwise example.com. If the image URL fails to load in the browser, you see “Image could not be loaded.”

Haivix does not proxy the image—your browser fetches it directly. Metadata stays local. Aim for roughly a 1.91:1 image (often 1200×630); platforms may still crop or cache differently.

Tags the tool generates

Copy OG tags emits properties that have values: og:type (always website), plus title, description, url, image, and site_name when filled. Content is HTML-escaped. There are no Twitter Card tags in this tool.

For a fuller head snippet including canonical and robots, pair this with the Meta Tag Generator. For Article or Product JSON-LD, use the Schema Markup Generator. After redirects and UTM checks, the Campaign Link Checker helps confirm the final landing page.

Honest limits

The card is a generic mock, not a pixel-perfect Facebook, LinkedIn, X, or Slack renderer. There is no image upload, crop, or resize here—host the file first, then paste the absolute HTTPS URL. After you publish, you may still need each platform’s debugger to refresh a stale cache.

Checklist before you share the URL

Open the Open Graph Image Preview, fill the fields, check the card, and copy the tags into your template.

  • og:image is absolute HTTPS and loads without login.
  • Title and description match the page people will open.
  • Image aspect is close to 1.91:1 and important content is centered.
  • You copied tags into the live page head (or CMS fields).
  • You tested a fresh share after deploy if caches looked old.