Meta Tag Generator Free
Generate HTML meta tags for SEO, Open Graph, and Twitter Cards — fill in the form and copy the ready-to-paste code. No signup, runs entirely in your browser.
<!-- Basic SEO -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">How the Meta Tag Generator Works
- 1Fill in the Basic SEO tab — at minimum a page title and meta description. The character counters turn green when you hit the recommended range.
- 2Switch to the Open Graph tab to control how your page looks when shared on Facebook, LinkedIn, and Slack. Add an OG image URL for the best visual result.
- 3Open the Twitter Card tab to set your Twitter-specific preview. Fields fall back to Open Graph or Basic SEO values automatically — only override if you need different copy for Twitter.
- 4Click Copy all to copy the generated HTML to your clipboard, then paste it into the
<head>section of your HTML file or CMS template.
Where to Place Meta Tags in HTML
All meta tags must sit inside the <head> element of your HTML document, before the closing </head> tag. In modern frameworks, this is managed by the framework's head component — for example <Head> in Next.js pages router, the metadata export in Next.js app router, or the <svelte:head> block in SvelteKit. In WordPress, meta tags are typically added via a plugin such as Yoast SEO or Rank Math, which generates them automatically from fields in the editor.
The <title> tag is technically not a meta tag but is generated alongside them because it serves the same purpose — identifying the page to search engines and browsers. It appears as the tab label in the browser and as the blue clickable headline in Google's search results.
Tips for Better Meta Tags
Front-load the keyword in the title
Put the primary keyword at the start of the title tag. Google gives more weight to words that appear earlier, and users scanning search results read left-to-right — make the first few words count.
Write descriptions that drive clicks
Google sometimes rewrites your description using on-page content. But when it does show yours, it should include the primary keyword naturally and end with a clear call to action or a unique value proposition.
Always set a canonical URL
Even if you think your content is only accessible at one URL, add a canonical tag pointing to the preferred version. Scrapers, CDNs, and URL parameters can create unintended duplicates that dilute your link equity.
Use a dedicated OG image
Pages with an OG image get significantly higher click-through rates from social shares. The image should be 1200×630px with the most important content centred, since some platforms crop the edges on mobile.
Test your tags before publishing
Use the Facebook Sharing Debugger and Twitter Card Validator (both free, login required) to preview exactly how your page will appear when shared. They also flush cached previews after you update your tags.
Unique tags per page
Every indexable page should have a unique title and description. Duplicate meta tags across multiple pages confuse search engines about which URL should rank for a given query, and they often end up cannibalising each other.
Frequently Asked Questions
What are meta tags and why do they matter for SEO?
Meta tags are HTML elements that live in the <head> of a page. They tell search engines what the page is about (title, description, robots) and how to preview it on social media (Open Graph, Twitter Card). A well-crafted title and description tag directly influences your click-through rate in search results, making them one of the highest-ROI on-page SEO elements.
What is the ideal length for a meta title and description?
Google displays roughly 50–60 characters of a title before truncating it in search results, and around 150–160 characters of a description. Staying within these limits ensures your message is not cut off. The tool shows a live character counter with green/amber/red feedback so you can hit the target range easily.
What is a canonical URL and when should I use it?
A canonical tag (<link rel="canonical">) tells search engines which URL is the authoritative version of a page when the same content is accessible at multiple URLs — for example, with and without www, with or without trailing slashes, or via URL parameters. Setting it prevents duplicate content penalties and consolidates link equity to a single URL.
What is the difference between Open Graph and Twitter Card tags?
Open Graph (og:) is a protocol originally created by Facebook, now used by LinkedIn, WhatsApp, Slack, and most social platforms to generate link previews. Twitter Card (twitter:) is Twitter's own protocol for the same purpose. Both control the image, title, and description shown when a URL is shared. If Twitter Card tags are absent, Twitter falls back to Open Graph tags.
What image size should I use for og:image?
The recommended size is 1200×630 pixels (a 1.91:1 ratio). Keep the file under 8 MB for Facebook and under 5 MB for Twitter. PNG and JPG are both supported. Images smaller than 600×315 may render as small thumbnails rather than the large card format.
What does the robots meta tag do?
The robots meta tag instructs search engine crawlers whether to index the page (include it in search results) and whether to follow its links. "index, follow" is the default. Use "noindex" for pages like login pages, thank-you pages, or staging environments that should not appear in search results. Use "nofollow" to stop crawlers from following links on a page.
Is my data sent to a server when I use this tool?
No. All processing happens in your browser using JavaScript. Nothing you type is transmitted, stored, or logged. You can use the tool offline after the page has loaded.
Do I still need to use the keywords meta tag?
The keywords meta tag has been ignored by Google since 2009 and by most other major search engines too. It has no effect on rankings. This tool still includes the field because some niche CMS platforms read it internally, and some minor search engines still index it. If in doubt, leave it empty.