Meta Tag Generator

Meta tags are HTML attributes placed inside a page's head section that tell search engines what the page is about and control how it appears in search results and on social media. The title tag and meta description are the two most visible elements, forming the clickable headline and grey snippet that users see in Google before deciding whether to visit. Open Graph and Twitter Card tags extend this to social platforms, determining the image, headline, and text shown when someone shares a link on Facebook, LinkedIn, or X. Writing all of these correctly, within character limits, with distinct values for every page, is the foundation of both search visibility and social engagement.

S. Siddiqui

Edited by

S. SiddiquiFounder & Editor-in-Chief
Sources:Google Search CentralMozBing Webmaster ToolsUpdated Jul 2026

Appears as the clickable blue link in Google search results.

0/60

The 1–2 sentence snippet under your title in search results.

0/155

Comma-separated. Low direct ranking impact but useful for site search.

Google Search Preview

https://yourwebsite.com/page/

Page Title

Your meta description will appear here — write 140–155 characters that describe the page content and encourage clicks.

Title: 10 chars ✓ goodDescription: 0 chars
Generated HTML — 5 lines
<!-- ═══ Basic Meta Tags ═══ -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="language" content="en">
<meta name="robots" content="index, follow">

Quick Tips

  • Paste the generated code inside your HTML <head> tag
  • Title 50–60 chars and description 140–155 chars for best Google display
  • OG image should be 1200 × 628 px to display correctly on Facebook and LinkedIn
  • Test OG tags with the Facebook Sharing Debugger after publishing
  • Add a canonical tag if the same content appears on multiple URLs

Quick Answer: What Does a Meta Tag Generator Produce?

A meta tag generator outputs the HTML code that goes inside your page's <head> tag. The three most important tags are: title (50-60 characters, shown as the blue clickable link in Google), meta description (140-155 characters, shown as the grey snippet below), and Open Graph image (1200 x 628 px, controls the preview card when shared on Facebook or LinkedIn). Paste the generated code directly before the closing </head> tag with no plugin or CMS required.

What Is a Meta Tag Generator?

A meta tag generator is a tool that builds the HTML <head> metadata for a web page without requiring you to write code by hand. You fill in fields including page title, description, language, robots directives, Open Graph properties, and Twitter Card details, and the tool outputs a block of HTML you can paste directly into your site's source code.

Meta tags are invisible to visitors but critical for how search engines index your page and how social platforms render your content when it is shared. According to Google's Search documentation, the title tag and meta description are the two most visible elements in a search result listing, directly influencing whether a user clicks your link or a competitor's.

The tool covers three categories: basic SEO tags (title, description, keywords, robots, viewport), social sharing tags (Open Graph for Facebook and LinkedIn, Twitter Cards for X), and advanced settings (canonical URL, charset, theme colour). Each category is handled in a separate tab with real-time character counters and a live Google snippet preview so you can see exactly how your page will appear before publishing.

How to Use This Meta Tag Generator

  1. Basic SEO tab: Enter your page title (aim for 50-60 characters), meta description (140-155 characters), and optional keywords, author, and language. Check the robots toggles to control whether search engines should index the page and follow its links.
  2. Social Sharing tab: Add Open Graph fields for Facebook and LinkedIn sharing. The OG title and description fall back to your Basic SEO values if left blank. Supply your social image URL at 1200 x 628 px. Add Twitter Card fields for X previews.
  3. Advanced tab: Set your canonical URL to prevent duplicate content issues, choose your character encoding (UTF-8 is correct for almost all sites), and add a theme colour for Android Chrome's browser UI.
  4. Copy the output: Click "Copy All" to copy the generated HTML, then paste it inside the <head> section of your page, whether in your HTML file, WordPress theme header, or CMS head script field.

Why Use This Meta Tag Generator?

Writing meta tags by hand is error-prone and time-consuming, especially for sites with dozens of pages. A generator eliminates syntax errors, ensures you do not accidentally omit a required attribute, and handles the Open Graph and Twitter Card specifications. These specifications use different property naming conventions (property="og:title" versus name="twitter:title") that are easy to confuse when writing by hand.

The live Google preview in this tool shows how your title and description will be truncated at their display limits. Most competitors show a character count but not an actual rendered preview, meaning you only discover truncation problems after publishing and checking Google Search Console. The character counter uses colour coding: green for within the ideal range, amber for slightly long but acceptable, and red for over the hard limit where Google will truncate or rewrite.

