Meta Description

Definition

A meta description is the content of <meta name="description">. Search engines may use it as the SERP snippet, but can also rewrite it using on-page text. Think of it as your ad copy: clearly state the value and outcome of the page.

Why it matters

• Directly impacts CTR — good descriptions can boost click-through rate by 5-10% in competitive SERPs
• Controls SERP snippet presentation — reduces chance of Google pulling undesirable page excerpts
• Social sharing fallback — platforms use meta description if no OG description is set
• Improves conversion quality — clear expectations attract users who actually need your content
• AEO citation source — AI assistants may use description as reference for answer summaries
• Brand consistency — unified description style reinforces brand identity
• Reduces bounce rate — when user expectations match content, they're more likely to engage

How to implement

• Keep length between 120-160 characters — longer gets truncated
• Front-load important information — mobile may only show first 100 characters
• Include primary keyword — it gets bolded in SERP, increasing visual appeal
• Write as call-to-action — use verbs like 'Learn', 'Free', 'Discover' to encourage clicks
• Unique description per page — avoid duplicates, give each page its own value proposition
• Use numbers and specifics — '10 tips', 'Free tool', '5-minute guide' are more compelling
• Regularly optimize — use GSC click data to improve underperforming pages

Examples

// React Helmet or Next.js Head
import { Helmet } from 'react-helmet-async';

function SEOHead({ title, description }) {
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      {/* OG fallback */}
      <meta property="og:description" content={description} />
    </Helmet>
  );
}

// Usage example
<SEOHead
  title="Meta Tags Generator - Free SEO Tool"
  description="Generate title, description, and OG tags for free. Includes canonical, hreflang, and JSON-LD support for developers."
/>

// Generate descriptions dynamically based on page type
function generateDescription(page) {
  const templates = {
    product: (p) =>
      `${p.name} - ${p.price}. ${p.features.slice(0, 2).join(', ')}. Free shipping, 30-day returns.`,
    blog: (p) =>
      `${p.title}: ${p.excerpt.slice(0, 80)}... Read the full guide.`,
    category: (p) =>
      `Explore ${p.count} ${p.name} products. ${p.topBrands.join(', ')} and more. ${p.priceRange}.`,
    tool: (p) =>
      `Free ${p.name} tool. ${p.benefit}. No signup required.`
  };
  
  const desc = templates[page.type]?.(page) || page.fallback;
  // Ensure proper length
  return desc.length > 155 ? desc.slice(0, 152) + '...' : desc;
}

Related