Meta tags are HTML elements that provide information about a web page to search engines, browsers, and social media platforms. Although they are invisible to users, they have an enormous impact on how pages appear in search results, how they look when shared on social media, and how browsers handle them. This guide covers every important meta tag you need to know.
> Quick start: Use our free [Meta Tag Generator](/tools/meta-tag-generator) to create a complete, optimised set of meta tags for any page in seconds.
What Are Meta Tags?
Meta tags live inside the <head> section of an HTML document. They are not displayed on the page itself but are read by search engine crawlers, social media scrapers, and browser rendering engines. A minimal set of meta tags looks like this:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title — Site Name</title> <meta name="description" content="A concise description of the page."> </head>
The Title Tag
Advertisement
While technically not a meta element, the title tag is the most important on-page SEO element. It appears as the clickable headline in search engine results pages and as the browser tab label.
Best practices for title tags:
- Keep them between 50–60 characters (Google truncates around 600px width, roughly 60 characters)
- Include your primary keyword near the beginning
- Make each page's title unique
- Use a separator (like a dash or pipe) between the page title and site name
- Write for humans first, then for search engines
Example: JSON Formatter — Free Online Tool | ToolHub
The Description Meta Tag
The meta description is a brief summary of the page shown below the title in search results. While Google does not use it as a direct ranking factor, it significantly impacts click-through rates.
Best practices:
- Keep descriptions between 150–160 characters
- Include your target keyword naturally
- Write a genuine, compelling summary — treat it as ad copy
- Make each page's description unique
- Include a call to action where natural
Robots Meta Tag
The robots meta tag tells search engine crawlers how to treat a page. Common values:
index, follow— Default, allow indexing and link followingnoindex, nofollow— Block the page entirely from search resultsnoindex, follow— Do not index but still follow links
Use noindex for: duplicate content pages, search result pages, thank-you pages, internal tools, and staging environments.
Viewport Meta Tag (Mobile Responsiveness)
The viewport meta tag controls how a page is displayed on mobile devices. Without it, mobile browsers render the page at desktop width and scale it down, making text tiny.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This is non-negotiable for modern websites. Google uses mobile-first indexing, meaning it evaluates the mobile version of your page for ranking.
Charset Meta Tag
Always use UTF-8, which supports all languages and symbols:
<meta charset="UTF-8">
Place this as the very first element inside <head> — before the title tag — to ensure the browser uses the correct encoding when parsing the page title.
Open Graph Tags for Social Sharing
Open Graph (OG) tags were introduced by Facebook and are now used by all major social platforms to generate link preview cards when pages are shared. Without OG tags, platforms make a poor guess at what image and text to show.
<meta property="og:title" content="Page Title"> <meta property="og:description" content="Page description for social sharing."> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:url" content="https://example.com/page"> <meta property="og:type" content="website"> <meta property="og:site_name" content="Your Site Name">
OG image requirements: Use an image at least 1200×630 pixels. Learn more in our [Open Graph implementation guide](/blog/open-graph-guide).
Twitter Card Tags
Twitter has its own set of meta tags for customising how links appear on X/Twitter:
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Description for Twitter sharing."> <meta name="twitter:image" content="https://example.com/twitter-image.jpg"> <meta name="twitter:site" content="@yourtwitterhandle">
Use summary_large_image for most pages (shows a large image preview).
Canonical Tag (Preventing Duplicate Content)
The canonical tag tells search engines which version of a page is the "official" version when multiple URLs serve similar content:
<link rel="canonical" href="https://example.com/the-definitive-url/">
Use canonical tags for: HTTP vs HTTPS, www vs non-www, URLs with tracking parameters, and paginated pages.
Schema Markup (Structured Data)
Schema.org structured data in JSON-LD format helps search engines understand your content and can unlock rich results — star ratings, FAQ dropdowns, event dates appearing directly in search results:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Tool",
"name": "JSON Formatter",
"description": "Free online JSON formatter and validator",
"url": "https://example.com/tools/json-formatter"
}
</script>Auditing Your Meta Tags
Use browser developer tools to inspect a page's meta tags. Google Search Console shows how your pages appear in search results and highlights missing or duplicate title and description issues. Generate all your meta tags at once using our [Meta Tag Generator](/tools/meta-tag-generator) to ensure nothing is missing.
Frequently Asked Questions
Q: Do meta keywords still matter for SEO?
No. Google has officially ignored the <meta name="keywords"> tag since 2009. Focus instead on well-written title tags, descriptions, and quality content.
Q: How often should I update my meta descriptions?
Update them whenever you have better data about what drives clicks. Review your Google Search Console data to see which descriptions have low click-through rates and test improvements.
Q: What is the ideal meta description length?
Between 150–160 characters for desktop; Google may show shorter versions on mobile (around 120 characters). Our [Meta Tag Generator](/tools/meta-tag-generator) shows a live character count as you type.
Q: Do Open Graph tags help with Google SEO?
OG tags do not directly influence Google rankings, but they dramatically improve click-through rates when your content is shared on social media — which drives more referral traffic and indirectly improves SEO metrics.
Conclusion
Meta tags are one of the highest-leverage technical SEO investments you can make. A well-crafted title tag and description improve click-through rates. Proper OG and Twitter Card tags ensure your content looks great when shared. Canonical tags prevent duplicate content penalties. [Use ToolHub's Meta Tag Generator](/tools/meta-tag-generator) to create a complete set of meta tags for any page instantly.