Meta Tag Generator
Generate SEO, Open Graph and Twitter Card meta tags. Live Google SERP preview and social card preview as you type. Copy the HTML or download it as a file. No sign-up, no upload.
- Basic SEO, Open Graph and Twitter Card
- Live Google SERP preview
- Social card preview side by side
- Copy HTML or download as a file
Your meta tags
Preview
example.com
example.com › page
Your page title appears here
Your meta description appears here. Keep it between 120 and 160 characters for the best chance of it showing in full.
Generated HTML
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="robots" content="index, follow" /> <meta name="theme-color" content="#0B1020" /> <!-- Open Graph --> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" />
Fill in the form above and the HTML updates live. Copy it into the <head> of your page.
Everything runs in your browser. Nothing is uploaded. Nothing is logged.
- 100% Free
- No Sign-Up
- Live Preview
- Google SERP Mock
- Social Cards
- Works Offline
Every tag this tool can generate
Seventeen tags grouped by purpose. Everything except title, description and URL is optional but recommended where noted.
| Tag | Required | Group | What it does |
|---|---|---|---|
| title | Yes | Basic SEO | The clickable title in search results and in the browser tab |
| meta description | Recommended | Basic SEO | The snippet under the title. Aim for 120 to 160 characters |
| link canonical | Recommended | Basic SEO | Tells search engines the preferred URL when a page is reachable at multiple paths |
| meta robots | Optional | Basic SEO | index, follow is the default. Use noindex to keep a page out of search |
| meta viewport | Yes | Basic SEO | Required for mobile-friendly rendering on phones and tablets |
| meta charset | Yes | Basic SEO | Tells the browser the page is UTF-8 encoded |
| og:title | Recommended | Open Graph | Title used by Facebook, LinkedIn, WhatsApp and Slack previews |
| og:description | Recommended | Open Graph | The body text of the social preview card |
| og:image | Recommended | Open Graph | The share image. 1200 by 630 pixels is the safe default |
| og:url | Recommended | Open Graph | The canonical URL of the page |
| og:type | Recommended | Open Graph | website, article, product, profile or a media type |
| og:site_name | Optional | Open Graph | The name of your site, shown above the title on some platforms |
| twitter:card | Recommended | Twitter Card | summary_large_image for a wide image, summary for a small one |
| twitter:image | Recommended | Twitter Card | Falls back to og:image if omitted, but explicit is safer |
| twitter:site | Optional | Twitter Card | The @handle of the site owner, shown on the card |
| twitter:creator | Optional | Twitter Card | The @handle of the author of the content |
| theme-color | Optional | Browser UI | Tints the mobile browser address bar and PWA title bar |
Ideal lengths and image sizes
Getting the length right is the difference between your title being fully visible and being cut off with an ellipsis.
| Field | Ideal length | Ceiling | Notes |
|---|---|---|---|
| Title | 50 to 60 characters | About 600 pixels | Google truncates by pixel width, not characters, but 60 characters is a safe ceiling |
| Meta description | 120 to 160 characters | About 920 pixels | Longer descriptions still work but the end will be cut off with an ellipsis |
| og:title | Up to 88 characters | Varies by platform | Facebook allows longer titles than Google, but shorter is still clearer |
| og:description | Up to 200 characters | Varies by platform | LinkedIn truncates around 200 characters, Facebook around 300 |
| og:image | 1200 by 630 pixels | Under 8 MB | 1.91 to 1 aspect ratio, PNG or JPG, under 8 MB for most platforms |
Why this is the best free meta tag generator
Most generators stop at producing the HTML. This one shows you what the result will actually look like.
| Feature | TToolDeck | Typical online generator | SEO plugins |
|---|---|---|---|
| Runs entirely in your browser | Yes | Partial | Partial |
| No sign-up or email | Yes | Partial | Partial |
| Live Google SERP preview | Yes | Partial | No |
| Social card preview (X, Facebook style) | Yes | Partial | No |
| Open Graph + Twitter Card + robots + canonical | Yes | Yes | Yes |
| Title and description length guides | Yes | Partial | Partial |
| Copy HTML to clipboard in one click | Yes | Yes | Partial |
| Download as ready to paste .html file | Yes | No | No |
| No account, no quota, no rate limit | Yes | Partial | Yes |
| Works offline after first load | Yes | No | Yes |
Comparison reflects publicly available information at the time of writing. Features may change. Representative examples of common patterns.
More free developer tools
Free browser-based tools. Nothing uploaded, ever.
Schema Markup Generator
JSON-LD structured data for rich results
Cron Expression Builder
Build and read cron expressions in plain English
Word and Character Counter
Count words, characters and platform limits
Diff Checker
Compare two texts or code files side by side
JSON Formatter
Format, validate and minify JSON
Favicon Generator
Full favicon set from one image
How it works
- 1
Fill in the fields
Title, description, URL and share image are the essentials. Everything else is optional and can be left empty.
- 2
Check the previews
Switch between the Google SERP view and the social card view to confirm the title is not truncated and the image shows correctly.
- 3
Copy or download
Copy the generated HTML to your clipboard or download it as a file, then paste it inside the head tag of your page.
Everything you get for free
Live Google SERP preview
See exactly how your title, URL and description will look in a Google search result, with the same colours and truncation rules that Google uses.
Social card preview
Two side-by-side previews show how the page will look when shared on X (summary_large_image) and on Facebook or LinkedIn (Open Graph).
Open Graph, Twitter Card and more
Generate og:title, og:description, og:image, og:type, twitter:card, twitter:site and the rest of the tags in one shot. No missing property.
Title and description length guides
Live character counters under each field turn green when the length is ideal, amber when it is too short and rose when it will be cut off.
Canonical, robots and theme-color
Toggle a canonical URL, pick a robots directive from a ready-made list, and set a browser theme-color so mobile Chrome tints the address bar.
Copy or download the result
Copy the full HTML block to your clipboard with one click, or download it as a .html file that you can paste straight into your head section.
Every tag properly escaped
Ampersands, angle brackets and quotes in your title or description are escaped automatically, so the generated HTML is safe to paste and will not break your page.
Zero upload, zero logging
Everything runs in JavaScript on your device. There is no server side generation, no logging of your input and no analytics on the content itself.
What people use it for
Launching a new landing page
Every page needs at least a title, description, canonical URL and Open Graph image. Generate them all here in a minute and paste them into your head section.
Fixing social previews
Shared links that show no image or the wrong title usually mean missing Open Graph tags. Fill in og:image and og:title here and the preview will update after a re-scrape.
Improving click-through rate
The SERP preview shows you whether the title will be truncated at 60 characters. Rewrite until the important words are inside the visible range and CTR improves.
Setting up a blog post
Blog posts benefit from og:type set to article. Pick the Article type, add an author and a share image, and every share will render as a proper article card.
Deindexing a page
Pick noindex, follow from the robots dropdown to tell search engines not to index a page while still letting them follow its links. Useful for thank-you pages and internal drafts.
Migrating a site
When pages move, set the canonical URL to the new location and update the Open Graph URL so shares continue to point to the right page.
Questions people ask
What are meta tags?
Meta tags are small pieces of HTML in the head section of a page that describe the page to search engines, social networks and browsers. They control the title shown in search results, the snippet under it, the image shown when the page is shared, and how mobile browsers render the page.
Is this meta tag generator free?
Yes. Every field and every preview is free to use with no sign-up, no watermark and no daily limit. ToolDeck may show ads to pay for hosting, but they never lock a feature.
Is my content uploaded to a server?
No. Every field is stored in your browser as you type, and the HTML is generated in JavaScript on your device. Nothing is uploaded, nothing is logged and there is no server side generation.
Which tags should every page have?
At minimum: charset, viewport, title, meta description, and a canonical URL. For pages you want to share on social media, also add og:title, og:description, og:image and twitter:card. That set covers 90 percent of what matters.
How long should a page title be?
Aim for 50 to 60 characters. Google truncates titles by pixel width, which depends on the letters used, but 60 characters is a safe ceiling. The counter in the tool turns green when the title is inside the ideal range and rose when it is too long.
How long should a meta description be?
Aim for 120 to 160 characters. The description is not used for ranking directly, but a good one improves click-through rate. Anything past 160 characters risks being cut off with an ellipsis.
What is Open Graph?
Open Graph is a set of meta tags, originally from Facebook, that describe a page for social sharing. When a page with og:title, og:description and og:image is shared on Facebook, LinkedIn, WhatsApp, Slack or Discord, those tags control how the preview looks.
What is a Twitter Card?
A Twitter Card is the X (formerly Twitter) equivalent of Open Graph. The twitter:card tag chooses between a compact summary and a full-width summary_large_image. If you set summary_large_image and provide twitter:image (or og:image), the card will render wide with the image on top.
Do I need both Open Graph and Twitter Card tags?
Yes, ideally. X falls back to Open Graph when twitter tags are missing, but the fallback is not perfect. Setting both explicitly means every platform shows exactly what you intended.
What image size should I use for og:image?
1200 by 630 pixels is the safe default. That is a 1.91 to 1 aspect ratio, the same shape Facebook, LinkedIn, Slack, Discord and X all expect. Keep the file under 8 MB and use PNG or JPG for maximum compatibility.
What is a canonical URL?
A canonical URL tells search engines which of several similar URLs is the preferred version. If your page is reachable at /page and /page?utm_source=newsletter, the canonical points at /page so the two do not compete in search results.
What does noindex, follow mean?
noindex tells search engines not to include the page in their index. follow tells them to still crawl the links on that page. It is useful for thank-you pages, internal dashboards and any page you do not want appearing in search but want to keep in the crawl graph.
Can I use this for multiple pages?
Yes. There is no quota and no account. Change the fields, copy the HTML, paste it into the next page, and repeat. Each page gets its own set of tags and the tool keeps no record of what you generated.
Which browsers are supported?
Current versions of Chrome, Edge, Firefox and Safari, on desktop and mobile. Everything uses standard web APIs and no browser specific features.
Everything you type stays in your browser
The meta tag generator runs entirely in JavaScript on your device. There is no server side generation, no logging of your input and no analytics on the content itself. You can confirm this by watching your browser network tab while using the tool. Read how we keep it private.