Meta Tag Generator

Generate SEO, Open Graph, article, and Twitter Card meta tags with live title and description length counters and robots, theme-color, and author options.

Loading tool…

Meta Tag Generator — Fill in your page title, description, canonical URL, image, and site name to get a ready-to-paste block of SEO, Open Graph, and Twitter Card meta tags for your HTML head. Live Google SERP and social-card previews show how the page will look in search and when shared. Everything is generated in your browser — nothing about your page is uploaded. Live counters check your title and description against recommended lengths, optional fields add robots, viewport, charset, theme-color, and author tags plus article-specific Open Graph tags, and the tool reads your image URL to warn about a missing or oddly sized preview image.

What is Meta Tag Generator?

Meta Tag Generator is a free online tool that turns a few page details into a complete set of HTML meta tags: the standard SEO tags (title, meta description, canonical link), Open Graph tags (og:title, og:description, og:type, og:url, og:image, og:site_name), and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image). Marketers, bloggers, and developers use it when launching a page or article to control how it appears in Google search results and how its link unfurls on Facebook, LinkedIn, X/Twitter, Slack, and Discord. Pick the og:type (website, article, product, profile, or video.other) and the twitter:card style (summary, summary_large_image, app, or player), and the tool writes only the lines for the fields you fill in. It outputs plain HTML tags — it does not crawl your site or read the page for you. Live counters flag when the title (about 60 characters) or description (about 160) runs too long, and the tool loads your image URL to read its real pixel size and warn about a missing or over/undersized image. Optional fields add a robots directive, viewport and UTF-8 charset tags, a theme-color, and an author, plus article:published_time, article:author, and article:section when og:type is article.

How to use Meta Tag Generator

  1. Type your page title — this becomes the <title>, og:title, and twitter:title tags.
  2. Write a meta description (about 150–160 characters) for the description, og:description, and twitter:description tags.
  3. Enter the canonical URL of the page and an absolute image URL for the link preview.
  4. Add your site name and choose the og:type and twitter:card from the dropdowns.
  5. Copy the generated HTML block from the output box and paste it into your page's <head>.
  6. Use the Google SERP and social-card previews to sanity-check how the result looks before publishing.
  7. Watch the live length counters for the title and description, and open the ⚙ options to add robots, viewport, charset, theme-color, author, or article tags.

Examples

Blog article tags

Input

Title: How to Bake Sourdough
Description: A beginner's guide to baking sourdough bread at home.
URL: https://blog.example.com/sourdough
og:type: article

Output

<title>How to Bake Sourdough</title>
<meta name="description" content="A beginner's guide to baking sourdough bread at home." />
<link rel="canonical" href="https://blog.example.com/sourdough" />
<meta property="og:title" content="How to Bake Sourdough" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />

Large-image social card

Input

Image: https://example.com/og.png
twitter:card: summary_large_image

Output

<meta property="og:image" content="https://example.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />

Special characters are escaped

Input

Title: Tips & Tricks for "Pros"

Output

<title>Tips &amp; Tricks for &quot;Pros&quot;</title>

Article with robots and article tags

Input

Title: How to Bake Sourdough
og:type: article
Robots: index, follow
article:published_time: 2024-05-01T09:00
article:section: Food

Output

<meta name="robots" content="index, follow" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-05-01T09:00" />
<meta property="article:section" content="Food" />

Frequently asked questions

Which meta tags does this generate?
It produces standard SEO tags (<title>, meta description, and a canonical link), Open Graph tags (og:title, og:description, og:type, og:url, og:image, og:site_name), and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image). Only the lines for the fields you fill in are included, so you never get empty placeholder tags.
What is the difference between og:type and twitter:card?
og:type tells platforms what kind of object the page is — website, article, product, profile, or video.other — which affects how the link unfurls. twitter:card chooses the layout on X/Twitter: summary is a small thumbnail, summary_large_image shows a big banner image, while app and player are for apps and media. Pick the pair that matches your content.
Should the image URL be absolute?
Yes. og:image and twitter:image must be full absolute URLs starting with https:// because scrapers fetch them from outside your site — a relative path like /og.png will not load. For best results use a 1200×630 image for large cards.
Does this tool crawl or read my live page?
No. It only formats the values you type into HTML meta tags. It does not fetch, crawl, or analyze any URL — the canonical and image URLs are written into the tags verbatim, not visited.
Is my data sent to a server?
No. The tags are built entirely in your browser with JavaScript. Nothing you type — including unpublished titles, URLs, or descriptions — is uploaded, stored, or sent anywhere, so it is safe to use on private or pre-launch pages.
How long should the title and description be?
Aim for about 60 characters or fewer for the title and roughly 120–160 for the description; search engines truncate longer text. The tool shows a live counter for each that switches from a pass state to a warning once you exceed the recommended length.
What extra meta tags can I add, and how do the image warnings work?
Open the ⚙ options to add a robots directive (index/follow presets), a viewport tag, a UTF-8 charset tag, a theme-color, and an author; when og:type is article you can also add article:published_time, article:author, and article:section. The tool also loads your image URL in the browser to show its real pixel size and warn if it is missing or far from the recommended 1200×630.

Related tools

Hreflang Tag Generator

Generate hreflang link tags for a multilingual page from a list of locale and URL pairs, with an optional x-default and a self-referencing tag.

JSON-LD Generator

Generate valid JSON-LD structured data for Article, Product, FAQPage, HowTo, LocalBusiness, Event, Recipe, BreadcrumbList, and Organization schemas from a simple form.

Keyword Density Checker

Analyze word frequency and keyword density for 1-, 2-, or 3-word phrases, with a stop-word filter and target-keyword lookup.

Open Graph & Social Card Preview

Preview how a link unfurls into a social card on X, LinkedIn, Slack, Discord, and Facebook from a title, description, image URL, and page URL.