Open Graph Preview Tool
Create an illustrative card and escaped meta tag draft from manually entered OG fields.
Illustrative draft card
This layout is a generic mockup. It does not fetch page metadata or reproduce Facebook, LinkedIn, WhatsApp or X rendering.
Entering the image URL does not request it. The load button requests that URL from your browser without a referrer. Browser loading is not proof that social crawlers can access it. Any field edit clears the loaded image state.
Output supports website/article basic fields. Add type-specific properties separately. Image MIME type, dimensions, HTTP status, robots access, redirects, canonical agreement, cached cards and Twitter Card tags are not validated.
From draft to release
Enter the real title, object type, permanent page URL and representative image URL. Add a descriptive alt and optional description/site name. Review escaped tags, insert them in the page head and verify the released HTML and the destination platform preview.
TOOL GUIDE
Why does an Open Graph preview matter?
The Open Graph preview builds a generic card draft and HTML meta tags from fields you enter manually. It does not fetch page metadata and gives no verdict on social platform rendering, caching, or acceptance.
The title, the website or article type, and absolute HTTP/HTTPS page and image URLs are validated; URLs with credentials or control characters are rejected. The output uses HTML attribute escaping. Typing an image URL makes no request; a separate button starts the browser load.
How to use it
- Enter the title, type, page URL, and image URL. Optionally add a description, a site name, and image alt text.
- Review the illustrative card and the full HTML draft. If you want, use the image load button to check the browser result separately.
- Add the tags to the page head, then verify the published HTML and the target platform's preview separately.
When to use it
- Test the social card for blog posts and landing pages before sharing.
- Review the core OG fields together in one draft before a social post.
- Set shared OG standards between the social media team and the web team.
The draft is built in your browser from the text fields. The “Load image” button sends a request from your browser to the image URL you entered; page metadata is not fetched from a server.
Frequently asked questions
Does this tool show a live social network fetch?
No. It shows a generic card layout; it does not imitate a platform's appearance or truncation limits. Real rendering, bot access, and caching need separate checks.
Does the image URL have to be absolute?
This tool accepts absolute HTTP/HTTPS URLs. Valid URL syntax does not prove that the image loads or that a sharing bot can reach it. The load button only shows the result in your current browser.
Are Open Graph tags and Twitter Cards the same thing?
Not exactly. Many fields overlap, but X (Twitter) has its own card meta tags. OG fields still provide a good baseline for most platforms.