Meta Tag Generator
Fill in your page details to generate SEO-optimized meta tags with Open Graph and Twitter Card support.
Last reviewed: April 2026New to this tool? Click here for instructions
Type your page title, description, canonical URL, and social image into the form on the left, and the tool emits a complete <head> meta tag block on the right — title, description, viewport, theme-color, canonical, robots, Open Graph, and Twitter Card — ready to paste into any HTML page. Everything runs locally in the browser. Nothing you enter is uploaded, logged, or persisted.
What This Tool Does
This generator produces the entire <head> meta tag set that search engines and social platforms read when they index your page or render a link preview. The output covers the four families of tags that matter in 2026: the HTML5 standards layer (charset, viewport, title, description), the indexing controls (canonical, robots, content-language, author), the Open Graph protocol (og:title, og:description, og:type, og:url, og:image), and the Twitter Card protocol (twitter:card, twitter:title, twitter:description, twitter:image). It also emits the theme-color meta tag for mobile browser chrome tinting.
The two character counters next to the title and description fields warn when you cross Google's truncation thresholds (60 characters and 160 characters respectively). The tool does not attempt to rank your page for you — that work happens elsewhere — but it guarantees the tags Google, Facebook, Twitter, LinkedIn, and Slack actually look at are present, well-formed, and visible at a glance.
How to Use It
Fill in the form left-to-right, top-to-bottom. As you type in any field, the right pane updates in real time — there is no submit button. The character counters next to Page Title and Meta Description turn red if you exceed the recommended length. Hit Copy to grab the full meta block to your clipboard, or Download to save it as a standalone HTML fragment.
The Try Example button preloads a realistic page so you can see a complete output without typing anything. Use Clear All to reset the form. For the canonical URL field, paste the exact URL you want indexed — including https:// and the trailing path. The OG image URL must be absolute (relative paths are silently ignored by Facebook's scraper). The Robots dropdown covers the four most common combinations; if you need niche directives like max-image-preview:large or noarchive, append them manually after copying the output.
The Twitter Card selector defaults to summary_large_image — the modern choice for any page with a hero image. Switch to summary only for pages with no representative image, where the small square thumbnail is more appropriate. The Language field controls the content-language HTTP-equiv tag; for multilingual sites, this should match the lang attribute on your <html> element.
Worked Example: Building Tags for a SaaS Landing Page
Suppose you are launching a fictional time-tracking SaaS called Clockfish at https://clockfish.com/. The page has a hero image at /og/clockfish-hero.png sized 1200 × 630, and you want it ranked for "time tracking for agencies."
- Title:
Time Tracking for Agencies — Clockfish(45 chars, well under 60) - Description:
Clockfish gives small agencies a single dashboard for billable hours, project budgets, and invoice export. Free 14-day trial, no card required.(156 chars, just under 160) - Canonical:
https://clockfish.com/ - Robots:
index, follow - OG type:
website(usearticleonly for blog posts) - OG image:
https://clockfish.com/og/clockfish-hero.png - Twitter Card:
summary_large_image
The tool emits 17 meta tags total. The diagram below shows which platform consumes which tag — Google reads the SEO layer, Facebook and LinkedIn read Open Graph, Twitter reads its own card tags (falling back to OG if absent), and Chrome on Android reads theme-color to tint the address bar.
Paste the output into the <head> of your page (above </head>), redeploy, and test with Facebook's Sharing Debugger and Twitter's Card Validator — both force a fresh scrape and surface any missing tags or unreachable images. The first scrape result is cached aggressively, so always validate before announcing a launch.
Common Use Cases
SEO Foundation for a New Domain
The fastest way to make a new domain indexable is to generate the four core tags (title, description, canonical, robots) for every page before launch. Search engines do not require Open Graph to index a page, but a missing or duplicated canonical can wipe out months of ranking work. Generating the head block here forces explicit decisions about each tag — there is no silent default that bites you six months later.
Social Share Previews That Don't Embarrass You
When a marketing team posts the launch link to LinkedIn or X, the preview either looks polished or it looks like an empty white rectangle. The difference is whether og:image resolves to a 1200 × 630 image and whether og:title and og:description are present at scrape time. Generate the tags here and validate with the platform debuggers before the announcement goes out.
PWA Manifest Hints and Mobile Browser Chrome
Progressive Web Apps rely on a JSON manifest for installation, but the theme-color meta tag in the HTML head is what determines the color of Chrome's address bar on Android and the status bar on iOS 15+. Combined with viewport (which the tool emits with width=device-width, initial-scale=1) and a correctly sized apple-touch-icon, these tags give your site a native-app feel on mobile without any additional code.
Dark Mode Browser Chrome
Modern Chrome supports two theme-color tags with media queries — one for light mode, one for dark — letting the address bar tint shift automatically when the user switches their OS theme. The tool emits a single tag by default; the dual-tag pattern can be added manually after copying the output. The SERP Preview tool pairs naturally with this workflow when you want to also see how your title and description render in Google results before deploying.
Edge Cases and Limitations
Meta tags are deceptively simple, and almost every one of them has a quirk that surprises someone every quarter. The list below collects the constraints worth knowing before they bite you.
Google may ignore your meta description entirely. Since 2018, Google's quality algorithms have been willing to synthesize a description from page body content when the written description seems weak, off-topic, or duplicated across pages. You cannot force Google to use your description — you can only make it good enough that the algorithm prefers it. Keep descriptions specific to the page (not boilerplate) and aim for the 150–160 character sweet spot.
Title tags truncate at 60 characters. Google's SERP layout cuts titles at roughly 600 pixels on desktop, which works out to 60 characters of typical English text. Anything longer is replaced with an ellipsis. Mobile is slightly shorter. Brand names should usually live at the end (Time Tracking for Agencies — Clockfish), so the cut falls on the brand rather than the keyword.
Open Graph images smaller than 600 × 315 won't render large. Facebook silently demotes the preview to a small thumbnail card. The official recommendation is 1200 × 630 — anything below is risky. Image files should be under 8 MB; CDN-hosted PNG or JPEG works reliably, while WebP support across scrapers remains spotty in 2026.
Multiple canonical tags invalidate all of them. If two <link rel="canonical"> tags ship on the same page (common when a CMS plugin and a theme both inject one), Google ignores both and picks a canonical from page signals — often badly. Audit rendered HTML, not source templates, to verify exactly one canonical ships per page.
The viewport meta tag is required for mobile. Without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers render the page at a desktop width and scale it down, producing tiny illegible text. The tool emits this tag unconditionally — there is no toggle to disable it.
The theme-color tag is not yet universal on iOS Safari. Support landed in iOS 15 (September 2021), but devices still running iOS 14 or earlier ignore the tag entirely. Android Chrome has supported it since 2014, so the tag is safe to ship — older iPhones simply fall back to the default tab chrome.
Behind the Scenes
The HTML5 Meta Tag Spec
Meta tags are formally defined in the WHATWG HTML Living Standard, section 4.2.5. The spec distinguishes four uses for the <meta> element: charset declarations, http-equiv pragma directives (a legacy mechanism for emulating HTTP headers), named metadata via the name attribute, and arbitrary author-defined metadata. Only a handful of name values are formally registered — description, keywords, author, generator, referrer, theme-color, and viewport — but search engines and social platforms have layered their own conventions on top, which is why the modern head block is a patchwork rather than a clean standard.
The Open Graph Protocol (Facebook, 2010)
Facebook introduced the Open Graph protocol at f8 in April 2010 to make web pages embeddable into Facebook's social graph as first-class objects. The protocol uses the RDFa namespace (property="og:*") rather than the standard name attribute, which initially made HTML validators complain. Adoption was rapid — LinkedIn, Pinterest, and Twitter all built scrapers within two years — and OG became the de facto standard for link previews. The protocol has been minimally updated since launch; the 2010 spec is still substantially the working spec in 2026.
Schema.org vs. Open Graph
Schema.org (launched in 2011 by Google, Bing, Yahoo, and Yandex) tackles a different problem: rich structured data for search result enhancement (recipe cards, product pricing, event dates, FAQ accordions). Schema.org markup typically lives in a JSON-LD <script type="application/ld+json"> block rather than meta tags. The two systems are complementary — OG drives social previews, Schema.org drives SERP rich snippets — and modern pages emit both. The Schema Generator tool handles the JSON-LD side.
Sec-CH-Prefers-Color-Scheme and the Future
The newer Sec-CH-Prefers-Color-Scheme client hint header (Chrome 93+) lets servers know the user's color scheme preference before HTML is rendered, enabling dark-mode-optimized markup at the response layer. This eventually reduces the role of client-side theme-color meta tags, but adoption is still narrow as of 2026. For now, shipping both a CSS prefers-color-scheme media query and a paired set of theme-color meta tags remains the safe choice.
Comparison: This Tool vs. SEO Mofo vs. Metricool vs. Sistrix
Several existing meta tag tools cover overlapping ground. The table below positions this tool against three of the most cited alternatives.
| Tool | Open Graph | Twitter Cards | Live Preview | Data Stays Local | Account Required |
|---|---|---|---|---|---|
| ThisDevTool | Yes (full set) | Yes (summary, large image) | Yes (real-time) | Yes (100% client-side) | No |
| SEO Mofo | Partial (legacy) | No | Yes (SERP only) | Yes | No |
| Metricool | Yes | Yes | Yes (with analytics) | No (server-side) | Yes (free tier) |
| Sistrix | Yes | Yes | Yes (SERP focus) | No (server-side) | No (with usage caps) |
The pragmatic distinction: this tool is the fastest option when you need a head block for one page right now and you do not want to create an account or send the values you are typing to a third party. Metricool and Sistrix are better when meta generation is one step inside a larger ongoing SEO workflow. SEO Mofo focuses narrowly on SERP preview rather than full head emission. For visual SERP simulation, pair this tool with SERP Preview; for the social preview side, pair with OG / Twitter Card Preview.
Frequently Asked Questions
How long should a meta description be?
Aim for 150 to 160 characters. Google truncates descriptions visually at roughly 920 pixels on desktop and 680 pixels on mobile, which translates to about 155 characters of typical English text. Anything longer is not penalized — it is simply cut off with an ellipsis. Anything substantially shorter risks under-using the available SERP real estate. Note that Google may still ignore your written description entirely and synthesize one from page body content when its quality algorithms judge the body text to be a better match for the query.
Are meta keywords dead?
Yes. Google publicly confirmed in September 2009 that it does not use the meta keywords tag for web ranking, and that position has not changed in the seventeen years since. Bing followed in 2014, treating any presence of meta keywords as a weak spam signal rather than a ranking input. The tag is still emitted for compatibility with a handful of internal site-search engines and legacy CMS platforms, but its SEO value on the public web is zero. Leaving it blank or omitting it entirely is the correct modern choice.
What is the recommended Open Graph image size?
Facebook recommends 1200 × 630 pixels (1.91:1 aspect ratio) and rejects any image smaller than 600 × 315 from large-format card rendering. LinkedIn uses the same 1200 × 627 target. Twitter's summary_large_image card accepts 1200 × 628 with a 2:1 aspect ratio. Use a single 1200 × 630 image to satisfy all three platforms simultaneously. Files should stay under 8 MB for Facebook, ideally under 5 MB for cross-platform safety, and PNG or JPEG are both accepted — WebP support remains spotty in 2026.
What is the difference between a Twitter Card and Open Graph?
Open Graph is a 2010 Facebook-originated protocol now used by LinkedIn, Pinterest, Discord, Slack, iMessage, and almost every modern link-preview surface. Twitter Cards are a parallel, Twitter-specific protocol predating its Open Graph fallback support. In practice, Twitter falls back to og:title and og:description when twitter:title and twitter:description are absent, so you only need explicit twitter:card and twitter:image tags. The tool emits both sets to maximize coverage across platforms that have implementation quirks — Slack, for example, has historically been picky about explicit Twitter Card tags being present.
Why isn't my social preview showing?
Five common causes account for nearly all missing previews. First, the og:image URL must be absolute (https://example.com/image.png) — relative paths fail silently. Second, the image must already be reachable when the scraper crawls; new uploads behind authentication or signed URLs are invisible. Third, social platforms aggressively cache scrape results — use Facebook's Sharing Debugger or Twitter's Card Validator to force a re-scrape. Fourth, image dimensions below 600 × 315 demote the preview to a small thumbnail card. Fifth, redirects between the canonical URL and the og:url tag can cause some scrapers to abandon the fetch entirely.
Should I have multiple canonical tags on one page?
No. Google's documentation is explicit: when multiple canonical tags appear on a single page, all of them are ignored and the search engine determines the canonical itself from page signals — which often produces a worse choice than your intended canonical. Common causes of accidental duplication include CMS plugins that inject a tag while the theme already emits one, server-side rendering frameworks adding tags during build, and reverse proxies stripping or replacing the head. Audit the rendered HTML (not the source template) to confirm exactly one rel=canonical tag ships per page.
What's the difference between robots meta and robots.txt?
The robots meta tag is page-level and lives inside the HTML head — it controls indexing and link following for that specific URL. The robots.txt file is site-level and lives at the domain root — it controls whether crawlers may fetch a URL at all. The critical distinction: robots.txt blocks crawling, but a URL blocked in robots.txt can still appear in search results without a snippet if other sites link to it. To genuinely keep a page out of the index, allow crawling in robots.txt and use <meta name="robots" content="noindex"> on the page itself — the crawler must be able to fetch the page to see the noindex directive.
Does the meta theme-color tag work everywhere?
Mostly. Chrome on Android tints the address bar to match theme-color since 2014, Samsung Internet and Edge mobile follow suit, and Chrome on desktop adopted it for the tab strip in 2021. Safari is the long-standing holdout — iOS Safari ignored theme-color through iOS 14 and only began respecting it in iOS 15 (September 2021) on a per-tab basis. Older iPhones still in active use (pre-iOS 15) silently ignore it. Modern usage typically pairs the tag with a media query attribute (media="(prefers-color-scheme: dark)") to ship two colors — one for light mode, one for dark — letting browsers pick the right one without JavaScript.