Free Open Graph & Twitter Card Tag Generator (HTML <head> Output)
Fill the form and get a complete set of HTML meta tags — Open Graph, Twitter Card, meta description, canonical link, and theme-color — ready to paste into your <head>. Character-count guidance for title and description; full set of 2026 best-practice fields.
<title>Toolk — Free Online Developer & Designer Utilities</title>
<meta name="description" content="A growing library of 79+ free, ad-free, no-signup web tools for developers, designers, and creators. JSON, CSS, color, calculators, and more.">
<link rel="canonical" href="https://www.toolk.site">
<meta name="theme-color" content="#0F62FE">
<!-- Open Graph (Facebook, LinkedIn, Slack, Discord) -->
<meta property="og:type" content="website">
<meta property="og:title" content="Toolk — Free Online Developer & Designer Utilities">
<meta property="og:description" content="A growing library of 79+ free, ad-free, no-signup web tools for developers, designers, and creators. JSON, CSS, color, calculators, and more.">
<meta property="og:url" content="https://www.toolk.site">
<meta property="og:site_name" content="Toolk">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://www.toolk.site/og-image.png">
<meta property="og:image:alt" content="Toolk — Free online utility tools">
<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:site" content="@toolksite">
<meta name="twitter:creator" content="@toolksite">
<meta name="twitter:title" content="Toolk — Free Online Developer & Designer Utilities">
<meta name="twitter:description" content="A growing library of 79+ free, ad-free, no-signup web tools for developers, designers, and creators. JSON, CSS, color, calculators, and more.">
<meta name="twitter:image" content="https://www.toolk.site/og-image.png">
<meta name="twitter:image:alt" content="Toolk — Free online utility tools">Tip: After deploying changes, force a re-fetch via the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and LinkedIn Post Inspector — both platforms cache OG tags aggressively.
Full Tag Set
Title, description, canonical, theme-color, og:type, og:image with width/height/alt, og:locale, twitter:card, twitter:site, twitter:creator — every tag major link-preview platforms read.
Character-Count Guidance
Live counters on title and description fields with ideal/warn/max thresholds based on 2026 platform best-practices (Facebook 60-char title, 160-char description, Twitter 70-char title).
HTML-Escaped Output
Special characters (&, <, >, ") in your field values are properly HTML-escaped in the output. Paste straight into your <head> without worrying about breaking the markup.
100% Client-Side
Generator runs entirely in your browser. No fetch, no signup, no tracking. Works offline once the page is loaded.
The Meta Tags Behind Every Good Link Preview
Every time someone shares your URL on Facebook, LinkedIn, Slack, Discord, WhatsApp, or X — the platform fetches your page and reads its<meta> tags to build the preview card. If your tags are missing or wrong, you get a generic-looking preview that 30-50% fewer people click. Our Free Open Graph Tag Generator walks you through every tag you need — standard meta description, canonical link, theme-color, the full Open Graph set, and Twitter Card extensions — with character-count guidance based on 2026 platform best practices. Fill the form, copy the output, paste into your <head>, ship.
Pair this with our Meta Tag Previewer (verify how your tags will render on each platform), Favicon Generator (the other half of brand-aware previews), Aspect Ratio Calculator (compute the 1200×630 image dimensions for og:image), and the URL Parser (verify your canonical URL is correctly structured).
Tag-by-Tag Reference & 2026 Limits
| Tag | Ideal Value | Notes |
|---|---|---|
| og:title | 50-60 chars | Appears as the bold headline in link previews. Match your <title> for consistency. |
| og:description | 150-160 chars | Subtitle/excerpt under the title in preview cards. Compelling sentence that encourages click. |
| og:image | 1200×630 px | Recommended aspect ratio 1.91:1. PNG or JPG; under 8MB. Test in Facebook Sharing Debugger. |
| og:url | Canonical URL | The authoritative URL for this page; lets crawlers consolidate duplicates. |
| og:type | website / article | "article" enables additional fields like article:published_time, article:author. |
| twitter:card | summary_large_image | Use summary_large_image when you have a 1200×630 image; summary for text-only. |
| twitter:site | @yourhandle | Your brand's X / Twitter handle. Shown as "via @handle" on cards. |
| twitter:creator | @authorhandle | Article author's handle. Useful when site account and author differ. |
| theme-color | Brand hex | Sets browser-chrome color on Chrome Android. Choose your primary brand color. |
How Each Platform Reads Your Tags
| Platform | What It Reads | Cache Behavior |
|---|---|---|
| Facebook / Threads / Meta | og:* tags primarily; falls back to twitter:* if og missing. | Aggressive — use Facebook Sharing Debugger to force re-fetch after changes. |
| og:* tags; large-image card by default for og:image >= 1200x627 | LinkedIn Post Inspector forces re-fetch. | |
| X (Twitter) | twitter:* tags; falls back to og:* if twitter missing. | Card Validator deprecated 2023; cache cleared on next bot visit. |
| Slack | og:* tags; emits a "unfurl" preview in messages. | 24-hour TTL by default. |
| Discord | og:* tags; emits an embed preview. | Short TTL; usually refreshes within an hour. |
| iMessage / WhatsApp | og:* tags; shows hero image + title + description. | Per-conversation cache; clear by deleting and resending. |
| Google search snippet | meta description (NOT og:description); og:title sometimes used. | On next re-crawl; varies by site authority. |
Always test new tags through Facebook's Sharing Debugger before relying on cached previews — the cache TTL can be 24+ hours on some platforms.
Four Common Open Graph Mistakes
1. Missing og:image dimensions
og:image:width and og:image:height let crawlers reserve space without fetching the image. Without them, some platforms skip the image entirely to avoid layout shifts.
2. Relative URLs
og:image and og:url MUST be absolute (https://example.com/...). Relative URLs (/og-image.png) fail silently on most platforms. Always include the full origin.
3. Image behind auth
Social-media crawlers do not authenticate. og:image URLs must be publicly accessible without cookies or auth headers. Move to a CDN or public storage bucket.
4. Title and description duplicated badly
Don't copy the page's H1 verbatim into og:title — the title appears alongside the description in previews; redundant copy looks spammy. Slightly rephrase each.