HTML Meta Tag Generator
Generate SEO and social meta tags for your page's <head>: title, description, keywords, author, canonical URL, robots directive, theme color, plus Open Graph and Twitter Card tags for rich link previews. Copy or download the ready-to-paste HTML.
Input
Shown in the browser tab and as the search-result headline. Aim for 50–60 characters.
The snippet under the search result. Aim for 150–160 characters.
Comma-separated. Google and most major engines ignore this tag, but a few niche engines still read it — leave it blank if you're unsure.
The preferred URL for this page — tells search engines which version to index when duplicates exist.
Adds Open Graph and Twitter Card tags so links to your page show a rich preview card. Recommended: 1200×630px. Leave blank to skip social tags.
Tints the browser UI on mobile (address bar, task switcher). Leave blank to omit the tag.
Output
Paste this inside the <head> of your HTML page.
Guides
The HTML Meta Tag Generator builds the block of <meta> and <link> tags that belong in the <head> of every web page. Fill in a few plain fields — page title, description, canonical URL, a social share image — and the tool produces clean, ready-to-paste HTML you can copy or download. Everything runs in your browser; nothing you type is sent to a server.
What these meta tags do
Meta tags describe your page to search engines and social networks. They don't change what visitors see on the page itself — they shape how it appears elsewhere:
- Title and description are the headline and snippet that show up in Google's search results. A clear, well-sized title and description improve click-through rates.
- Canonical URL tells search engines which version of a page to index, preventing duplicate-content problems when the same page is reachable through several URLs.
- Robots controls whether search engines index the page and follow its links.
- Open Graph tags (
og:title,og:description,og:image,og:url) power the rich preview card shown when your link is shared on Facebook, LinkedIn, Slack, Discord and most messaging apps. - Twitter Card tags do the same for X (Twitter), producing a large-image summary card.
- Theme color tints the browser UI (address bar, task switcher) on mobile devices.
How to use the tool
- Enter your page title and meta description — these are the two tags almost every page should have.
- Add a canonical URL, author, and any other optional fields you need.
- To get social preview cards, paste a Social Share Image URL (ideally 1200×630px). The tool then adds a coherent Open Graph and Twitter Card block, pulling the title, description and URL from the fields you already filled in.
- Copy the generated HTML and paste it inside the
<head>of your page, or download it asmeta-tags.html.
Blank optional fields are skipped automatically, so you never end up with empty content="" attributes cluttering your markup.
Does the keywords meta tag still matter?
Not for Google. Google publicly confirmed years ago that it ignores the <meta name="keywords"> tag, and most major search engines do the same because it was heavily abused for spam. A handful of smaller or regional engines still read it, so the tool keeps it as an optional field — but you can safely leave it blank.
Is <meta charset> really needed?
Yes. <meta charset="utf-8"> should be the first tag in your <head> so the browser decodes text correctly. The tool always emits the modern HTML5 form (lowercase utf-8, no self-closing slash).
Will these tags guarantee a preview image?
Open Graph and Twitter tags tell platforms what to show, but each platform caches previews. After updating tags, use a platform's own debugger (such as the Facebook Sharing Debugger) to re-scrape your URL.