Skip to content
ZeroServer.tools
All guides

SEO Meta Tags Explained: Title, Description, and Open Graph

June 10, 2026 · 6 min read

SEO Meta Tags Explained: Title, Description, and Open Graph

Meta tags live in the <head> of your HTML document and tell search engines and social platforms what your page is about. Getting them right is one of the highest-leverage, lowest-effort SEO improvements you can make — and getting them wrong silently costs you traffic and click-through rates every day.

This guide covers every tag that matters, with exact specifications and common mistakes.

The <title> Tag

The page title is the single most important on-page SEO element. It appears in search results as the blue clickable link, in browser tabs, and as the default bookmark name.

<title>CSS Grid Layout Guide: Complete Reference with Examples | ZeroServer</title>

Optimal length: 50–60 characters. Google displays approximately 600px of title width, which is roughly 55–60 characters at typical font sizes. Titles over 60 characters get truncated with an ellipsis in search results.

Keyword placement: Put your primary keyword as close to the start as possible. "CSS Grid Layout Guide" performs better than "Complete Guide to CSS Grid Layout" because the important words appear first.

Brand suffix: Append your brand name at the end separated by a pipe or dash: | SiteName or — SiteName. Keep it consistent across all pages.

What Google truncates: Google may rewrite your title entirely if it thinks the original is misleading, keyword-stuffed, or too long. Write titles for humans first — Google's rewrites tend to be worse.

<meta name="description">

The meta description appears below the title in search results. It doesn't directly affect ranking, but it heavily influences click-through rate (CTR) — which does affect ranking indirectly.

<meta name="description" content="Learn every CSS Grid property with interactive examples. Master grid-template-columns, grid areas, auto-fit, and minmax in 10 minutes.">

Optimal length: 150–160 characters. Google shows about 920–990px of description. Anything beyond ~160 characters gets cut off mid-sentence, which looks unprofessional.

Include a call to action. Phrases like "Learn how to...", "Get the complete guide to...", and "Try it free" increase clicks because they set clear expectations.

CTR impact: Pages with well-written, relevant descriptions typically see 5–30% higher CTR compared to pages where Google auto-generates the snippet from body text. That's free traffic from your existing rankings.

Unique descriptions per page. Duplicate descriptions across multiple pages are a wasted opportunity. Each page should have a description tailored to its content.

<meta name="robots">

Controls how search engine crawlers index and follow links on your page.

<!-- Default — index this page and follow its links -->
<meta name="robots" content="index, follow">

<!-- Don't index, but follow links -->
<meta name="robots" content="noindex, follow">

<!-- Index, but don't follow links on this page -->
<meta name="robots" content="index, nofollow">

<!-- Full control over snippet length -->
<meta name="robots" content="max-snippet:160, max-image-preview:large">

<!-- Prevent cached copy in Google -->
<meta name="robots" content="noarchive">

Use noindex for: thank-you pages, internal search results, admin pages, duplicate content, staging environments. Use nofollow sparingly — it wastes link equity by telling crawlers to ignore outbound links.

The canonical tag tells search engines which URL is the "official" version of a page when the same content is accessible at multiple URLs.

<link rel="canonical" href="https://www.example.com/css-grid-guide/">

Why it matters: The same page might be accessible at:

  • https://example.com/page
  • https://www.example.com/page
  • https://example.com/page?utm_source=twitter
  • https://example.com/page/

Without a canonical tag, Google sees these as duplicate content and splits ranking signals between them. The canonical consolidates all signals to one URL.

Self-referencing canonicals: Add a canonical tag on every page pointing to itself. This prevents URL parameter variants (tracking params, session IDs) from competing with the clean URL.

Cross-domain canonicals: If you syndicate content to another site, add a canonical on the syndicated copy pointing back to your original URL. This prevents the syndicated version from outranking you.

Open Graph Tags

Open Graph tags control how your page appears when shared on Facebook, LinkedIn, Slack, and most messaging apps. Without them, social platforms guess — usually badly.

<meta property="og:title" content="CSS Grid Layout: Complete Reference Guide">
<meta property="og:description" content="Every CSS Grid property explained with live examples. Master grid layouts in minutes.">
<meta property="og:image" content="https://example.com/images/css-grid-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/css-grid-guide/">
<meta property="og:type" content="article">
<meta property="og:site_name" content="ZeroServer Tools">

og:image dimensions: 1200×630 pixels is the recommended size. It renders well on all platforms and as a 2:1 aspect ratio doesn't get cropped. Minimum size is 600×315, but larger images look sharper on retina displays.

Why social sharing fails without OG tags: When there's no og:image, Facebook picks a random image from the page (or shows nothing). Without og:title, it uses the <title> tag — which may be too long or keyword-stuffed for social context. Control your social appearance deliberately.

og:type common values: website (default), article, product, video.movie.

Twitter Card Tags

Twitter has its own metadata layer that works alongside Open Graph.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CSS Grid Layout: Complete Reference Guide">
<meta name="twitter:description" content="Every CSS Grid property with live examples.">
<meta name="twitter:image" content="https://example.com/images/css-grid-twitter.jpg">
<meta name="twitter:site" content="@yourtwitterhandle">

twitter:card values:

  • summary — small square image, title, description
  • summary_large_image — full-width image above the text (use this by default)
  • player — embedded video/audio player
  • app — for mobile app deep links

Twitter falls back to Open Graph values if Twitter Card tags are missing, so at minimum you need twitter:card to opt into a specific card type.

Structured Data (JSON-LD)

Structured data provides machine-readable context that powers rich results in Google Search (star ratings, breadcrumbs, FAQs, event dates).

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSS Grid Layout: Complete Reference Guide",
  "datePublished": "2026-01-15",
  "author": {
    "@type": "Organization",
    "name": "ZeroServer"
  }
}
</script>

Common schema types:

  • Article / TechArticle — blog posts and guides
  • SoftwareApplication — tools and apps
  • BreadcrumbList — navigation breadcrumbs
  • FAQPage — FAQ sections (renders as expandable snippets in results)

JSON-LD is the recommended format (vs microdata or RDFa). It sits in the <head> and doesn't affect visible page markup.

Common Mistakes

Missing canonical tags — Every page needs one, even the homepage. Canonical is the most underused tag and one of the highest-value fixes.

Duplicate <title> tags — CMS templates sometimes output two title tags. Only the last one counts in some parsers; others merge them. Check your HTML source.

og:image missing or wrong size — Check your sharing appearance with Facebook's Sharing Debugger or LinkedIn's Post Inspector before launch. A missing image kills click-through on social shares.

og:url pointing to a different page — The og:url should match the canonical URL of the page it's on. Mismatches confuse social crawlers.

Keyword-stuffed titles — Titles like "CSS Grid | CSS Grid Tutorial | CSS Grid Examples | CSS Grid Reference" get rewritten by Google and look spammy to users.

Tools

Build complete, validated meta tag sets in seconds with the Meta Tag Generator. For Open Graph specifically, the Open Graph Generator outputs all required and optional OG tags. Preview exactly how your title and description appear in Google search results before publishing with the SERP Snippet Preview.

Getting meta tags right is unglamorous work, but it compounds. Every page you ship with correct tags accumulates better click-through rates, stronger social sharing, and cleaner indexation over time.