Open Graph Preview
Preview how your page looks when shared on X/Twitter, Facebook, and LinkedIn. Generate og: and twitter: meta tags instantly.
Meta Tag Data
Recommended: 50–60 characters
Recommended: 120–160 characters
Recommended: 1200×630 px
Card Preview
example.com
My Awesome Page Title
A short description of the page content, shown in social media preview cards.
Generated Meta Tags
When an Open Graph preview is the right tool
Use this page to draft share-card text and see a rough X / Twitter, Facebook, or LinkedIn layout while you type. Copy the generated og: and twitter: tags when you are ready. It does not scrape a live URL. For a wider tag set (robots, canonical, locale, Twitter creator), use Meta Tags Generator.
Use cases
Checking how a title and image might look
The form starts with sample copy and a placeholder image. Hints suggest about 50–60 characters for the title, 120–160 for the description, and a 1200×630 image. Those are reminders only; the tool does not truncate.
Switching card types
summary_large_image versus summary changes the X mockup only. Facebook and LinkedIn always use the large-image layout here.
How preview and tags work
Every field is written into the HTML as you type. The image in the mockup is loaded by your browser from the Image URL (the default host is via.placeholder.com). The page URL is parsed only to show a hostname; a value that is not a valid URL is shown as-is. Site name and Twitter handle are omitted from the tags when left blank.
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="My Awesome Page Title" />
<meta property="og:description" content="A short description of the page content, shown in social media preview cards." />
<meta property="og:url" content="https://example.com/my-page" />
<meta property="og:site_name" content="Example" />
<meta property="og:image" content="https://via.placeholder.com/1200x630/3b82f6/ffffff?text=OG+Image+1200x630" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page Title" />
<meta name="twitter:description" content="A short description of the page content, shown in social media preview cards." />
<meta name="twitter:image" content="https://via.placeholder.com/1200x630/3b82f6/ffffff?text=OG+Image+1200x630" />
<meta name="twitter:site" content="@example" />What this tool does not do
It does not fetch your page, talk to platform crawlers, let you change og:type, or escape quotes in attribute values. Previews can differ from production cards. Image requests go from your browser to the image host, not through a DiffCheck proxy.
How to use Open Graph Preview
- Edit the title, description, image URL, page URL, and optional site name or Twitter handle.
- Switch among the X / Twitter, Facebook, and LinkedIn mockups.
- Copy HTML when the tags look right, then paste them into your page’s head.
Frequently asked questions
Does Open Graph Preview fetch or scrape my page URL?
No. This is a form-driven mockup. The Page URL is only used to show a hostname on the card and to fill og:url in the generated HTML. DiffCheck does not request that page, read its existing tags, or run a social-platform debugger. The on-page note is right: previews are approximate and can differ from X, Facebook, or LinkedIn.
Does the preview load images from the internet? Is Unsplash involved?
Your browser requests whatever you put in Image URL, the same way it would load any <img src>. The default value is a via.placeholder.com image (1200×630), so opening the tool with defaults will contact that placeholder host. This tool does not use Unsplash. If the image fails to load, it is hidden. Clearing the Image URL omits og:image, the width/height tags, and twitter:image.
What meta tags are generated?
The output always includes og:type (fixed as website — there is no type field in the form), og:title, og:description, and og:url, plus twitter:card, twitter:title, and twitter:description. Site name, image, image width and height (always 1200 and 630 when an image URL is set), and twitter:site are included only when those fields are non-empty. Field values are inserted into attributes as-is; a quote in the title will break the HTML attribute.
How do the X, Facebook, and LinkedIn cards differ?
X / Twitter uses a large image layout for summary_large_image and a small square image for summary. Facebook shows a large image, an uppercase hostname, title, and description. The LinkedIn mockup shows the image, title, and hostname, and it does not display the description. None of these layouts are official platform widgets.
Related tools and guides
References
- Official tag names are documented by The Open Graph protocol and X Cards. This page approximates the visual card, and it does not call those platforms’ debuggers.
- The default preview image is hosted on
via.placeholder.com, not on DiffCheck and not on Unsplash.