ZeroTool Workbench
Meta Tag Generator
Generate a complete <head> meta block — Open Graph, Twitter Card, Schema.org JSON-LD, and SEO basics — with live previews for Google, Facebook, Twitter, and Discord. 100% client-side.
How to Use
- Fill in Title, Description, and Canonical URL — the three load-bearing fields.
- Add an og:image URL for proper social previews. 1200x630 PNG or JPEG works everywhere.
- Pick a Twitter card type —
summary_large_imagefor posts with a hero image,summaryfor compact unfurls. - Optionally choose a Schema.org @type to emit a minimal JSON-LD block.
- Switch tabs in the preview pane to verify how the page unfurls on Google SERP, Facebook, Twitter (X), and Discord.
- Copy the generated HTML and paste it inside your page’s
<head>.
What It Generates
- Basic SEO meta —
title,description,canonical,author,keywords,theme-color,viewport,robots. - Open Graph —
og:type,og:title,og:description,og:url,og:site_name,og:image(with width / height / alt),og:locale. - Twitter Card —
twitter:card,twitter:site,twitter:creator,twitter:title,twitter:description,twitter:image. - Schema.org JSON-LD — minimal
WebPage,Article,Product, orOrganizationblock (name / description / url / image).
Image Specs Cheat Sheet
| Platform | Recommended size | Aspect ratio |
|---|---|---|
| Facebook / LinkedIn / Discord | 1200x630 | 1.91:1 |
| Twitter summary_large_image | 1200x600 | 2:1 |
| Twitter summary | 400x400 | 1:1 |
| 1000x1500 | 2:3 |
Where to Paste the Output
The generated block goes inside <head>, ideally near the top — after <meta charset> and before any third-party scripts. Order does not matter for crawlers, but keeping social meta together makes audits easy.
For separate work that ships in the same SEO stack, see Robots.txt Generator for crawl rules and Favicon Generator for the icon set.
FAQ
What's the difference between Open Graph and Twitter Card?
Open Graph (og:) is the social-preview protocol Facebook introduced; LinkedIn, Slack, Discord, iMessage, and most platforms now read it. Twitter (X) added its own twitter:* tags with card-type controls. When both are present, Twitter prefers its own tags and falls back to Open Graph for missing fields, so it is normal practice to ship both.
What size should the og:image be?
1200x630 px (1.91:1) is the safe default for Facebook, LinkedIn, and Discord. Twitter's summary_large_image expects 2:1, and 1200x600 works fine. Keep the file under 5 MB and use PNG or JPEG. Most platforms also respect og:image:width and og:image:height when serving the preview.
Do I need both Open Graph and Schema.org JSON-LD?
They serve different consumers. Open Graph powers social-platform unfurl previews. Schema.org JSON-LD powers Google rich results and crawler understanding. Their overlap (title, description, image) is small. If you want both rich snippets in search and rich previews on social, ship both — they cost almost nothing extra.
Does this tool upload my image?
No. The image URL is only inserted as a string into the generated meta block and used as an img src reference inside the preview. There is no server fetch, no upload, nothing leaves your browser.
Why does canonical URL matter for Open Graph?
Canonical URL is shared as og:url. Without it, social platforms guess from the request URL — which often differs (utm parameters, trailing slash, www vs apex). A wrong canonical fragments share counts and breaks deduplication when the same article is reachable through multiple URLs.