Meta tags are snippets of HTML that provide information about a page to search engines and social platforms. They don't appear on the page itself, but they control how your pages look in Google search results, social media previews, and browser tabs. Getting them right is one of the highest-impact, lowest-effort SEO wins.
Title Tag — The Most Important Meta Tag
The title tag (<title>) defines the page's title. It appears in three critical places: the browser tab, Google search results, and social media shares (as a fallback).
<title>Best Free Online Tools for Developers | ToolboxHub</title>
Title Tag Best Practices
- Keep it under 60 characters: Google truncates titles longer than about 580 pixels (roughly 60 characters). Check yours with our Meta Tag Length Checker
- Put the keyword first: "JSON Formatter - Free Online Tool" outperforms "Free Online Tool - JSON Formatter" because the keyword appears earlier
- Include your brand: Append your site name with a separator: "Page Title | Brand" or "Page Title - Brand"
- Make each title unique: Duplicate titles confuse search engines about which page to rank
- Write for clicks: The title is your headline in search results. Make it compelling enough to click
Meta Description
The meta description provides a summary that appears below the title in search results:
<meta name="description" content="500+ free online tools for text, development, math, finance, and more. No signup required." />
Meta Description Best Practices
- Keep it between 120-160 characters: Shorter is too thin; longer gets truncated
- Include a call to action: "Try it free", "Learn how", "Get started" — tell users what to do
- Include the target keyword: Google bolds keyword matches in the snippet, making it more eye-catching
- Match search intent: If the query is informational, promise to explain. If transactional, promise to help them do the thing
Note: Google sometimes rewrites your meta description if it thinks another snippet from your page better matches the query. But a well-written description is used more often than not.
Open Graph Tags — Social Media Previews
When someone shares your URL on Facebook, LinkedIn, Slack, or Discord, these platforms read Open Graph (OG) tags to build the preview card:
<meta property="og:title" content="Best Free Developer Tools" />
<meta property="og:description" content="Formatters, converters, and generators for developers." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/tools" />
<meta property="og:type" content="website" />
The most important OG tag is og:image. A good preview image dramatically increases click-through rates on social shares. The ideal size is 1200x630 pixels.
Preview exactly how your OG tags will look when shared with our Open Graph Preview tool.
Twitter Card Tags
Twitter (X) uses its own card tags, falling back to OG tags if its own aren't present:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Best Free Developer Tools" />
<meta name="twitter:description" content="Formatters, converters, and generators." />
<meta name="twitter:image" content="https://example.com/twitter-card.png" />
The twitter:card value determines the card layout. summary_large_image shows a large image preview; summary shows a small thumbnail. For most pages, summary_large_image drives more engagement.
Check how your cards look with our Twitter Card Preview.
Robots Meta Tag
The robots meta tag tells search engines how to handle a page:
<meta name="robots" content="index, follow" />
Common directives:
index/noindex— whether to include the page in search resultsfollow/nofollow— whether to follow links on the pagenoarchive— don't show a cached versionnosnippet— don't show a text snippet in resultsmax-snippet:160— limit snippet length to 160 characters
Most pages should be index, follow (or simply omit the tag, since that's the default). Use noindex for internal pages you don't want in search results: admin panels, search results pages, staging environments, duplicate content.
Canonical URL
The canonical tag tells search engines which version of a page is the "original" when duplicate or similar versions exist:
<link rel="canonical" href="https://example.com/tools/json-formatter" />
Common scenarios where canonicals matter:
- HTTP vs HTTPS versions: The canonical should always be HTTPS
- www vs non-www: Pick one and make the other canonical
- Pagination: Page 2, 3, etc. might need a canonical to page 1 (or a self-referencing canonical)
- URL parameters:
/products?sort=priceand/products?sort=namemay have the same canonical
Audit Your Meta Tags
Use our free tools to audit your site's meta tags right now:
- Meta Tag Length Checker — verify your titles and descriptions are the right length
- Google SERP Preview — see exactly how your page looks in Google results
- OG Preview — check your Open Graph social cards
- Twitter Card Preview — verify your X/Twitter cards
- Site SEO Analysis — check all meta tags, security headers, and robots.txt in one scan