Meta Tags Generator
Type in your page title and description. The tool writes the code that controls how your page looks in Google and how it looks when someone shares the link. Character counts warn you before Google truncates, and both previews show the result as you type.
Page details
Google result preview
example.com › page
Your page title appears here
Your meta description appears here. Google shows roughly 155 characters on desktop before it truncates.
Social card preview
Short answer
Meta tags are HTML tags in the head of a page that tell search engines and social platforms what the page is, without changing anything a visitor sees. Four matter: the title tag (50 to 60 characters, and a ranking factor), the meta description (150 to 160 characters, not a ranking factor but the text that earns the click), the canonical link (which URL to index), and the robots directive (whether to index at all). Open Graph and Twitter card tags control how the link renders when someone shares it.
What are meta tags, and why do they matter?
Every page has two versions. There is the page a visitor sees, and there is the summary of it that shows up everywhere else: in Google results, in a Slack preview, on LinkedIn, in a WhatsApp message. Meta tags are the code that controls the second one. They are invisible on the page itself and they do most of the work of persuading someone to click through to it.
Two of them carry the weight. The title tag is the blue headline in search results, and it is one of the few on-page elements Google still treats as a direct ranking factor. The meta description is the two lines of grey text underneath, and it is not a ranking factor at all. What the description does is decide whether the person scanning ten results picks yours.
Get them wrong, leave them blank, or let a CMS auto-generate them, and Google writes its own version from whatever text it finds first on the page. Sometimes that is fine. Often it is a cookie banner, a navigation menu, or the first half-sentence of a paragraph that was never written to stand on its own.
The rest of the block handles the other surfaces. Open Graph and Twitter card tags decide the headline, description, and image on a shared link. Without them, a link pasted into Slack shows as a bare URL. With them, it shows as a card with a picture. Same page, very different click rate.
Meta tag length limits
Every limit below is a practical guideline rather than a hard cutoff. Google truncates on pixel width, not character count, so a title in wide capitals gets cut earlier than a narrow lowercase one of the same length. Character counts are the proxy every tool uses, because they are the thing you can actually watch while typing.
| Tag | Recommended | Practical limit | What happens if you exceed it |
|---|---|---|---|
| Title tag | 50–60 chars | ~580px desktop, ~920px mobile | Truncated with an ellipsis, or rewritten entirely by Google |
| Meta description | 150–160 chars | ~920px desktop, ~680px mobile | Cut mid-sentence; Google often substitutes its own snippet |
| og:title | 60–90 chars | Varies by platform | Truncated in the share card |
| og:description | 2–4 lines | ~200 chars on most platforms | Truncated; LinkedIn is the harshest |
| og:image | 1200×630px | 5MB, 1.91:1 ratio | Cropped, or dropped entirely if the URL is relative |
| twitter:card | summary_large_image | Not applicable | Falls back to a small thumbnail card |
The rule that matters most
Front-load everything. Whatever the limit, put the words that decide the click inside the first 50 characters of a title and the first 120 of a description. Anything after that is a bonus you may not get to keep.
Every tag, and what it controls
This generator writes all of the tags below. Not every page needs every one, and the required column reflects what actually costs you something when it is missing, rather than what a validator will complain about.
| Tag | What it controls | Who reads it | Required |
|---|---|---|---|
| title | The clickable headline in search results and the browser tab | Google, Bing, browsers | Yes |
| meta description | The grey text under your search result | Google, Bing | Recommended |
| link rel=canonical | Which URL should be indexed when several serve the same page | Search engines | Yes |
| meta robots | Whether the page may be indexed and its links followed | Search engines | Yes |
| og:title, og:description | Headline and body text on a shared link | Facebook, LinkedIn, Slack, WhatsApp | Recommended |
| og:image | The picture on a shared link | Facebook, LinkedIn, Slack, WhatsApp | Recommended |
| og:url | Which URL shares are attributed to | Social platforms | Recommended |
| og:type | What kind of thing the page is (website, article, product) | Social platforms | Optional |
| twitter:card | Small thumbnail card or large image card | X | Recommended |
| meta keywords | Nothing, on any major search engine, since 2009 | Some internal search tools | No |
How to add meta tags to your site
The writing is the hard part and the installing is not. Work through the six steps below, then paste the generated block into whichever of the four platforms you are on.
- 01
Write the title tag first
Aim for 50 to 60 characters, with the words that matter in the first 50. Lead with the specific thing the page is about, not your brand name. The brand goes at the end after a pipe or a dash, or gets dropped entirely on pages where space is tight.
- 02
Write a description that earns the click
150 to 160 characters. Write it for the query you actually want to win, and say what the reader gets rather than what the page contains. Google rewrites descriptions on roughly 70 percent of results, so treat this as a strong suggestion rather than a guarantee.
- 03
Set the canonical URL
Use the absolute URL of the page as you want it indexed, including protocol and trailing slash exactly as they appear. This tool reuses the same value for og:url so the two can never drift apart.
- 04
Add a share image at 1200 by 630
Absolute HTTPS URL, under 5MB. Relative paths fail silently on every social platform. If you have no dedicated image, any wide hero image beats none: a link with no image renders as a bare URL in Slack and on LinkedIn.
- 05
Check the robots directive before you ship
Confirm the page should actually be indexed. A noindex left over from staging is the single most expensive meta tag mistake there is, and it is invisible from inside most CMS interfaces.
- 06
Paste the block and verify what rendered
The output goes inside the head element. Once it is live, fetch the page and confirm the tags rendered as written, because plugins and tag managers frequently overwrite them.
WordPress
Use your SEO plugin's per-page fields (Yoast, Rank Math, and SEOPress all have them) rather than pasting raw HTML into the theme header. A plugin and a theme both emitting a title tag is the most common duplicate-title cause there is, and Google picks whichever one it prefers rather than the one you meant.
Next.js
Map the values onto the metadata export in your page or layout file instead of pasting raw tags. Next builds the head from that object, and hand-written tags elsewhere will either be moved or ignored depending on the version you are running.
Shopify
Title and description live under Search engine listing on each product, collection, or page. Open Graph tags come from theme.liquid, and most themes ship with a reasonable default that pulls the product image, so check what is already there before adding your own and ending up with two of everything.
Static HTML
Paste the block straight into the <head> of the page, before the closing tag. Nothing else to do.
Six mistakes that break meta tags
1. A noindex left over from staging
The most expensive mistake on this list by a wide margin. A site is built behind a noindex, the launch checklist misses it, and the site sits invisible for weeks while everyone wonders why the traffic never arrived. It is invisible from inside most CMS interfaces, which is exactly why it survives launch.
2. Two title tags on one page
Usually a theme and an SEO plugin both emitting one. Google picks one of them, not necessarily yours. This never shows up in the CMS, only in the rendered HTML.
3. A relative path in og:image
Social platforms do not resolve relative URLs. An og:image of /images/hero.png fails silently everywhere and your link renders with no picture at all. It has to be the full absolute URL, protocol included.
4. Descriptions that describe the page instead of selling it
"This page contains information about our pricing plans" tells a searcher nothing they had not already assumed from the title. Say what they get: the actual starting price, the trial length, the thing that makes clicking worth it.
5. The same title on hundreds of pages
Nearly always a template pulling from a field that is empty, so every page in a section inherits the same fallback. Near-identical titles read as near-identical pages, and only one of them is going to rank.
6. Keyword stuffing the title
"Running Shoes | Buy Running Shoes | Cheap Running Shoes Online" ranks worse than "Running Shoes for Wide Feet, Tested Over 200 Miles", and gets clicked far less often. Google has been rewriting titles like the first one since 2021.
How to catch these
Every mistake here is invisible from inside your CMS and obvious in the rendered HTML. Check what actually shipped with the meta tag checker, which fetches a live URL and reports the tags as a crawler sees them.
What this tool generates
- Title tag, with a live count against the 50 to 60 character target
- Meta description, counted against the 150 to 160 character target
- Canonical link, emitted as rel=canonical and reused for og:url so the two cannot drift apart
- Robots directive, with index/noindex and follow/nofollow toggles
- Open Graph tags for type, title, description, url, site name, locale, and image
- Twitter card tags for card type, title, description, image, alt text, and handle
- Image dimensions, with og:image:width and height preset to 1200×630
- HTML escaping, so quotes and angle brackets in your copy cannot break the markup
Nothing you type leaves your browser. The tool makes no network request, stores nothing, and keeps working with the network disconnected once the page has loaded.
Frequently asked questions
What meta tags does a page actually need?
Four carry real weight: a title tag, a meta description, a canonical link, and a robots directive. Everything else is optional. Open Graph and Twitter card tags do not affect rankings, but they control how your page looks when someone shares it, which affects the click-through you get from social and from Slack or WhatsApp previews.
How long should a title tag be?
Aim for 50 to 60 characters. Google truncates on pixel width rather than character count (roughly 580px on desktop), so a title full of wide capital letters can be cut short of 60 while a narrow one survives past it. If the title matters, keep the important words in the first 50 characters.
How long should a meta description be?
150 to 160 characters. Google rewrites descriptions on around 70 percent of results anyway, usually pulling a snippet from the body copy that matches the query. Write the description for the query you actually want to win, and treat it as a suggestion rather than a guarantee.
Do meta tags affect rankings?
The title tag is a ranking factor. The meta description is not, and has not been since 2009. Open Graph and Twitter card tags have never been ranking factors. What the description and social tags affect is click-through rate, which on a page that already ranks is usually a faster lever to pull than trying to move position.
Do meta keywords still do anything?
No. Google has ignored the keywords meta tag since 2009 and says so publicly. This tool still generates it because a few internal search systems and older CMS integrations read it, but it will not help you rank. Leave it blank unless something in your stack needs it.
What size should my Open Graph image be?
1200 by 630 pixels, under 5MB, served over HTTPS at an absolute URL. Relative paths silently fail on every platform. Facebook and LinkedIn crawl the image once and cache it, so if you change the file you need to re-scrape the URL in their debugging tools before the new version shows.
Why does my share preview show the wrong image?
Almost always caching. The platform crawled your page before the og:image tag existed, or before you changed it, and it is serving the cached copy. Re-scrape the URL in the platform's own debugger. The second common cause is a relative image path, which needs to be absolute.
Should og:url and my canonical tag match?
Yes. The canonical tells search engines which URL to index and og:url tells social platforms which URL to attribute shares to. When they disagree, your share signals accumulate on one URL while your ranking signals accumulate on another. This tool sets both from the same field so they cannot drift.
Do I need Twitter card tags if I already have Open Graph?
Mostly no. X falls back to Open Graph tags when Twitter-specific ones are absent, so og:title, og:description, and og:image will render a card on their own. The one tag worth setting explicitly is twitter:card, because it decides whether you get a small thumbnail or a large image, and the large one takes up far more space in a feed.
Can two pages share the same title and description?
They should not. Duplicate titles across many pages is one of the most common issues a site-wide crawl surfaces, and it usually means a template is generating them from a field that is empty. Google treats near-identical titles as a signal that the pages are near-identical too, which is rarely what you want.
Where exactly does the generated code go?
Inside the head element, before the closing tag. On WordPress it belongs in your SEO plugin's per-page fields rather than the theme header, or you will end up with two competing title tags. On Next.js, map the values onto the metadata export instead of pasting raw HTML. On a static site, paste it straight in.
Does this tool send my content anywhere?
No. Everything runs in your browser. There is no request to a server, nothing is stored, and nothing is logged. You can disconnect from the network and the tool still works.
Generating tags one page at a time does not scale
CrawlRaven crawls every page on your site, flags the missing and duplicate titles and descriptions, then ranks them by the clicks and impressions each page already earns in Search Console. You fix the ones that matter first.