Open Graph Meta Tag Generator for Social Sharing
Create Open Graph and social-card metadata from page details. Copy the generated tags into the page head and check the published result.
Open Graph Tag Generator workspace
<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>
Create Open Graph and social-card metadata from page details. Copy the generated tags into the page head and check the published result. Tags supply metadata; they do not force a platform to show a particular preview. The published page and image must be fetchable, and cached cards may remain until refreshed. Use accurate titles and descriptions rather than claims that are absent from the visible page.
How to use the Open Graph tag generator
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Which Open Graph tags does the ogp.me spec actually require?
Exactly four: og:title, og:type, og:image, and og:url. Everything else is optional, and the spec says any page without an explicit type should be treated as website. This generator always writes the required four and layers Twitter Card tags on top so X has what it prefers.
Why did a tag I expected not appear in the copied block?
The block is assembled field by field, not from a fixed template: leave Site name or Locale blank and no empty tag is emitted, and article:author plus article:published_time are written only when og:type is set to article. Fill the matching field (or switch the type) and the tag appears.
Is my draft title or description uploaded while I type?
No. The tag block is assembled locally in your browser from plain string concatenation and copied with your browser's native clipboard — tool input is not sent to Toolk. Toolk's page analytics do not receive the titles, URLs, or image paths you enter.
How do I preview the card before shipping the tags?
Paste your published URL into Toolk's meta tag previewer (/tools/meta-tag-previewer) for a side-by-side render, then run it through Facebook's Sharing Debugger too — platform caches can hold a stale preview for 24+ hours after you fix the markup.