Meta Tag Generator
Web ToolsGenerate SEO meta tags, Open Graph, Twitter Cards, and canonical tags. Free, private — all processing in your browser.
The Meta Tag Generator creates a complete set of SEO-optimized HTML <meta> tags for your web pages — including meta title and description, Open Graph tags (Facebook, LinkedIn, WhatsApp previews), Twitter Card tags, canonical URLs, robots directives, favicon, viewport, author, language, theme color, and more. Preview how your page will appear in Google search results, Facebook shares, Twitter embeds, and link previews — all before publishing. Every tag follows current best practices from Google Search Central, Open Graph Protocol, Twitter Developer, and the W3C HTML specification.
Meta tags determine how your content appears everywhere outside your website: Google search results, social media shares, messaging apps, browser tab titles, mobile home screen icons. Missing or incorrect meta tags mean your carefully crafted page gets a generic, unappealing preview — reducing click-through rates on search and social. Strong meta tags deliver compelling titles, descriptions, and images that make users want to click. This generator handles everything: just fill in the fields and copy the complete HTML block into your <head>. All generation is instant and client-side.
Meta Tag Generator — key features
Complete meta tag set
Generate all essential tags in one go: SEO, Open Graph, Twitter Cards, canonical, viewport, favicon, structured data. Copy-paste ready.
SERP preview
See exactly how your title and description will appear in Google search results. Catch truncation before you publish.
Open Graph preview
See the Facebook, LinkedIn, and WhatsApp share preview with your title, description, and image.
Twitter Card preview
Preview summary and large-image cards for Twitter/X.
Character count and truncation warnings
Tool warns if title exceeds 60 chars or description exceeds 160 chars — so you stay within Google's display limits.
Structured data (JSON-LD)
Generate schema.org markup for Article, Product, FAQ, HowTo, and more. Validates against Google's rich results requirements.
Multiple card types
Choose Twitter summary, summary_large_image, app, or player card — each with its own best-practices fields.
100% client-side
No tracking, no accounts. Paste your content, generate tags, copy output. Your data stays in your browser.
How to use the Meta Tag Generator
- 1
Enter basic page info
Fill in title, description, URL, and main image. Character counters show if you are within Google/Facebook limits.
- 2
Configure social tags
Open Graph and Twitter Card fields default to your basic values but can be overridden. For best results, use a dedicated 1200×630 image for social.
- 3
Add advanced tags
Canonical URL (usually your page URL itself), robots directives (index/noindex, follow/nofollow), author name, theme color.
- 4
Add structured data (optional)
Choose a schema type (Article, Product, FAQ, HowTo, Organization) and fill in its specific fields.
- 5
Preview how it will appear
Live SERP, Facebook, and Twitter previews show exactly what users will see.
- 6
Copy the HTML
Paste the entire `<head>` block into your HTML. Or copy individual sections and integrate with your template engine.
Common use cases for the Meta Tag Generator
SEO optimization
- →Launching a new page: Every page needs title, description, canonical — the basics for Google indexing. Generate once, paste in head.
- →Fixing pages with poor SERP CTR: If Google shows your page but few users click, your title and description may be unappealing. Rewrite and preview with the tool before publishing.
- →Meta tags for blog posts: Each blog post needs unique tags. Generate per-post metadata with varying topics and descriptions.
- →E-commerce product pages: Products need structured data (schema.org/Product) for rich snippets with price, rating, availability.
Social media sharing
- →Custom Facebook/LinkedIn preview: By default, Facebook shows a generic preview — often with the wrong image. Open Graph tags let you specify exactly what appears.
- →Twitter large-image cards: Summary large-image cards get 3× more engagement than summary cards. Generate proper Twitter Card tags for every page.
- →WhatsApp and iMessage previews: These apps read Open Graph tags to show rich link previews. Proper og:image makes shared links look professional.
- →Discord and Slack embeds: Chat apps use OG tags for link previews. Broken tags = bare URL; good tags = beautiful embed.
Technical SEO
- →Canonical URL for duplicate content: If your page is reachable at multiple URLs (http/https, www/non-www, with/without trailing slash), canonical tag tells Google which is authoritative.
- →Excluding pages from search: Admin pages, staging, login flows — use `robots noindex` to keep them out of Google.
- →Language and region tags: Hreflang tags and og:locale help international SEO by telling search engines the content language and target region.
- →Mobile optimization: Viewport, theme-color, and app-related meta tags tell mobile browsers and OS how to render your site.
Meta Tag Generator — examples
Basic page meta tags
The essentials every page needs.
Title: Free JSON Formatter Description: Format and validate JSON online. No signup, runs in your browser. URL: https://tooleras.com/tools/json-formatter
<title>Free JSON Formatter | Tooleras</title> <meta name="description" content="Format and validate JSON online. No signup, runs in your browser."> <link rel="canonical" href="https://tooleras.com/tools/json-formatter"> <meta name="viewport" content="width=device-width, initial-scale=1">
Complete Open Graph set
Rich preview on Facebook, LinkedIn, WhatsApp.
Title: Free JSON Formatter Description: ... Image: https://tooleras.com/og.png URL: ...
<meta property="og:title" content="Free JSON Formatter"> <meta property="og:description" content="Format and validate JSON online..."> <meta property="og:image" content="https://tooleras.com/og.png"> <meta property="og:url" content="https://tooleras.com/tools/json-formatter"> <meta property="og:type" content="website"> <meta property="og:site_name" content="Tooleras">
Twitter Card
Large image card for maximum Twitter engagement.
Card type: summary_large_image Image: 1200×675 PNG
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free JSON Formatter"> <meta name="twitter:description" content="..."> <meta name="twitter:image" content="https://tooleras.com/twitter.png"> <meta name="twitter:site" content="@tooleras">
JSON-LD Article schema
For blog posts — enables rich snippets.
Type: Article Headline: How to Format JSON Author: Jane Doe Date: 2026-05-05
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "How to Format JSON",
"author": { "@type": "Person", "name": "Jane Doe" },
"datePublished": "2026-05-05",
"image": "https://tooleras.com/blog-image.png"
}
</script>Robots directives
Control crawling and indexing per page.
Index: yes Follow: yes Archive: allowed
<meta name="robots" content="index, follow, archive"> <!-- For admin / private pages: --> <meta name="robots" content="noindex, nofollow">
Favicon and app icons
All-device-compatible icon set.
Icon file: /favicon.ico + PNG variants
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
Technical details
A modern web page uses many types of meta tags for different consumers (browsers, search engines, social platforms, mobile devices). The essential categories:
1. Basic HTML meta tags:
``html``
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Page description (150-160 chars for Google)">
<meta name="keywords" content="keyword1, keyword2"> <!-- Largely ignored by Google now -->
<meta name="author" content="Your Name">
<meta name="robots" content="index, follow">
2. Title tag:
``html``
<title>Page Title — Site Name</title>
Google displays up to ~60 characters (pixel-based). Front-load the most important keyword.
3. Open Graph (Facebook, LinkedIn, WhatsApp, Discord):
``html``
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description for social preview">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Site Name">
Recommended image size: 1200×630 pixels (1.91:1 aspect ratio). Min: 200×200. Max: 8 MB.
4. Twitter Cards:
``html``
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/twitter-image.png">
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@creator">
Card types: summary, summary_large_image, app, player. Use summary_large_image for most content.
5. Canonical URL:
``html``
<link rel="canonical" href="https://example.com/page">
Tells search engines the authoritative URL when the same content is accessible at multiple URLs (avoiding duplicate content issues).
6. Favicon and app icons:
``html``
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
7. Structured data (JSON-LD schema.org):
``html``
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"author": { "@type": "Person", "name": "Author Name" },
"datePublished": "2026-05-05"
}
</script>
Used for rich search results. Google supports Article, Product, Recipe, FAQPage, HowTo, Breadcrumb, and many more.
Meta title length limits:
- Google: ~60 characters (pixel-based — letters like "W" and "M" are wider)
- Bing: ~65 characters
- Title should include the primary keyword and be unique per page
Meta description length limits:
- Google: ~155-160 characters (~920 pixels)
- Bing: ~160 characters
- Should include the primary keyword naturally and motivate the click
Best practices:
1. Every page needs unique title and description.
2. Use og:image at 1200×630 for best social previews.
3. Always include canonical URL (self-canonical is fine).
4. Set viewport for mobile-responsive pages.
5. Use robots strategically: index, follow (default), noindex for search-excluded pages, nosnippet to prevent SERP snippets.
Common problems and solutions
⚠Title truncated in Google SERP
Google truncates titles over ~60 characters (pixel-based — wider characters like W count more). If your page lists under a shorter version, your intended keywords may be cut. Use this tool's character counter and SERP preview.
⚠Missing og:image or wrong dimensions
Facebook and LinkedIn previews without og:image show no image — ugly. Recommended og:image size is 1200×630 (1.91:1 aspect ratio). Smaller images may appear cropped or scaled poorly.
⚠Meta keywords tag
The old `<meta name="keywords">` tag is **ignored by Google** since 2009 (and Bing since 2014). Stuffing keywords here does nothing for SEO. Use strong title, description, and content instead.
⚠Multiple title or description tags
If your CMS or build process adds duplicate meta tags, search engines may choose the wrong one. Check your final rendered HTML (view source) — exactly one title, one description, one canonical per page.
⚠Canonical pointing to wrong URL
Incorrect canonical (e.g., pointing to homepage instead of the specific page) tells Google to index a different URL. Double-check each page's canonical points to itself (unless you have specific duplicate-content consolidation needs).
⚠Forgetting hreflang for international sites
Multi-language sites need hreflang tags telling search engines which version to show for each user's language/region. Without them, Google may show English to Spanish users. Use proper hreflang implementation alongside meta tags.
⚠Not validating structured data
JSON-LD must follow schema.org's required/recommended properties. Missing required properties = no rich result. Use [Google Rich Results Test](https://search.google.com/test/rich-results) to validate before deploying.
⚠Stale cached social previews
Facebook and LinkedIn cache OG data aggressively. After updating meta tags, use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) and LinkedIn Post Inspector to force a re-fetch. Otherwise users see the old preview for days.
Meta Tag Generator — comparisons and alternatives
Meta tags vs structured data: Meta tags are simple key-value pairs in <head>. Structured data (JSON-LD, Microdata) describes entities with typed properties. Both are important: meta tags control SERP titles/descriptions; structured data enables rich snippets (star ratings, prices, FAQs).
Open Graph vs Twitter Cards: Open Graph is Facebook's protocol, adopted by LinkedIn, WhatsApp, Slack, Discord, iMessage. Twitter has its own (similar but different) set of tags. Use both — they're non-conflicting and cover all major platforms.
meta description vs Google's algorithm: You write the description; Google may replace it with its own extraction if the page content is more relevant to the search query. Provide a strong description anyway — Google uses it most of the time, and even when it substitutes, a clear description keeps the algorithm on the right track.
HTML meta tags vs HTTP headers: Some directives (canonical, robots) can be set in HTTP headers instead of HTML. For non-HTML files (PDFs, images), use HTTP headers. For HTML pages, meta tags are more visible and easier to manage.
Static meta vs dynamic meta: Static meta (hardcoded in HTML) works for marketing pages. Dynamic meta (generated per-page from CMS/database) works for blogs and apps. Modern frameworks (Next.js, Remix, Astro) handle dynamic meta generation elegantly.
Open Graph vs oEmbed: Open Graph tags are in your HTML head. oEmbed is a separate JSON/XML endpoint that tells consumers how to embed your content (e.g., YouTube uses oEmbed for embeds). Most sites use OG for social; oEmbed for video/rich-content providers.
Frequently asked questions about the Meta Tag Generator
▶What are meta tags?
Meta tags are HTML elements in the <head> of a web page that provide information about the page to browsers, search engines, and social media platforms. They don't render visually but control how your page is represented everywhere outside the browser window — search results, shared links, browser tabs, etc.
▶What meta tags are most important for SEO?
Title tag (most important single element for SEO), meta description (controls SERP snippet), canonical URL (prevents duplicate content issues), robots (controls indexing), viewport (mobile rendering). These are the essentials. Open Graph and Twitter Cards don't affect SEO directly but dramatically improve social engagement.
▶How long should my meta title be?
50-60 characters is the sweet spot. Google displays ~60 characters (pixel-based, wider characters take more room). Front-load your primary keyword. Longer titles are truncated with "..." in search results. Include your brand name if space allows (e.g., "Page Title | Site Name").
▶How long should my meta description be?
150-160 characters for Google. Bing sometimes shows 160. Longer descriptions get truncated. The description must be compelling (motivates the click) and include the primary keyword naturally. Google may substitute its own extracted description if it judges yours isn't relevant to the search query.
▶Do meta keywords still matter?
No. Google has ignored the <meta name="keywords"> tag since 2009. Bing since 2014. Stuffing keywords into this tag does nothing for ranking. Focus on quality content, title, description, and natural keyword usage throughout the page.
▶What is Open Graph?
Open Graph Protocol (created by Facebook in 2010) is a standard for tagging web pages with structured data that social platforms use for rich previews. When someone shares your URL on Facebook, LinkedIn, WhatsApp, Discord, or iMessage, those platforms read your OG tags to show a preview with your chosen title, description, and image.
▶What size should my og:image be?
1200×630 pixels (aspect ratio 1.91:1) is the current recommendation — matches Facebook's preferred display dimensions. Minimum: 200×200 (but that looks tiny). Maximum file size: 8 MB. Use JPG or PNG. For best quality on retina displays, 2x size (2400×1260) also works.
▶What is a canonical URL?
The canonical URL tells search engines the authoritative version of a page when the same content is accessible at multiple URLs (e.g., with/without tracking parameters, http/https, www/non-www). Prevents duplicate content issues. Usually self-canonical (page's own URL). Set via <link rel="canonical"> in the <head>.
▶What are Twitter Cards?
Twitter's equivalent of Open Graph — specific meta tags (twitter:card, twitter:title, etc.) that control how tweets with your URL look on Twitter/X. Four card types: summary, summary_large_image, app, player. Use summary_large_image for most content (looks best, highest engagement).
▶Do I need structured data (schema.org)?
Highly recommended for eligible content types. Structured data enables rich snippets in Google (star ratings, prices, event dates, FAQ dropdowns, How-to steps) that dramatically increase visibility and click-through rates. Blog posts, products, recipes, events, FAQs, HowTos all benefit. Implement via JSON-LD.
Additional resources
- Google Search Central — Meta Tags — Official Google documentation for meta tags.
- Open Graph Protocol — Official Open Graph specification.
- Twitter Card Documentation — Twitter Cards reference.
- Schema.org — Structured data vocabulary used by Google, Microsoft, Yandex.
- Google Rich Results Test — Validate structured data for Google's rich snippets.
Related tools
All Web ToolsCanonical URL Checker
Check canonical URL tags on any page and detect missing, wrong, or conflicting canonicals that cause SEO duplicate content issues.
Google SERP Preview
Preview how your page will appear in Google search results with accurate title, URL, and meta description rendering for desktop and mobile.
Keyword Density Checker
Analyze keyword density in text with single-word and multi-word phrase frequencies, percentages, and SEO recommendations.
Open Graph Debugger
Debug Open Graph and Twitter Card metadata — inspect raw tags, validate requirements, and get links to force social platform cache refresh.
Open Graph Preview
Preview how pages appear when shared on Facebook, LinkedIn, Twitter, WhatsApp, and other platforms by rendering Open Graph metadata.
Robots.txt Generator
Generate robots.txt files with allow and disallow rules, sitemap references, and user-agent targeting to control search engine crawling.
Learn more
Explore more tools
200+ free tools that run in your browser.
Browse all tools →