Meta Tag Generator
Fill in your page’s title, description and share image to get ready-to-paste HTML meta tags, with a live preview of how the page may look in search results and when shared.
Search result preview
Social card preview
Previews are approximations. Your image is not loaded here, so nothing is requested from any server.
Your meta tags
🔒 Everything you type stays in your browser. Nothing is sent to a server.
By Shah Rukh, software developer · Last updated:
How to use the meta tag generator
- Write a title and description for one page. Watch the previews update as you type.
- Add the page’s address as the canonical URL, and a share image if you have one.
- Switch off anything you don’t need, such as the Twitter tags or the theme colour.
- Copy the HTML and paste it between
<head>and</head>on that page. If your page already has a title, charset or viewport tag, replace it; don’t keep two. - Repeat for each page. Every page should have its own title and description.
What each tag does
| Tag | What it does |
|---|---|
<title> | The name of the page in browser tabs, bookmarks and, usually, the clickable line in search results. |
description | A short summary. Search engines often show it under the title, but may choose other text from the page. |
canonical | Tells search engines which address is the main one when the same page opens at several addresses. |
robots | noindex asks search engines to keep the page out of results; nofollow asks them not to follow its links. With both boxes ticked the tag says index, follow, which is also what happens without it. |
viewport | Makes the page fit phone screens instead of showing a tiny desktop layout. |
charset | Declares UTF-8 so accents, non-Latin scripts and emoji display correctly. |
theme-color | Tints the browser’s toolbar in some mobile browsers. |
og: tags | Open Graph: the title, text and image used when the link is shared on Facebook, LinkedIn, WhatsApp, Discord and many other apps. |
twitter: tags | The card style on X (Twitter). X falls back to the Open Graph tags when its own tags are missing. |
rel="icon" | The small icon in the browser tab. |
The page language is not a meta tag: it belongs on the opening tag as <html lang="en">. The output includes a reminder comment with your code.
How long should the title and description be?
There is no official character limit. Search engines cut text by its width on screen, which changes with the device and the letters used. As a rough guide, titles of about 50–60 characters and descriptions of about 150–160 characters are usually shown in full on desktop. The counters above use those ranges as guidance only: a clear, accurate title that runs a little long is better than a vague one that fits.
A worked example
A title such as Tom & Jerry’s "Best" Pizza contains characters that would break HTML if pasted as they are. The generator writes them safely:
<title>Tom & Jerry’s "Best" Pizza</title> <meta property="og:title" content="Tom & Jerry’s "Best" Pizza">
Browsers and search engines turn these codes back into the original characters. To escape other text by hand, use the HTML entity encoder.
Tips and limits
- Meta tags describe a page; they do not make it rank on their own. The content of the page matters far more.
- The
keywordsmeta tag is left out on purpose. Google has said for years that it does not use it. - Use a full
https://address for the share image. Around 1200 × 630 pixels suits the large card; the image resizer can make one. - Social networks cache previews, so a changed image or title can take a while to appear on links that were already shared.
- Don’t combine
noindexwith a robots.txt block: if crawlers can’t fetch the page they never see the tag. See the robots.txt generator.
Frequently asked questions
Where do I paste the meta tags?
Inside the head section of your page’s HTML, between
and . In a website builder or WordPress, look for a custom head code box or use the SEO fields it provides.How long should a meta description be?
There is no fixed limit. Around 150 to 160 characters usually fits on desktop results, but search engines cut by width and sometimes show different text from the page.
Do meta tags improve my ranking?
Not directly in most cases. A good title helps search engines understand the page and a good description can encourage clicks, but rankings depend mainly on the page’s content.
What is a canonical URL?
It is the address you want search engines to treat as the main version of a page when the same content can be reached at several addresses, for example with and without tracking parameters.
Why isn’t my share image showing on social media?
Check that the image address is a full https:// URL that opens publicly, then give it time: networks cache previews. Some offer a debugging page that refreshes the cache.
Should I add a keywords meta tag?
It is not needed. Google does not use the keywords meta tag for ranking, so this generator leaves it out.
Related tools
Telegram Bot Maker
Build a Telegram bot without coding. Download ready-to-run Python.
Chrome Extension Maker
Make a site blocker, new tab page or link popup extension. No code.
Discord Embed Builder
Design Discord embeds with a live preview, JSON and discord.py code.
WhatsApp Link Generator
Make a wa.me chat link with a message, QR code and button.
Privacy Policy Generator
Answer a few questions and get a privacy policy template.
Terms & Conditions Generator
Tick the sections you need and get a terms and conditions template.