Open Graph and Twitter Card support matters because social sharing without correct OG tags results in a plain text link with no image, which produces dramatically lower click-through rates on social media. According to the Open Graph protocol specification, the minimum required properties for a shareable page are og:title, og:type, og:image, and og:url.

Real-World Use Cases

  • Blog posts and articles: Each new post needs a unique title and description. Paste the generated tags into your theme's header.php (WordPress) or equivalent template file.
  • E-commerce product pages: Use og:type="product" and include the product image URL to ensure the correct image appears when customers share product pages on social media.
  • Landing pages: Set robots to index/follow for pages you want indexed, and noindex/nofollow for A/B test variants or thank-you pages you do not want appearing in search results.
  • Multi-language sites: Use the language field to signal the page's primary language; combine with hreflang link tags (added manually) to manage international SEO.
  • News and press releases: Set og:type="article" so platforms like Facebook render the correct article card format with the publication date in the preview.

Common Mistakes When Writing Meta Tags

  • Duplicate titles and descriptions: Every page on your site should have a unique title and description. Duplicate meta tags across pages are one of the most common technical SEO issues flagged by Google Search Console.
  • Keyword stuffing in the description: The description is for human readers, not algorithms. A description crammed with keywords reads poorly and reduces click-through rates.
  • Forgetting the viewport tag: Omitting <meta name="viewport"> breaks mobile rendering. Google uses mobile-first indexing, so a missing viewport tag can harm rankings on all devices.
  • Using a relative URL for og:image: The Open Graph image must be an absolute URL starting with https://. A relative path like /images/photo.jpg will not work for social platforms fetching the image from outside your site.
  • Setting noindex on important pages: Accidentally setting robots to noindex on a production page removes it from Google entirely. Always double-check the robots directive before deploying.
  • Ignoring canonical tags: If the same content is accessible at multiple URLs (www vs non-www, http vs https, trailing slash vs none), adding a canonical tag tells search engines which version to index and prevents PageRank dilution.

Use the keyword density checker to audit how often your target keywords appear in your page content before finalising your meta tags, and the keyword suggestion tool to research the best phrase to place in your title and description.

Last reviewed: July 6, 2026
Founder's Real-World Experience
S. Siddiqui

S. Siddiqui

Founder & Editor-in-Chief, YourToolsBase

How a missing og:image cost us hundreds of social shares in the first week

When I launched the first batch of tool pages on YourToolsBase, I was focused on getting the calculators working correctly and the content right. I published about twelve pages in the same week and shared several of them on LinkedIn and in a few developer communities. The links went out and a handful of people clicked, but the posts looked terrible: no image, no description, just a bare URL in a grey box. I had not added a single Open Graph tag to any page.

I went back and checked Google's guidance, pulled up the Open Graph spec, and manually wrote the meta tags for each page in the theme header. That process took most of an afternoon for twelve pages, and I made mistakes: I used a relative path for og:image on several pages (which does not work because social platforms fetch the image from outside your domain), I forgot og:url on others, and on one page I accidentally duplicated the og:description from a different tool. None of this showed up until I ran each URL through Facebook's Sharing Debugger.

I built this generator partly because of that afternoon. The fallback logic, where the OG fields inherit from your basic SEO title and description if you leave them blank, is directly from that mistake: most of the time the same text works for both, and forcing people to type it twice just creates two chances for them to get out of sync.

Og:image relative URL mistake caught12 pages fixed in one sessionFallback logic built from real error
Also used alongside: Keyword Density Checker

Frequently Asked Questions

