Title Tag and Meta Description: Length Rules, Rewriting, and Mistakes

Many SEO guides offer a rule of thumb such as 'keep your title under 60 characters.' While convenient, this advice ignores the fact that search engine display fonts are proportional rather than monospaced. A capital 'W' consumes roughly three times the horizontal pixel width of a lowercase 'i'. According to Google Search Central guidance on title links, Google evaluates titles against a strict pixel bounding container.

In August 2021, Google rolled out a major update to how it generates title links in search results. Rather than always displaying the HTML <title> tag verbatim, Google's algorithm frequently substitutes on-page <h1> headings, visual anchor text, or internal link text if it considers the defined title inadequate.

While meta descriptions do not act as direct algorithmic ranking signals, they are the primary sales pitch that convinces users to click your link over competitor results. A compelling meta description increases organic click-through rate (CTR), sending positive behavioral signals to search engines.

Next.js App Router simplifies title tag management across nested routes using the title.template object in root src/app/layout.tsx. This pattern guarantees that child pages automatically inherit the brand suffix without manual string concatenation errors.

// 1. Root Layout (src/app/layout.tsx)
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "ScanWise — Enterprise Website Intelligence & Auditing",
    template: "%s | ScanWise", // Automatically appends brand suffix to child pages
  },
  description:
    "Enterprise website intelligence platform for technical SEO, Core Web Vitals, accessibility, and security auditing.",
  metadataBase: new URL("https://example.com"),
};

// 2. Child Route (src/app/blog/[slug]/page.tsx)
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.seoTitle, // Automatically renders as: "${post.seoTitle} | ScanWise"
    description: post.seoDescription,
    alternates: {
      canonical: `/blog/${post.slug}`,
    },
  };
}

Avoid these frequent metadata engineering errors that suppress organic click-through rates:

Audit your metadata before releasing new pages or major site updates: