Meta Description

The meta description element is placed inside the HTML `<head>` tree alongside Open Graph, Twitter Cards, and canonical tags: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Free Online Word Counter - Live Character & Reading Time Stats</title> <meta name="description" content="Count words, characters, sentences, and calculate reading time instantly in your browser. 100% private, client-side text analysis tool."> <link rel="canonical" href="https://toolqix.store/tools/word-counter"> </head> ``` Critical Implementation Rules: 1. One Per Page: Never declare multiple `<meta name="description">` tags on the same page. 2. Character Integrity: Escape double quotes inside the content attribute (`&quot;`) or use single quotes to prevent early attribute termination. 3. Whitespace Normalization: Avoid hard line breaks (newlines) inside the content attribute, as crawlers may truncate string evaluation.

Search engine display constraints across hardware viewports:

How to implement dynamic, SEO-optimized meta descriptions in modern Next.js App Router applications:

import { Metadata } from 'next';

interface PageProps {
  params: { slug: string };
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const tool = await getToolData(params.slug);

  const cleanDescription = tool.metaDescription
    .replace(/\s+/g, ' ')
    .trim()
    .slice(0, 160);

  return {
    title: `${tool.name} - Free Online Tool | ToolQix`,
    description: cleanDescription,
    openGraph: {
      title: tool.name,
      description: cleanDescription,
      url: `https://toolqix.store/tools/${params.slug}`,
      type: 'website'
    },
    twitter: {
      card: 'summary_large_image',
      title: tool.name,
      description: cleanDescription
    }
  };
}