Meta Tag Generator
Generate HTML meta tags for your web pages. Preview how your title and description appear in search results, see Open Graph and Twitter Card previews, and copy the generated code — all in your browser.
What This Tool Does
A form-based HTML meta tag generator with live previews and export options.
Instant Generation
HTML meta tags are generated as you type. The output updates with every keystroke.
Live Search Preview
Preview how your page title and meta description may appear in Google search results.
Copy or Download HTML
Copy the generated meta tags to your clipboard, or download them as a .html file.
Open Graph Preview
Generate OG meta tags and preview how your page appears when shared on Facebook, LinkedIn, and other platforms.
Twitter Card Preview
Generate Twitter Card meta tags and preview how your content appears when shared on X (Twitter).
Character Counters
Live counters for your title and meta description, colour-coded to show when text falls inside or outside typical length guidelines.
Search Engine Directives
Configure robots, Googlebot, and Bingbot directives, referrer policy, language, and character encoding.
Mobile & PWA Tags
Set viewport, theme colour, Apple-specific tags, application name, and web app manifest link.
Favicon Links
Generate favicon link tags for ICO, PNG, SVG, Apple touch icon, and web app manifest.
Canonical URL
Add a canonical link tag to specify the preferred URL for your page.
What Are Meta Tags?
HTML meta tags explained for SEO and social sharing.
Meta tags are HTML elements that provide structured metadata about a web page. They are placed in the <head> section of an HTML document and are not visible to visitors on the page itself. Search engines, social media platforms, and browsers use this metadata to understand, display, and index your content.
The most important meta tags for SEO are the <title> tag and the <meta name="description"> tag. The title tag appears as the clickable headline in search results, while the meta description provides the summary text beneath it. Together, they are the primary way users decide whether to visit your page from search results.
Beyond search engines, meta tags power social sharing previews (Open Graph and Twitter Cards), control how search crawlers interact with your pages (robots directives), and configure mobile browser behavior (viewport, theme color). Every modern website should include a complete set of meta tags for optimal visibility and user experience.
Why Meta Tags Matter for SEO
How proper meta tags impact your search performance and user engagement.
Improve Click-Through Rates
A well-crafted title and meta description directly influence whether users click on your search result. The title is the first thing users see, and the description provides the context that convinces them to visit your page. Pages with optimized meta tags consistently achieve higher click-through rates in search results.
Control Social Sharing Previews
When your content is shared on Facebook, LinkedIn, Twitter, or other platforms, Open Graph and Twitter Card meta tags determine how the link appears. Without these tags, platforms guess the title, description, and image — often resulting in broken or unappealing previews that discourage clicks.
Guide Search Engine Crawlers
Robots meta tags tell search engines whether to index a page and whether to follow its links. The canonical tag prevents duplicate content issues by specifying the preferred URL version. These directives are essential for managing how search engines interact with your site.
Enhance Mobile Experience
The viewport meta tag ensures your page renders correctly on mobile devices. Theme color and Apple-specific tags improve the user experience when your page is saved to the home screen. These tags are critical for mobile-first indexing and user satisfaction.
Types of Meta Tags
A breakdown of the different categories of HTML meta tags your website needs.
Title Tag
The <title> tag is the single most important meta tag for SEO. It defines the page title shown in search results and browser tabs. Keep titles under 60 characters, include your primary keyword near the beginning, and make each title unique across your site.
Meta Description
The meta description provides a brief summary of your page content. While not a direct ranking factor, it significantly impacts click-through rates. Keep descriptions under 160 characters, include relevant keywords naturally, and write compelling copy that encourages users to click.
Open Graph Tags
Open Graph (OG) meta tags control how your page appears when shared on Facebook, LinkedIn, and other social platforms. Key OG tags include og:title, og:description, og:image, and og:url. The OG image should be at least 1200x630 pixels for the best display.
Twitter Card Tags
Twitter Card tags (now X Cards) control how your page appears when shared on Twitter/X. Use summary_large_image for a large image preview or summary for a smaller thumbnail. Include twitter:site and twitter:creator for attribution.
Robots Meta Tag
The robots meta tag controls how search engines crawl and index individual pages. Common values include index, follow, noindex, follow, and noindex, nofollow. You can also set crawler-specific directives for Googlebot and Bingbot.
Mobile & PWA Tags
The viewport meta tag ensures proper rendering on mobile devices. Additional tags like theme-color, apple-mobile-web-app-title, and manifest provide progressive web app support and improve the mobile user experience.
Meta Tag Best Practices
Follow these recommendations to maximize the impact of your meta tags.
Keep Titles Under 60 Characters
Search engines truncate titles longer than 60 characters. Keep your title concise, include your primary keyword, and make it compelling enough to drive clicks.
Write Unique Descriptions
Every page should have a unique meta description. Duplicate descriptions confuse search engines and reduce click-through rates. Stay under 160 characters.
Always Include OG Tags
Add at minimum og:title, og:description, og:image, and og:url on every page to control social sharing previews across all platforms.
Use a High-Quality OG Image
The OG image should be at least 1200x630 pixels, use a 1.91:1 aspect ratio, and be under 5 MB. Include your branding and text overlay for better recognition in social feeds.
Set Canonical URLs
Use the canonical tag to specify the preferred version of a page when multiple URLs serve similar content. This consolidates ranking signals and prevents duplicate content penalties.
Configure Robots Directives
Use the robots meta tag to control indexing on a per-page basis. Use noindex for thin content pages, admin areas, and duplicate content.
Common Meta Tag Mistakes
Avoid these frequent errors that can harm your SEO and social sharing performance.
Missing or Empty Title Tags
Every page must have a unique, descriptive title tag. Missing titles force search engines to generate their own, which often look unprofessional and reduce click-through rates.
Duplicate Meta Descriptions
Using the same meta description across multiple pages confuses search engines and users alike. Each page should have a description that accurately summarizes its unique content.
Keyword Stuffing
Overloading meta tags with keywords is a spammy practice that can trigger search engine penalties. Write naturally for humans first, and include keywords only where they fit naturally.
Missing Open Graph Tags
Without OG tags, social platforms guess the title, description, and image for your shared links — often resulting in broken or unappealing previews that discourage clicks.
Oversized or Missing OG Images
Small or incorrectly sized OG images are cropped or rejected by social platforms. Always use a 1200x630 pixel image at minimum for proper display across all platforms.
Blocks Important Resources
Using noindex or nofollow on important pages prevents search engines from indexing your best content. Reserve these directives for low-value or administrative pages only.
More Free SEO Tools
Complement your meta tags with these free SEO tools from NodSEO.
Canonical Tag Checker
Check and validate canonical tags on any URL to prevent duplicate content issues and consolidate ranking signals.
Redirect Checker
Trace full redirect chains with HTTP status codes, SEO warnings, and hop-by-hop analysis for any URL.
Robots.txt Generator
Generate, preview, and download valid robots.txt files. Set crawl rules, block bots, add sitemaps — all in your browser.
UTM Builder
Generate campaign tracking URLs with Google Analytics GA4 parameters. Copy as plain URL, Markdown, or HTML.
Bulk UTM Generator
Import hundreds of URLs from CSV, TSV, or JSON and generate UTM links for every row at once.
Frequently Asked Questions
What are meta tags in HTML?
Meta tags are HTML elements placed in the <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono"><head></code> section that provide structured metadata about a web page. They are not visible to visitors but are used by search engines, social media platforms, and browsers to understand, display, and index your content.
What is the most important meta tag for SEO?
The <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono"><title></code> tag is the single most important meta tag. It appears as the clickable headline in search results and browser tabs. The meta description is the second most important, providing the summary text beneath the title in search results.
How long should a meta title be?
Meta titles should be under 60 characters to avoid truncation in search results. Google typically displays the first 50-60 characters of a title tag. Keep your primary keyword near the beginning.
How long should a meta description be?
Meta descriptions should be between 150-160 characters. Search engines truncate descriptions longer than 160 characters, cutting off important information and reducing click-through rates.
Do meta tags affect search rankings?
The title tag is a confirmed ranking factor. The meta description is not a direct ranking factor but significantly impacts click-through rates, which indirectly influences SEO performance. Other meta tags like robots and canonical have direct SEO implications.
What are Open Graph meta tags?
Open Graph (OG) meta tags control how your page appears when shared on social platforms like Facebook, LinkedIn, and Pinterest. They were introduced by Facebook and have become a standard for social sharing previews across the web.
What are Twitter Card meta tags?
Twitter Card (now X Card) meta tags control how your content appears when shared on Twitter/X. They define the card type, title, description, image, and attribution. The <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">summary_large_image</code> card type shows a large image preview.
What is the robots meta tag?
The <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">robots</code> meta tag tells search engines how to crawl and index a specific page. Common values include <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">index, follow</code> (default), <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">noindex, follow</code> (hide page but follow links), and <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">noindex, nofollow</code> (hide page and ignore links).
What is the canonical tag?
The <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">rel="canonical"</code> link tag tells search engines which URL is the preferred version when multiple URLs serve similar content. It consolidates ranking signals to the canonical URL and prevents duplicate content issues.
Do I need both OG and Twitter Card tags?
Yes. While Twitter/X does fall back to OG tags when Twitter Card tags are missing, using both ensures optimal previews on both platforms. Twitter Card tags let you specify the card type and provide dedicated control over the Twitter preview.
What is the viewport meta tag?
The <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">viewport</code> meta tag controls how a web page is displayed on mobile devices. The standard value <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">width=device-width, initial-scale=1</code> ensures proper scaling and is essential for mobile-friendly pages.
Should I use keywords in meta tags?
The <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">keywords</code> meta tag is ignored by Google and other major search engines. However, including relevant keywords naturally in your title and description is still important for relevance and click-through rates.
Can I have multiple meta tags of the same type?
For most meta tags, only one instance is valid. You should have exactly one <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono"><title></code>, one <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">description</code>, and one <code class="text-foreground bg-muted/50 rounded-sm px-1 py-0.5 text-xs font-mono">canonical</code> tag. For OG tags, you can have multiple properties but only one of each.
What happens if I don't have meta tags?
Without meta tags, search engines generate their own titles and descriptions from your page content, which often look unprofessional. Social platforms guess the preview content, frequently showing wrong images or text. Your pages may also render incorrectly on mobile devices.
How do I use this meta tag generator?
Fill in the form fields on the left — title, description, URL — and watch the previews update in real time. The generated HTML output on the right updates with every keystroke. Click Copy HTML to copy the tags to your clipboard, or Download to save them as an HTML file.
Is this meta tag generator free?
Yes, completely free forever. No usage limits, no premium features, no signup required, and no hidden costs. All processing happens locally in your browser.
Privacy
100% Client-Side
All meta tag generation happens locally in your browser. No data is uploaded to any server.
No Tracking
We do not collect analytics on the meta tags you generate. What you build stays private.
No Storage
Your meta tag configuration is not stored on our servers. Local storage is used for your session only.
Start generating your meta tags now
No account needed. No data leaves your browser.