BrowserTools

Meta Tag Generator

SEO, Open Graph & Twitter tags

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-08-28
Free Private No uploads
What is Meta Tag Generator?

Seven fields and three controls produce a head block arranged as three commented sections: the primary tags, the Open Graph set that Facebook and WhatsApp read, and the Twitter/X card tags. You supply a page title, a description, a canonical URL, a site name, a social image, a Twitter handle and a theme colour; the tool writes the title element, the description and theme-colour meta tags, an optional canonical link and an optional robots directive, then mirrors the title, description, URL, image and site name into og: properties and the same set into twitter: names. Everything typed into a text field is escaped for ampersands, angle brackets and double quotes before it reaches the output, so a quotation mark in a headline cannot break the attribute it sits in. Character counters sit beside the title and description, and a mock-up of a desktop result renders below the code.

Generate a complete, ready-to-paste set of HTML meta tags: SEO essentials, Open Graph for social sharing, and Twitter/X cards — all from one simple form.

Private Meta Tag Generator In Your Browser

Meta Tag Generator is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use Meta Tag Generator

1

Fill in Page title, Canonical URL, Description, Site name, Social image, Twitter handle and Theme color.

2

Toggle Allow indexing (robots) and Include canonical link, then set OG type to either website or article.

3

Read the Generated tags panel, which is split into three commented sections, and press Copy HTML.

4

Check the Live preview panel underneath to see how the title and description read once clipped to result width.

Key Capabilities
  • Text fields are escaped for &, <, > and double quotes before the tags are assembled, so a quotation mark in a headline cannot break out of a content attribute.
  • A change to the title or description updates the output, the character counters and the result mock-up together.
  • The canonical link and the robots directive are independent checkboxes, so a staging page set to noindex can be produced from the same form.
  • OG type is a two-way switch between website and article, and the chosen value is written into the Open Graph section only.
Common Use Cases
  • A developer scaffolding a new page fills in the form once and pastes the head block instead of hand-writing fifteen tags.
  • Someone fixing a link that previews with no picture discovers the og:image and twitter:image values were never set on that page.
  • A designer with a 1200×630 banner drops its URL into the social image field and checks the same value reaches both card formats.
Clear Answers

Frequently Asked Questions

Where does the generated block go?
Inside the head element. Order does not affect correctness for these tags, but the title and description are conventionally first, and putting the social block early is the more dependable habit when a crawler is strict about parsing time.
Do I need both the Open Graph and the Twitter names?
The Open Graph properties are what most platforms fall back on, Slack and WhatsApp included, so on their own they cover a lot. The twitter: names are still worth emitting: X prefers them when they are present, and the card line is what decides between a large image preview and a compact one.
What size should the social image be?
1200 by 630 pixels is the safe default, because it crops acceptably across the different preview shapes. Keep anything important near the centre, since some platforms crop to a square for the small card, and give an absolute https URL rather than a relative path.
Do these tags decide whether a page is indexed?
No. They govern what a result looks like once a page is already eligible to appear. A robots directive of noindex, follow removes a page from consideration; nothing in this form can add one, and no combination of these tags will make a page show up that would not otherwise.