How to Generate Meta Tags for SEO
You added a page to your site, but it shows up with a blank or ugly preview on Google, X, Slack, and LinkedIn. The fix is a handful of meta tags in your page's <head> — and you don't need to memorize the exact attribute names or hand-write them.
This guide walks you through using Tooldrop's free meta tag generator. You type in your page title, description, and a couple of optional details, and it builds the full title, description, Open Graph, and Twitter card snippet for you — with live character-count guidance so nothing gets truncated. It runs entirely in your browser, so your inputs are never uploaded. No sign-up, no limits.
Step by step
- 1Open the Meta Tag Generator at /web/meta-tags. There's nothing to install and no account to create — the tool loads ready to use.
- 2In the Page title field, type the title you want for search results and browser tabs, e.g. "My Awesome Page — Brand". Watch the live counter underneath: it nudges you toward the ideal 50–60 characters and warns when a title may be truncated.
- 3In the Meta description box, write a short, compelling summary of the page. The counter here aims for 120–160 characters and flags when you're too short or likely to be cut off in search results.
- 4(Optional) Add your Canonical URL (e.g. https://example.com/page) and a Social share image URL (a 1200×630px image gives the best preview on social platforms). Leave either blank to simply omit that tag.
- 5Set the Open Graph type with the dropdown — Website, Article, Product, or Profile — and choose a Twitter card style: "Summary with large image" or "Summary".
- 6As you type, the Generated <head> tags panel fills in automatically with your complete snippet: title, meta description, Open Graph (og:*), and Twitter card tags, all properly escaped.
- 7Click the Copy button, then paste the snippet into the <head> section of your page's HTML. That's it — no file to download, no export step.
When and why you need meta tags
Meta tags are how a page tells search engines and social platforms how to present itself. The title and description shape your listing on Google. Open Graph tags (og:title, og:description, og:image, og:url, og:type) control the link preview on Facebook, LinkedIn, Slack, Discord, and most messaging apps. Twitter card tags do the same for X.
Reach for the generator whenever you publish a new page, change a page's title or summary, or notice a link sharing with a broken or empty preview. Static sites, landing pages, blog posts, and product pages all benefit. If a page already pulls these tags from a CMS or framework, you can still use the generator to draft the values and check their length before committing them.
Tips for the best results
Front-load the important words in your title and keep it under ~60 characters so it isn't cut off in search results — the live counter turns this into a quick visual check. Write the description as a genuine summary that earns the click, not a keyword list; 120–160 characters is the sweet spot.
For the social image, use an absolute URL (starting with https://) and aim for 1200×630px so it renders crisply as a large card. Pick the Open Graph type that matches the page — "Article" for blog posts, "Product" for shop pages — since some platforms use it to format the preview. Because the snippet updates as you type, you can tweak wording and instantly see the final markup.
Is it safe and private?
Yes. The Meta Tag Generator runs entirely in your browser. Everything you type — titles, descriptions, URLs, image links — is assembled into the snippet on your own device and is never sent to a server or uploaded anywhere. The output is escaped so quotes or angle brackets in your text can't break the markup.
There's no account, no email, and no usage cap. You can generate tags for as many pages as you like, including for unpublished or internal projects, without anything leaving your machine.
Common problems and fixes
Nothing appears in the output panel: the snippet only generates once you've entered a title or a description, so add at least one of those.
Your social preview still looks wrong after pasting: platforms cache previews aggressively. Use the relevant debugger (such as the Facebook Sharing Debugger or X's card validator) to force a re-scrape, and double-check that og:url and og:image use full https:// URLs reachable by the public.
The title or description looks clipped in search: that's the length warning doing its job — shorten the field until the counter reads "looks good" and regenerate.