Meta Tag Generator — Title, Description, Open Graph & Twitter Tags
Fill in a page's title, description and social card details; get a complete, correctly escaped <head> block with live length counters.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Free Business & Marketing Tools | Pine & Birch</title> <meta name="description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <link rel="canonical" href="https://www.example.com/page"> <meta name="theme-color" content="#071e93"> <!-- Open Graph (Facebook, LinkedIn, Slack, WhatsApp) --> <meta property="og:type" content="website"> <meta property="og:title" content="Free Business & Marketing Tools | Pine & Birch"> <meta property="og:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta property="og:url" content="https://www.example.com/page"> <meta property="og:site_name" content="Example Co"> <meta property="og:image" content="https://www.example.com/images/share.png"> <meta property="og:locale" content="en_US"> <!-- Twitter / X card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free Business & Marketing Tools | Pine & Birch"> <meta name="twitter:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta name="twitter:image" content="https://www.example.com/images/share.png">
Paste inside <head>. In Next.js, React Helmet or a CMS, map each line to the equivalent field rather than pasting raw HTML.
Runs entirely in your browser. Nothing you enter is sent to us or stored. Meta tags are the visible tenth of on-page SEO. Ask us about the rest.
Found a problem, or something that could be better? We read every message and we fix things quickly.
This free meta tag generator produces the complete set of head tags a page needs: title and meta description with live length counters, canonical and robots directives, and the Open Graph and Twitter Card tags that control how a link looks when it is shared on LinkedIn, Facebook, X, Slack and WhatsApp. Values are escaped correctly, so a title containing an ampersand or quotes does not break the HTML.
Meta tags are the smallest, most visible part of on-page SEO: the title and description are the ad copy Google writes for you if you do not write them yourself, and the social tags decide whether a shared link shows a picture and a headline or a bare URL. The notes below give the current length limits and the tags that no longer do anything, so you do not maintain the meta keywords tag in 2026.
How to use
- Enter the page title (aim for 50 to 60 characters, keyword first) and meta description (120 to 160 characters, a reason to click). The counters turn green in range.
- Set the canonical URL to the page's preferred address, and leave robots at index, follow unless the page must stay out of search.
- Add the share image (1200 × 630 pixels), site name and Twitter handle. The same title and description are reused for the social tags.
- Check the search preview, then copy the generated block into the page's <head>.
- After publishing, test the live page with the Open Graph preview tool to confirm the tags are served as expected.
Frequently asked questions
Which meta tags actually matter for SEO?
Title (a direct ranking signal and the headline in results), meta description (not a ranking signal, but it is your snippet and drives click-through), canonical (prevents duplicate-content dilution), robots (index/noindex control) and viewport (mobile usability). Open Graph and Twitter tags affect social sharing, not rankings. The meta keywords tag has been ignored by Google since 2009; do not bother.
How long should a title and description be?
Titles: about 50 to 60 characters, since Google truncates by pixel width around 600 px. Descriptions: 120 to 160 characters on desktop, less on mobile. Google rewrites either when it thinks it can do better, which happens more often with generic or keyword-stuffed text, so write specific, honest copy.
Do I need both Open Graph and Twitter Card tags?
X reads Open Graph tags as a fallback, so og:* alone works in most cases; twitter:card is still worth adding because it chooses between the large image card and the small summary. Everything else (LinkedIn, Facebook, Slack, WhatsApp, iMessage, Discord) reads Open Graph only.
What size should the share image be?
1200 × 630 pixels (1.91:1) is the safe size for every platform's large card. Under 600 px wide, Facebook and LinkedIn fall back to a small thumbnail or no image. Keep important content away from the edges; some platforms crop to a square in feeds. Use an absolute URL over HTTPS.
Should every page have a canonical tag?
Yes, pointing at itself unless the page is a duplicate of another. It resolves tracking parameters, trailing-slash and http/https variants to one URL and is cheap insurance. The canonical must be an absolute URL on a page that returns 200.
Tags that no longer do anything
meta keywords (ignored since 2009), meta revisit-after, meta distribution, meta rating, and the Google-specific geo.* tags are all dead weight. The robots values noodp, noydir and nosnippet variants have been retired or replaced by max-snippet. If a template still emits them, removing them is safe and slightly tidier.
Escaping and encoding
Attribute values must escape & as & and " as "; this generator does that for you. Declare charset utf-8 as the first thing in <head> so the browser decodes the rest correctly. In frameworks (Next.js, Nuxt, Django, Rails, WordPress), set these values through the framework's head or SEO component rather than pasting raw HTML, so they stay per-page and escape automatically.
Related free tools
- SERP Snippet Preview — Preview how your page title and meta description will look in Google — with live character-count checks.
- Open Graph Preview — Enter a URL and see the exact card Facebook, LinkedIn, X and Slack will show, every tag found, and what is missing.
- Robots.txt Generator — Build a robots.txt with presets for allow-all, blocking AI crawlers, staging and WordPress, with warnings for the mistakes that de-index sites.