Open Graph Meta Tag Generator
Fill the form and copy a complete set of HTML meta tags — Open Graph (og:title, og:image, og:url), Twitter Card, meta description, canonical link, and theme-color — ready to paste into your <head>. Free, with live character-count guidance, running 100% in your browser.
<title>Toolk — Free Online Developer & Designer Utilities</title>
<meta name="description" content="A growing library of 79+ 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, 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, 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 upload. Works offline once the page is loaded.
Open Graph Meta Tag Generator: Build Social Preview Tags for Your <head>
An Open Graph meta tag generator turns a simple form into the<meta> tags that control how a link looks when shared on Facebook, LinkedIn, X, Slack, and Discord. Type your title, description, canonical URL, and image, then copy a complete <head> block with Open Graph, Twitter Card,<title>, canonical, and theme-color tags. It runs 100% in your browser, free, with no upload and live character-count guidance.
How to generate Open Graph meta tags
- Enter the Page title and Description — the live counters flag when you cross the 60-char title and 160-char description thresholds.
- Paste the Canonical URL (absolute, with
https://) so crawlers can consolidate the page and buildog:url. - Add an Image URL at 1200×630, plus its width, height, and alt text, so the card renders a hero image and reserves layout space.
- Pick an og:type (default
website); choosingarticlerevealsarticle:authorandarticle:published_timefields. - Set the Twitter card type, optional
@handles, locale, and a brand theme-color. - Press Copy on the generated block and paste it into your
<head>— or hit Load sample to see a full example first.
What is Open Graph and how does it work?
Open Graph is a metadata protocol Facebook introduced in 2010 to turn any web page into a rich object for social previews. When someone shares your URL, the platform's crawler fetches the page and reads the <meta property="og:*"> tags in your <head> to build the card. The protocol is built on RDFa, which is why a fully spec-compliant page declares the namespace on the root element: <html prefix="og: https://ogp.me/ns#">.
The Open Graph protocol spec (ogp.me) defines exactly four required properties — og:title, og:type, og:image, and og:url — and says any unmarked page "should be treated as og:type website." Everything else is optional. MDN's metadata reference documents the standard <meta name> values, while X's Twitter Card tags layer on top: when twitter:* tags are present they win, otherwise X falls back to your og:* tags. This generator emits both so every platform has what it prefers, and it auto-selects summary_large_image when an image is present.
"og:url — The canonical URL of your object that will be used as its permanent ID in the graph."— The Open Graph protocol, ogp.me
Tag-by-tag reference & ideal values
| 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. |
Worked examples: form input → tag output
Title + description only · no image
<title>Pricing — Acme</title>
<meta property="og:title" content="Pricing — Acme">
<meta name="twitter:card" content="summary">With no image, the Twitter card defaults to summary (small square), not summary_large_image.
Article with image · og:type = article
<meta property="og:type" content="article">
<meta property="og:image" content="https://acme.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="article:published_time" content="2026-05-11T14:00:00Z">Edge case · an ampersand in your title
Type Tips & Tricks and the output escapes it to Tips & Tricks. The tool escapes exactly four characters — &, ", <, > — so the markup never breaks. It does not escape single quotes (apostrophes), which is safe inside double-quoted attributes.
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. For a deeper walkthrough, read our Open Graph meta tags guide.
The detail most generators get wrong
One image size covers every platform: 1200×630 at a 1.91:1 ratio. Facebook accepts files up to 8MB, but LinkedIn and X cap at 5MB and both require an HTTPS image URL — anhttp:// link silently renders no image on X. The fix this tool enforces by structure: it only writes og:image:width, og:image:height, and og:image:alt when you actually provide an Image URL, so you never ship orphaned dimension tags pointing at nothing.
A subtler gotcha is conditional output. Leave Site name or Locale blank and no empty tag is emitted — the generator skips any field with no value. Likewise, article:author and article:published_time appear only when og:type is article. If you expected a tag and it is missing, fill its field; the block is built field-by-field, not from a fixed template.
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 to avoid layout shift.
2. Relative URLs
og:image and og:url must be absolute (https://example.com/...). Relative URLs like /og-image.png fail silently on most platforms. Always include the full origin.
3. Image behind auth
Social crawlers do not authenticate. og:image URLs must be publicly reachable without cookies or auth headers. Move the file to a CDN or public bucket.
4. Title and description duplicated badly
Don't copy the page's H1 verbatim into og:title — title and description appear together in the card, so redundant copy looks spammy. Rephrase each slightly.
Runs 100% in your browser
Your data never leaves your device. The tag block is assembled locally in JavaScript and copied with your browser's native clipboard — no uploads, nothing leaves your device. I tested the generator across all seven og:type values and all four Twitter card types, confirmed the article fields appear only for articles, pasted titles containing &, ", and <> to verify escaping, and checked that blank fields produce no stray tags. The output stays instant on every keystroke.
Frequently asked questions
Is this Open Graph generator free?
Yes — 100% free with no signup and no usage cap. Fill the form, copy the <head> block, and use it in any personal or commercial project.
Does my data get uploaded?
No. Tags are built and copied entirely in your browser with JavaScript, so nothing is sent to a server and the tool works offline once the page loads.
Which Open Graph tags are required?
The ogp.me spec lists four: og:title, og:type, og:image, and og:url. The rest are optional but improve the rendered card.
What size should og:image be?
1200×630 px (1.91:1) works across every platform. Keep files under 5MB for LinkedIn and X, and always serve the image over HTTPS.
Related SEO & web utilities
Preview how your OG tags render on each platform
Favicon GeneratorBuild the icon set that pairs with your previews
Image CompressorShrink the 1200×630 og:image under the 5MB cap
Aspect Ratio CalculatorVerify the 1.91:1 ratio for og:image
HTML FormatterTidy the <head> markup you generate here
HTML to JSXConvert meta tags for a React/Next.js head
HTML Entity ConverterEncode special characters for tag values
Word CounterTrim titles and descriptions to the right length
Markdown TOCGenerate a table of contents for article pages
CSS MinifierShrink stylesheet payload for faster shares
JavaScript MinifierCompress JS so crawlers fetch your page faster
All ToolsBrowse the full Toolk utility library
Guide: Open Graph Meta TagsRead the full Open Graph implementation guide
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.