Meta Tag Generator — SEO and social
Fill in the title, description and URL once. The complete HTML head block — search-engine meta tags, Open Graph for Facebook/LinkedIn, Twitter Card and canonical URL — is generated and ready to paste.
Generated HTML
<title>Free online utility — fast, no sign-up</title> <meta name="description" content="A short, accurate description of the page (140-160 characters works best for search engines)."> <meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="canonical" href="https://example.com/"> <!-- Open Graph --> <meta property="og:type" content="website"> <meta property="og:site_name" content="Example Site"> <meta property="og:title" content="Free online utility — fast, no sign-up"> <meta property="og:description" content="A short, accurate description of the page (140-160 characters works best for search engines)."> <meta property="og:url" content="https://example.com/"> <meta property="og:image" content="https://example.com/og.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free online utility — fast, no sign-up"> <meta name="twitter:description" content="A short, accurate description of the page (140-160 characters works best for search engines)."> <meta name="twitter:image" content="https://example.com/og.png"> <meta name="twitter:site" content="@example">
Why meta tags still matter in 2026
Search engines parse a page's <title> and meta description to decide how to label it in results. Open Graph and Twitter Card tags decide what your link looks like when someone shares it on Facebook, LinkedIn, X, Slack, Discord or any link-preview-aware platform. A complete head block is one of the cheapest SEO and social wins available — five minutes per page, served on every visit.
The output of this tool is opinionated but standard: a 60-character-friendly title, a 140-160-character description, OG and Twitter images at 1200×630 (the universally accepted aspect ratio), a canonical link to consolidate URL variants, and a robots meta with sane defaults (index, follow, large image previews). Edit the values, copy the block, drop it inside <head>.
How to use this tool
- Fill in the title (≤60 characters reads best in Google), the description (140-160 characters), and the canonical URL of the page. The character counters help you stay in range.
- Add the optional fields: site name (used by Open Graph), image URL for the social preview (1200×630 PNG/JPG), Twitter handle, author, and the robots directive (Indexable for public pages, Hidden for staging or private pages).
- Copy the generated HTML and paste it directly into the <head> of your page (or into the metadata API of your framework if you're using Next.js, Nuxt or similar).
Frequently asked questions
How long should my title and description be?
Title: aim for under 60 characters — Google truncates around 580 pixels which corresponds to ~50-60 characters. Description: 140-160 characters — long enough to be useful, short enough to display fully on most search engines. Going longer is not penalised but the extra text usually gets clipped.
What size should the og:image be?
1200×630 pixels at a 1.91:1 aspect ratio. That's the size every major platform (Facebook, LinkedIn, X, Discord, Slack) uses for the large preview. Smaller images get scaled up and look fuzzy; non-1.91:1 ratios get cropped unpredictably.
Do I still need a canonical link?
Yes. The canonical link tells search engines which URL to treat as the primary version when multiple URLs serve the same content (with vs without trailing slash, query parameters, http vs https, etc.). Skipping it lets Google pick — and it sometimes picks wrong.
What about the keywords meta tag?
Google has not used keywords for ranking since 2009. Bing and Yandex still consider it lightly. We omit it from the default output because the cost of getting it wrong (looking spammy) outweighs the benefit. Add it manually if you have a specific reason.
How do I make different tags per page?
Run this tool once per page with that page's specific title, description, URL and image. If you're using a framework with metadata helpers (Next.js Metadata API, Astro, Remix), feed the generated values into those instead of pasting raw HTML — your routing/layout layer can then keep them DRY.
Common use cases
Where a complete meta block delivers a real boost.
Bootstrap a static site
Building a one-pager, a landing page, or migrating a legacy HTML site? Generate the meta block once and paste — saves looking up Open Graph property names every time.
Audit an existing page
Use the tool to compare what your live page emits vs what you should be emitting. Missing canonical, missing Twitter image, robots accidentally on noindex are the three most common production issues.
Hand-off to a junior dev
Set the values once for the team's standard pattern, share the screenshot. Anyone can then fill in title and description and ship a complete head block without remembering all the tag names.
Per-blog-post override
Most blog engines emit a generic site-wide meta block. Generate a custom one per important article (especially ones you'll share on social) — better link previews drive measurably better click-through.
Tips and shortcuts
Habits that keep meta tags useful, not cargo-culted.
Lead with the keyword in the title
If a page is about 'CSS gradient generator', start the title with that phrase. The first 30 characters carry the most weight in Google's ranking and in the eye-tracking pattern of users scanning results.
Write descriptions for humans, not robots
The meta description doesn't directly influence ranking but it influences click-through, which does. Write a sentence that would convince a person scanning search results to click — same as ad copy.
Test your previews
Paste your URL into LinkedIn Post Inspector, X Card Validator and Facebook Sharing Debugger. They show how the link will render and reveal mismatches between cached and current values.
Include a fallback image
If the OG image is missing, social platforms pick whatever image they find on the page — often a tiny logo or an ad. Always set a deliberate og:image, even if it's a generic site-wide one.