{Asad Webs}
← Toolz / SEO & Web / Meta Tag Generator
SEO·14

Meta Tag Generator

Fill in what your page is about — the tags, a Google preview and a social-card preview update as you type. Nothing is uploaded or stored.

Open Graph & Twitter (social sharing)

Your meta tags




  
  








Google preview



  
E
Example
https://example.com

  
Your page title will appear here

  
Your meta description will appear here — write it for the person reading this, not for a robot.





Social card preview





  





Build complete meta tags, Open Graph and Twitter card markup from one form — with a live Google search preview and social card preview — then copy the ready-to-paste HTML.




  Part of the Toolz collection — free browser-based utilities.









100% free · No sign-up · No daily limits · No watermarks · Processed in your browser — files never leave your device







UNDERSTAND YOUR RESULTS
Meta Tag Generator — Perfect Head Tags with Live Previews guide
Build complete meta tags, Open Graph and Twitter card markup from one form — with a live Google search preview and social card preview — then copy the ready-to-paste HTML.



How to use this tool
  1. Write your page title and meta description. The counters warn you past roughly 60 and 160 characters — the points where Google usually truncates — and the Google preview below shows the result as a searcher would see it.
  2. Add your page’s canonical URL, and optionally keywords, author, a robots directive and a theme colour. Leave robots on “index, follow” unless you specifically want a page kept out of search.
  3. Fill in the social fields: a sharing title and description (they inherit the main ones if left blank), the page type, and a social image URL — 1200 × 630 px is the size every platform handles best. The social card preview updates as you type.
  4. Click Copy the tags and paste the block inside your page’s <head>. Done — no plugin, no account, nothing stored.
A worked example
A bakery launching a new site writes the title “Sourdough & More — Artisan Bakery in Leeds”, a 150-character description about its bread and opening hours, links its homepage as canonical, and adds a photo of the shopfront as the social image. The previews show exactly what Google and WhatsApp will display, and the copied block drops straight into the site’s header template.


How it works
The generator assembles the standard tag set in the order crawlers and platforms expect: primary tags (title, description, robots, canonical), then Open Graph (og:type, og:url, og:title, og:description, og:image) which Facebook, LinkedIn, WhatsApp and most messengers read, then the Twitter card equivalents. Values are escaped for HTML attributes, blank optional fields are omitted rather than emitted empty, and the previews render the same values so what you see is what gets pasted.


Frequently asked questions
What is the difference between meta tags and Open Graph tags?
Meta tags (title, description, robots) speak to search engines and browsers. Open Graph tags (og:) speak to social platforms and chat apps, deciding the title, description and image shown when a link is shared. A complete page needs both sets, which is why this generator produces them together.
How long should my title and description be?
Titles display fully at roughly 50–60 characters and descriptions at about 150–160 on desktop (less on mobile). Those are display limits, not ranking rules — a longer title still works, its tail is just cut in results. The counters on the form flag both points as you type.
Which robots setting should I choose?
“index, follow” for almost every page — it is the default behaviour anyway. Use noindex for thank-you pages, internal search results, login screens and anything you do not want in Google. nofollow variants are for links you do not endorse; most sites never need them sitewide.
Why does my shared link show the wrong image or an old title?
Platforms cache what they first fetched. After fixing your tags, force a refresh with Facebook’s Sharing Debugger or LinkedIn’s Post Inspector, and check the og:image URL loads publicly — a 404 or a login wall there is the usual culprit.
Do I still need these tags if I use WordPress or Shopify?
Your platform or SEO plugin generates a version of them already. This generator is for hand-built sites, landing pages and quick fixes — and for learning what the plugins are actually emitting, since the same fields appear here in the open.