Meta tag generator
Generate the title, description, canonical, robots, Open Graph and X (Twitter) card tags for a page. Every value is escaped correctly, and the length guidance follows what search engines actually do.
Free · Runs in your browser · Updated 26 September 2026
Meta tag generator
The page
30 of about 60 characters
89 of about 160 characters
The one address you want search engines to treat as this page.
Colours the browser toolbar on some phones.
Social sharing
A full address. About 1200 × 630 pixels works well.
Search result preview (approximate)
https://example.com/tools
Free Developer Tools | Example
Small, free tools for developers that run in your browser. Nothing you paste is uploaded.
Google decides the real title and snippet. It shortens by width, not by character count, and sometimes writes its own.
HTML for your <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Developer Tools | Example</title>
<meta name="description" content="Small, free tools for developers that run in your browser. Nothing you paste is uploaded.">
<link rel="canonical" href="https://example.com/tools">
<!-- Open Graph: how the page looks when shared -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Developer Tools | Example">
<meta property="og:description" content="Small, free tools for developers that run in your browser. Nothing you paste is uploaded.">
<meta property="og:url" content="https://example.com/tools">
<meta property="og:image" content="https://example.com/card.png">
<meta property="og:image:alt" content="The Example tools page">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
<!-- X (Twitter) card. It reads the Open Graph tags above for title, description and image -->
<meta name="twitter:card" content="summary_large_image">
Generated 16 tags.
What each tag does
What goes in the head, and why.
| Tag | What it does | Used by |
|---|---|---|
<title> | The page’s name: the tab title and the usual headline in search results. | Browsers, search engines |
description | A summary that search engines may show under the title. Google sometimes writes its own. | Search engines |
canonical | The main address for the page when several lead to it. | Search engines |
robots | noindex, nofollow, noarchive and nosnippet control indexing and display. The default, index and follow, needs no tag. | Search engines |
viewport | Tells phones to render at device width. Google treats its presence as a sign the page is mobile-friendly. | Browsers, Google |
og:* | The title, description, image and type shown when the link is shared. | Facebook, LinkedIn, Slack, WhatsApp and others |
twitter:card | Picks the card layout on X. X reads the Open Graph tags for the content. | X (Twitter) |
theme-color | Colours the browser toolbar on some phones. | Some mobile browsers |
Escaping
Why the output is safe to paste.
A title such as Tom & "Jerry" <b> would break a tag if pasted in raw. The generator escapes ampersands, quotes and angle brackets in every value, so text can never close a tag early or add an element. The output was parsed back with an HTML parser to confirm that titles and descriptions survive exactly and that hostile input, such as a description containing "><script>, adds no elements.
- Every page should have its own title and description. Sitewide copies make pages hard to tell apart in results.
- The canonical URL, Open Graph URL and image must be full addresses, including https://.
- Add alt text for the Open Graph image, for people who cannot see it.
FAQ
Questions people ask first.
- How long should a title and description be?
- Google sets no fixed limit. It shortens titles and descriptions to fit the width of the result, so the practical guide is roughly 50 to 60 characters for a title and 155 to 160 for a description. Put the important words first. Google sometimes writes its own instead.
- Does the meta keywords tag help?
- No. Google says it does not use the keywords meta tag at all for indexing or ranking, so this generator has no field for it.
- What is a canonical URL for?
- It tells search engines which address is the main one when the same page is reachable at several (with tracking parameters, with and without www). Use the full address of the version you want shown.
- What is the difference between noindex and blocking in robots.txt?
- noindex asks search engines to leave a page out of results. robots.txt asks them not to fetch it. They do not combine: if robots.txt blocks a page, the crawler never sees the noindex tag. To keep a page out of results, leave it crawlable and use noindex.
- Why does my shared link show no picture or the wrong one?
- Check that the Open Graph image is a full address (https://…), that it loads without a login, and that it is a reasonable size. Sites cache link previews, so a change may not show until the platform’s cache refreshes; most platforms offer a debugger to force it.
From the team behind the tools
Building a product?
Daniotech builds web, mobile and real-time software for startups and teams. Tell us what you are making and who it is for.