What is a meta tag in HTML?
A meta tag is an HTML element inside the <head> section of a web page that provides metadata (information about the page) to browsers, search engines, and social platforms. Common meta tags include the title (shown as the clickable link in Google), the meta description (the snippet below the title), robots directives (whether to index or follow links), and Open Graph tags (which control how the page appears when shared on social media). Meta tags are not visible to users on the page itself but are read by crawlers and browsers.
How many characters should a meta title be?
Google displays page titles up to approximately 600 pixels wide, which corresponds to roughly 50-60 characters for most Latin fonts. Titles up to 70 characters are often displayed in full on desktop but may be truncated on mobile. Titles shorter than 50 characters may leave unused space; titles over 70 characters are typically cut off with an ellipsis. Aim for 50-60 characters for consistent display across all devices and screen sizes.
How many characters should a meta description be?
Google displays meta descriptions up to approximately 920 pixels wide on desktop, which corresponds to 140-155 characters for most fonts. On mobile, the limit is shorter at typically 120 characters. Descriptions over 160 characters are truncated with an ellipsis, wasting the cut-off content. Google can also rewrite your description if it determines a different excerpt from your page better matches the user's search query. Writing compelling, keyword-relevant descriptions within 140-155 characters gives you the best chance of Google showing your intended text.
Do meta keywords still help with SEO?
No. Google officially stopped using the meta keywords tag as a ranking signal in 2009, and most other major search engines followed. Bing explicitly states it ignores meta keywords. Including meta keywords does not hurt SEO but provides no benefit for Google, Bing, or Yahoo. The tag is still included in generators for completeness because some internal site search systems and older CMS platforms use it, but it should not be a focus of your SEO effort.
What is the difference between noindex and nofollow?
Noindex tells search engines not to include the page in their index, so the page will not appear in search results. Nofollow tells search engines not to follow or pass PageRank through links on the page. They are independent directives and can be combined: a page can be indexed but have its links not followed (index, nofollow), or excluded from the index while still passing link value (noindex, follow). Use noindex for thank-you pages, admin pages, and thin content; use nofollow for pages with paid or untrusted links.
What is the Open Graph image size?
The recommended Open Graph image size is 1200 x 628 pixels (a 1.91:1 aspect ratio). Facebook crops images smaller than 600 x 315 px and may not display images under 200 x 200 px at all. LinkedIn recommends 1200 x 627 px. Twitter large card images should be at least 300 x 157 px, with 1200 x 628 px recommended for best quality. Using 1200 x 628 px satisfies all major platforms with a single image.
Why does Google rewrite my meta description?
Google rewrites meta descriptions when it determines that an excerpt from the page body more accurately answers the user's specific search query than your provided description. This is especially common for informational queries where a specific answer appears in the page content but not in the description, and for short or low-quality descriptions. Google rewrites descriptions on approximately 60-70% of pages according to various industry studies. The best approach is to write a compelling, concise description that accurately summarises the page, as Google is less likely to override a high-quality description.
What is a Twitter Card and how do I add one?
A Twitter Card is a set of meta tags that control how your page appears when shared on Twitter/X. Without Twitter Card tags, a shared link appears as plain text. With them, it shows as a card with a title, description, and image. The main card types are: summary (small square image), summary_large_image (full-width image, most common for articles), app (for app download cards), and player (for video/audio). Add the tags to your page's <head> section. Twitter validates cards using its Card Validator tool so you can test your URL there after adding the tags.
What is a canonical tag and when should I use it?
A canonical tag (<link rel='canonical' href='URL'>) tells search engines which URL is the preferred version of a page when the same content is accessible at multiple addresses. Common situations requiring a canonical tag include: HTTP vs HTTPS versions of a page, www vs non-www, trailing slash vs no trailing slash, paginated versions of a list, product pages accessible via multiple category paths, and duplicate content syndicated across sites. The canonical tag should point to the URL you want Google to index and rank. Without it, Google may split PageRank across duplicate URLs or choose the wrong version to index.
Where do I put meta tags in HTML?
Meta tags go inside the <head> section of your HTML document, between the opening <head> tag and the closing </head> tag. The <title> tag must be a direct child of <head>. Most meta tags use <meta> elements with name/content or property/content attributes, also inside <head>. In WordPress, meta tags are typically added in the theme's header.php file or via a plugin like Yoast SEO or Rank Math. In Shopify, they go in the theme.liquid file. In static site generators, they are added in the layout or head partial template.

Rate This Tool

Was this tool helpful?

Be the first to rate this tool

About the Author

S. Siddiqui

S. Siddiqui

Founder & Editor-in-Chief

LinkedIn Profile

S. Siddiqui is the founder and editor-in-chief of YourToolsBase, overseeing all content, tool accuracy, and editorial standards.

View full profile

Authoritative Sources

Formulas and data in this tool are based on guidelines from the above sources.