Open Graph & Twitter Card Generator
Fill out a form, get a ready-to-paste <meta> block — Open Graph for Facebook / LinkedIn / Slack and Twitter Card tags for X / Discord.
<title>Site Title — Page Title</title> <meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <link rel="canonical" href="https://example.com/page" /> <!-- Open Graph --> <meta property="og:title" content="Site Title — Page Title" /> <meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:image:alt" content="Cover image describing the page" /> <meta property="og:site_name" content="Example Site" /> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Site Title — Page Title" /> <meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta name="twitter:image" content="https://example.com/og-image.png" /> <meta name="twitter:image:alt" content="Cover image describing the page" /> <meta name="twitter:site" content="@example" /> <meta name="twitter:creator" content="@author" />
Preview
Example Site
Site Title — Page Title
A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.
Validate the result with Facebook's Sharing Debugger or Twitter's Card Validator after deploying.
How to use
- Fill in title, description, canonical URL, and a 1200×630 cover image URL.
- Pick the Open Graph
og:type(article, website, …) and a Twitter card style (summary, summary_large_image, …). - Copy the generated block into your page's
<head>— works in plain HTML, Astro, Next.js, etc.
About this tool
ShowHide
Builds the standard preview-card metadata block every social platform and chat app looks for when someone shares your URL. Title, description, image, type, and the Twitter-specific card variant are all configurable. A small preview shows roughly how the link will appear in a social feed. Copy the result straight into your page's <head>. One practical warning once the tags are in place: platforms cache the first scrape of a URL, sometimes for days, so editing a tag does not change a preview that has already been generated — use the platform's own debugger to force a re-scrape. Aim for an image around 1200 by 630 pixels, which is the shape almost every card is cropped to.
Frequently asked questions
What image size should I use?
1200 × 630 pixels (1.91:1) is the safe default — it satisfies Facebook, LinkedIn, Slack, and Twitter's summary_large_image card. Twitter's plain summary card uses 1:1, but most sites just use one image for both.
What's the difference between summary and summary_large_image?
summary shows a small square thumbnail next to the title and description. summary_large_image shows a full-width banner image above the title. Use the large one for content-heavy posts; the small one when the image is incidental.
Does the canonical link matter?
Yes. Crawlers use it to de-duplicate URL variants (?utm_source=…, trailing slashes) and route social engagement (likes, comments) to a single canonical URL.
I updated the tags but the preview still shows the old image. What now?
The platform cached the old scrape. Most of them keep a copy for days and only refresh when asked, so use that platform's debugger or sharing-inspector to force a re-fetch of the URL. A quicker workaround for an urgent fix is to change the image's own URL, since a new filename cannot be served from the old cache entry.
Do these tags need to be server-rendered?
Yes, in practice. A crawler fetches the HTML and reads what is in it; most do not run JavaScript, so tags added by client-side code after load are simply not seen. This is the usual reason a single-page app previews with the site's generic title on every link — the tags have to be in the HTML that arrives from the server for that URL.
Related tools
Social / SEO Character Limit Checker
Type once and see how your text measures against 28+ platform limits — Twitter, Instagram, SEO titles, ad copy, app stores.
Text
JSON to Go Struct Converter
Turn a JSON object into a typed Go struct with json tags, instantly in your browser.
Developer
Snowflake ID Decoder (Discord, Twitter)
Decode a Discord, Twitter/X or Instagram Snowflake ID into its creation timestamp, worker or datacenter, and sequence — with a custom-epoch mode.
Developer
CSS Animation Generator
Build a CSS animation visually — pick a preset, tweak duration/easing/iteration, see the preview, and copy the generated keyframes.
Developer
Credit Card Validator (Luhn + Brand)
Validate a card number with the Luhn checksum, detect brand (Visa/MC/Amex/etc), and check expected length. Local, no network.
Developer
NumPy .npy / .npz Inspector
Read a .npy or .npz header in the browser: dtype, shape, byte order, field layout and a value preview, with no NumPy and no upload.
Developer