UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Meta Tag Generator

Generate essential HTML head tags for SEO and metadata in one place.

About Meta Tag Generator

A page without proper meta tags is invisible to search engines, looks broken when shared on social media, and may be penalized for duplicate content. The gap between a page that ranks and one that does not often comes down to whether canonical, description, viewport, and OG tags are present and correct. Writing these tags by hand means keeping track of character limits, knowing which properties are Open Graph versus Twitter Card, ensuring the canonical resolves correctly, and making sure nothing is missing. This tool generates the complete set of HTML meta tags you need for a page in 60 seconds. Fill in the title, description, canonical URL, and optional social sharing details, and the tool produces ready-to-paste HTML covering SEO, Open Graph, Twitter Cards, viewport, and robots directives. Character counters warn you when title or description exceed snippet length limits.

Why use Meta Tag Generator

Complete Tag Bundle

Generates title, meta description, canonical, viewport, robots, Open Graph, and Twitter Card tags in one pass. No more opening multiple docs to recall the exact property names for og:image or twitter:card values.

Character Limit Warnings

Live counters flag when your title exceeds 60 characters or your description exceeds 155 characters — the thresholds where Google truncates snippets in search results, reducing click-through rates.

Social Card Preview

Open Graph and Twitter Card tags are generated simultaneously so your page looks correct when shared on Facebook, LinkedIn, Twitter, and Slack — with title, description, and image properly specified.

Canonical Protection

The canonical tag prevents duplicate content penalties by telling search engines which URL is authoritative. The tool validates that your canonical is an absolute https:// URL, not a relative path.

Copy-Ready HTML

Output is properly formatted HTML with consistent quoting and attribute order, ready to paste directly into your template's head section without any cleanup or reformatting needed.

Browser-Local

All generation runs in the browser. Staging URLs, internal page titles, and unpublished descriptions never leave your machine or touch a server.

How to use Meta Tag Generator

  1. Enter your page title — keep it under 60 characters to avoid Google truncation in search snippets
  2. Enter a meta description between 70 and 155 characters summarizing the page content
  3. Enter the canonical URL as a full https:// address of this page
  4. Set the robots directive — index,follow is the default for public-facing pages
  5. Fill in Open Graph and Twitter Card fields for social sharing card previews
  6. Copy the generated HTML bundle and paste it into your page's head section

When to use Meta Tag Generator

  • You are launching a new page and need the complete set of SEO and social meta tags before going live
  • You are auditing an existing page and need to regenerate proper meta tags to fix missing or malformed ones
  • You are building a CMS or static site generator template and need a reference for the correct tag bundle
  • You want to quickly generate meta tags for a landing page without setting up a full SEO plugin
  • You need to verify that your Open Graph and Twitter Card tags are correctly formed before sharing a URL
  • You are migrating a site and need to recreate meta tags for each page systematically

Examples

Basic SEO bundle

Input: Title: Best Coffee Shops NYC | Description: A curated guide to NYC's finest coffee | Canonical: https://example.com/coffee

Output: <title>Best Coffee Shops NYC</title> <meta name="description" content="A curated guide to NYC's finest coffee"> <link rel="canonical" href="https://example.com/coffee"> <meta name="robots" content="index,follow"> <meta name="viewport" content="width=device-width,initial-scale=1">

Open Graph social card

Input: OG Title: Coffee Guide NYC | OG Image: https://example.com/og.jpg | OG Type: article

Output: <meta property="og:title" content="Coffee Guide NYC"> <meta property="og:image" content="https://example.com/og.jpg"> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/coffee">

Twitter Card tags

Input: Card type: summary_large_image | Twitter site: @example

Output: <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@example"> <meta name="twitter:title" content="Best Coffee Shops NYC">

Tips

  • Keep page titles under 60 characters and descriptions under 155 — the tool warns you when you exceed these limits.
  • Always use an absolute https:// URL for the canonical — a relative path does not work and is treated as missing by most crawlers.
  • Use a 1200x630 pixel image for og:image — this renders crisply on Facebook, LinkedIn, and Twitter large cards.
  • Never use noindex on a page you want indexed, even temporarily — search engines may not recrawl quickly when you switch it back.
  • Validate your tags with the Twitter Card Validator and Facebook Sharing Debugger after deployment to confirm they resolve correctly.

Frequently Asked Questions

What is the ideal length for a meta description?
Between 70 and 155 characters. Google typically shows up to 155 characters in search results and may rewrite descriptions it considers too short or too long. Aim for a compelling, keyword-relevant sentence that fits within 155 characters.
Where do these tags go in the HTML?
All generated tags belong inside the head element of your HTML document, before the closing head tag. They must appear in the head to be read by search engines and social media crawlers.
Do I need Open Graph tags if I have Twitter Cards?
Yes — Open Graph (og:) tags are required for Facebook, LinkedIn, and most other platforms. Twitter falls back to Open Graph tags if twitter: tags are absent, but explicit Twitter tags give you more control over the Twitter card preview.
What does the canonical tag do for duplicate content?
The canonical tag tells search engines which URL is the definitive version of a page. Without it, query-string variants and HTTP/HTTPS duplicates can split link equity and cause ranking dilution.
Should I set robots to index,follow or just leave it out?
index,follow is the default behavior even without the tag, but explicitly setting it signals intent and prevents misconfiguration from accidentally leaving a noindex directive in place. Always set noindex for staging or admin pages.
How does Google decide what title to show in search?
Google uses your title tag as the primary source but may rewrite it if it finds a better match in the page's h1, anchor text, or other signals. Keep your title tag concise, descriptive, and unique per page.
Do meta keywords still help SEO?
No. Google officially ignores the meta keywords tag and has done so since 2009. Most other major search engines also disregard it. The tool does not generate a meta keywords tag.
What is the difference between og:image and twitter:image?
og:image is used by Facebook, LinkedIn, and most platforms. twitter:image is specific to Twitter and overrides og:image on Twitter if both are present. Both should point to a 1200x630 pixel image for best display across platforms.

Explore the category

Glossary

Meta tag
An HTML element inside the head that provides metadata about a page to browsers, search engines, and social media crawlers. Not visible to users but critical for SEO and social sharing.
Canonical URL
The authoritative URL for a page, specified via link rel='canonical'. Tells search engines which URL to index when multiple URLs serve the same or similar content.
Open Graph
A protocol developed by Facebook using og: prefixed meta tags to define how a page appears when shared on social networks, including title, description, image, and content type.
Twitter Card
Twitter-specific meta tags (twitter:) that control how a URL is displayed when shared in a tweet, including card type (summary, summary_large_image), title, description, and image.
Viewport
A meta tag that instructs mobile browsers how to scale the page. The standard value is width=device-width, initial-scale=1 and is required for responsive design to work correctly.
Robots directive
A meta tag (name='robots') that instructs search engine crawlers whether to index the page (index/noindex) and whether to follow its links (follow/nofollow).