Meta Tag Generator & Preview
Generate Open Graph and Twitter Card meta tags from scratch — fill in title, description, and image, see live social card previews, and copy ready-to-paste HTML.
About this tool
When you paste a link into Facebook, X (Twitter), Slack, or Discord, those platforms read og: and twitter: meta tags in your page's <head> to build a rich preview card — title, description, and image. This tool lets you fill in those fields, see the preview render in real time across four platforms, and copy the exact <meta> tags to paste into your HTML.
Example inputs: title deftools.io — 40+ Free Online Developer Tools, description Fast, privacy-first developer tools that run entirely in your browser., image URL https://example.com/og.png. The generated output is a ready-to-paste block of <meta property="og:…"> and <meta name="twitter:…"> tags.
The validation panel flags common mistakes: titles over 65 characters get truncated in search results, descriptions over 200 characters are cut, and missing images produce text-only cards that get far fewer clicks.
FAQ
What image size should I use? ›
1200×630 pixels is the de facto standard — it renders well as a large card on Facebook, X, and LinkedIn. Discord and Slack will also display it nicely. Use a 1.91:1 aspect ratio.
Do I need both Open Graph and Twitter Card tags? ›
Open Graph (<code>og:</code>) is read by Facebook, LinkedIn, and Slack. Twitter has its own <code>twitter:</code> tags. Adding both ensures correct previews everywhere. The tool generates both sets automatically.
Why is my preview not updating after I deploy? ›
Social platforms cache preview cards aggressively (sometimes for days). Use Facebook Sharing Debugger or Twitter Card Validator to force a re-scrape of your URL after changing the tags.
What is the difference between summary and summary_large_image? ›
<code>summary</code> shows a small square thumbnail beside the title. <code>summary_large_image</code> shows a wide image above the title — it gets noticeably higher click-through rates on X.
Can I test tags from a live URL? ›
Yes — use the Open Graph Inspector & Debugger to fetch tags from any live URL and preview how the card renders on every platform. This tool is for building tags from scratch; the inspector audits what is already deployed.