Marketing Tools
Open Graph Preview Generator
Generate Open Graph and X Card tags from your text and see an approximate preview. No website scan.
Worked example and publication checksOpen Graph Preview Generator
Create Open Graph and Twitter Card tags, then preview how a shared link can appear.
Loading a remote image connects your browser to its host.
From input to publication
Worked example: publishing a workshop announcement
A fictional workshop page needs a consistent title, description and image when shared. This generator creates metadata from the values you enter; it does not fetch an existing page or reproduce every social platform's rendering.
Example inputs
- Page title
- Repair Workshop
- Site name
- Northside Workshop
- Page URL
- https://example.com/workshop/
- Image URL
- https://example.com/images/workshop.jpg
- Content type
- website
- Twitter card
- summary_large_image
- Locale
- en_US
- Image alt text
- Workshop tools arranged on a workbench
- Description
- A hands-on workshop on maintaining everyday equipment, with a small group and time for individual questions.
Expected excerpt from the generated metadata
<meta property="og:title" content="Repair Workshop" />
<meta property="og:description" content="A hands-on workshop on maintaining everyday equipment, with a small group and time for individual questions." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/workshop/" />
<meta property="og:image" content="https://example.com/images/workshop.jpg" />Provide a real, public image
The example.com URLs are illustrative. On your site, publish the JPEG before adding its absolute HTTPS URL. A common starting size is 1200 by 630 pixels, but keep important text away from the edges because smaller cards can crop it.
Loading the optional preview makes a direct request from your browser to the image host. Merely entering the address does not. Do not paste private asset URLs containing access tokens. A successful local load also does not guarantee that a social crawler can retrieve the same resource.
Replace existing tags instead of duplicating them
Copy the complete output into the published page's HTML head. In a CMS, an SEO plugin may already create these tags; update its social settings instead of adding a second competing title and image.
Check the initial HTML response while logged out. Tags that appear only after a client-side script runs may not be seen by a sharing crawler. The og:url should identify the canonical workshop page, not a preview URL with a temporary token.
Distinguish deployment from a stale platform cache
After changing an image, first inspect the published source and open the image URL. If those are correct but a previously shared post still looks old, use the destination platform's official debugger or sharing inspector to request a fresh fetch.
The preview cannot test robots rules, cookies required by the image host, redirect chains or platform caches. Record the tested page URL, image URL and platform when reporting a problem; a screenshot alone does not identify which layer is stale.
Verification checklist
- Compare the metadata excerpt, then copy the complete output including the remaining site and card tags.
- Open the deployed page source and make sure there is only one intended value per tag.
- Open the real image without logging in and verify its file type and dimensions.
- Share or inspect the public URL on the intended platform after clearing stale metadata there.
Example and source review: .
What this tool is for
Open Graph and social card metadata suggest the title, description and image a sharing platform should use. The platform decides what it actually displays and may keep older values in a cache. Missing tags can leave it to select text or images that do not represent the page well.
This generator creates a clean set of meta tags from manual input and shows a practical preview. It is useful before launching a landing page, publishing a blog post, sending a campaign link, or preparing a client site for social sharing. The goal is not to replace platform debuggers, but to produce better source markup before testing.
How to use it
- Enter the page title, description, canonical URL, image URL, and content type.
- Check whether the preview communicates the page clearly without relying on surrounding social post text.
- Copy the generated meta tags into the HTML head.
- After deployment, validate the URL with the relevant platform debugger or sharing inspector.
Other use cases
New landing page
Use a specific title, a benefit-focused description, and a 1200x630 image that still works when cropped in smaller previews.
Blog article
Use the article title and a description that summarizes the answer, not just the first sentence of the post.
Client relaunch
Generate tags for the homepage and major service pages before launch so link previews do not show old logos or irrelevant images.
Important notes
- Use absolute URLs for images. Relative paths often fail when external platforms fetch the preview.
- Avoid changing preview images repeatedly after sharing. Many platforms cache metadata.
- Keep the title and description useful even when the image does not load.
Limitations
- The local preview is an approximation. Each platform can crop, cache, or display metadata differently.
- This tool generates tags from manual input; it does not inspect an existing page. Loading an image preview contacts that image's host from your browser.
- A valid image URL is still required on the deployed website.
Sources and review context
This page is maintained by Martin Trixner and was last reviewed on September 9, 2026. The tool output is based on public documentation and should still be tested against the target platform before production use.
FAQ
Does this tool fetch an existing URL?
No. Enter the metadata manually. The optional image preview fetches only the image you explicitly load, not the page metadata.
Which image size works well for social previews?
A 1200x630 image is a common Open Graph image size for large preview cards.
Why does a platform show an old image?
Many platforms cache preview metadata. After changing tags or images, you may need to refresh the URL in the platform's own debugger.
Should image URLs be absolute?
Yes. Use full HTTPS URLs for preview images so external platforms can fetch them reliably.
Are Open Graph and Twitter Cards identical?
They overlap, but they are not identical. Many pages include Open Graph tags plus a few Twitter Card tags for better compatibility.
Can this guarantee the final preview?
No. The preview is a practical approximation. Each platform can crop, resize, cache, or display cards differently.