Meta tag generator
Generate SEO, Open Graph and Twitter meta tags with a live preview. Copy the block into your page head.
Runs 100% in your browserHow to generate meta tags
- Enter your page details. Add the title, description, page URL and a share image URL.
- Check the preview. See how your link will look in Google and on social before you ship it.
- Copy the tags. Copy the generated block and paste it into your page <head>.
What meta tags actually control
Meta tags live in your page <head> and describe the page to machines, not visitors.
Only a handful carry weight today. The <title> element is the strongest on-page
relevance signal you control and supplies the blue clickable line in search; the
meta description is not a ranking factor but is the snippet Google usually shows
beneath it, so it does the selling. <link rel="canonical"> tells search engines
which URL is the authoritative version when the same content is reachable through several addresses —
the single most effective defence against duplicate-content dilution. The old
meta keywords tag is ignored by every major engine and is deliberately omitted here.
Writing titles and descriptions that earn clicks
Google truncates titles at roughly 580 pixels — about 50–60 characters — and descriptions near 150–160, which is why the counters above turn red past those marks. Front-load the words that matter: put the primary keyword and the most compelling phrase first, because a clipped tail still reads well when the important part leads. Note that Google rewrites titles on roughly a third of results when it judges yours unhelpful, vague or stuffed; a clear, specific, single-intent title is the best way to keep the one you wrote. Each page needs its own title and description — duplicating them across a site is a classic thin-content signal.
Open Graph, Twitter Cards, and common mistakes
Open Graph (og:*) drives the preview card on Facebook, LinkedIn, Slack, Discord and
most chat apps; Twitter/X reads its own twitter:card tags but falls back to Open Graph,
so shipping both covers everything. A summary_large_image card wants a 1200 × 630 image —
a wrong aspect ratio gets cropped unpredictably. The usual failures are a missing
og:image (links share as a bare grey box), a relative image path where platforms demand
an absolute URL, and forgetting that scrapers cache aggressively — change a preview and you often
have to re-scrape with the platform's own debugger before the update shows. Paste the generated block
just before </head>.
Frequently asked questions
- The essentials search engines and social platforms read:
title,meta description, canonical, robots, plus the full Open Graph (Facebook/LinkedIn) and Twitter Card tags for rich link previews. - Keep titles to about 50–60 characters and descriptions to 150–160 so they aren't truncated in Google results. The live counters turn red when you go over.
- Paste them inside the
<head>of your HTML page, before the closing</head>tag. - Open Graph covers Facebook, LinkedIn, Slack, Discord and most platforms. Twitter (X) reads Twitter Card tags but falls back to Open Graph, so including both gives you the best previews everywhere.