Open Graph Image Preview

What Open Graph Image Preview helps you do

Preview how a title, description, domain, and image URL combine into an Open Graph social card before you ship a page. Enter the fields by hand, watch the card update, and copy matching og: tag snippets once the preview looks right. It is a composition check, not a crawl of the live page.

Preview rendering uses the image URL you provide; Haivix does not store your draft metadata.

How it works

The fields are rendered into a card layout in the page, and the image is assigned as a normal image request from your browser. If the request fails, an error handler replaces the image with a placeholder. The OG tags are generated from the same values, so the preview and the snippet stay consistent.

How to use Open Graph Image Preview

1. Enter page title, description, canonical domain, and image URL.
2. Adjust fields until the card preview matches expectations.
3. Check that the image is a direct, public HTTPS URL rather than a page or a login-protected file.
4. Copy the OG tags into the page head or the CMS fields.

When to use it

• Validate share cards for blog posts and landing pages before launch.
• Check whether a 1200×630 image crops acceptably in the preview frame.
• Generate OG tag snippets for static sites without a CMS meta plugin.
• Compare the card a page will show against the title and description used in search.
• Draft a social card before the page exists.
• Check that a new domain appears correctly in the card.

When not to use it

• Do not use it to fetch and inspect a live page's existing meta tags; enter the values yourself.
• Do not expect it to simulate every platform's crop or cache behavior exactly.
• Do not rely on the preview to prove that a social crawler can reach the image.

Example

A 1200 by 630 image at roughly 1.91:1 is entered with a 60-character title and a 155-character description. The card looks balanced, the domain resolves to the production host, and the generated tags are pasted into the page template. After deploy, the platform debugger is used to refresh the cached card.

What you can do with Open Graph Image Preview

• Compose a card from title, site name, description, page URL and image URL.
• Show the domain derived from the page URL.
• Load the image directly from its URL into the card.
• Show a placeholder when the image cannot be loaded.
• Generate the matching Open Graph tags.
• Copy the tags for a template or CMS field.

Example: check a blog post card

Enter the post title, the site name, a description and the final page URL. The domain in the card comes from the hostname of that URL, so a staging URL will show the staging domain.

Paste the 1200×630 image URL. If the card shows a placeholder instead, the image is blocked, missing or not directly reachable by the browser.

Compare the card with the live page after publishing. Social platforms cache cards aggressively, so a change may take a re-scrape before it appears.

What to know before you start

• The preview is a local composition, not a fetch of the live page's metadata.
• The image is loaded by your browser, so a URL that blocks hotlinking may not preview even if a crawler could fetch it.
• Platform crops, cache behavior and card layouts vary.
• The tool does not validate image dimensions or file size.
• It generates Open Graph tags; it does not add Twitter-specific fields beyond the common ones.

Common mistakes

• Using a relative image path that only works on the page, not in a card.
• Pointing the image URL at a page or a download endpoint instead of an image file.
• Leaving a staging hostname in the page URL and shipping it to production.
• Writing a description that repeats the title instead of adding context.
• Assuming the preview will match every platform's crop exactly.

Troubleshooting

If the image shows a placeholder, open the URL in a new tab. It may be blocked by CORS, require a login, or return an HTML error page.

If the domain is wrong, check the page URL; the hostname is taken from it rather than from the site name.

If the card is blank after deploying, the platform may be showing a cached version. Use its debugger to re-scrape.

If the image is cropped oddly, export a 1200×630 version with the subject centred rather than relying on the platform's crop.

If the generated tags look incomplete, check that all fields were filled; empty fields are omitted.

Related standards and documentation

• The Open Graph protocol defines og:title, og:description, og:image and og:url.
• Twitter Cards use their own meta names layered on the same values.