Title tag and meta description: developer checklist

A title tag and meta description give browsers, search systems, and link tools a short summary of a page. Developers need to make both values specific to the route, render them in the delivered HTML, and check the production response before launch. A correct local component can still ship a stale title or one description copied across the site.

Treat the pair as release data. Define it beside the route's visible content, review it with the page, and test the final URL after redirects and rendering rules apply.

Title tag and meta description checklist

Run this check for each public, indexable route:

• Add one descriptive <title> element inside <head>.
• Add one <meta name="description"> with a page-specific summary.
• Match both values to the visible page and its search intent.
• Keep the important words near the start without repeating keyword variants.
• Make titles and descriptions unique across routes.
• Return useful metadata in the initial HTML when your stack supports server rendering.
• Keep the title, H1, canonical URL, Open Graph data, and visible copy consistent.
• Inspect the deployed response and rendered document.
• Add route-level metadata assertions to CI.

Google's title link guidance recommends a <title> on each page with concise, descriptive text. Google can also build a title link from headings, visible text, and links when its systems decide another label represents the page better. Your tag expresses a preference; it does not lock the search result.

Write a specific SEO title tag

Name the page and give the searcher enough context to distinguish it from nearby pages. Put the unique part before repeated site text when that order reads well.

<title>API rate limiting guide | Example Docs</title>

Avoid values such as Home, Untitled, a raw route name, or one site-wide product slogan. A documentation page, pricing page, and release checklist serve different tasks, so they need different titles.

Google does not publish a fixed title tag character limit. Search results truncate title links to fit the available device width, and Google may select different title text. Use a house range as an editing and QA constraint rather than a promise about display. Slop Audit treats a specific title of about 10 to 65 characters as usable evidence. Your design system may choose a narrower range after reviewing real search results and page names.

The MDN title element reference also notes that browsers use the title in tabs and window labels. Put the page-specific text first so someone with several tabs open can tell them apart.

Remove boilerplate and keyword lists

A short brand suffix helps identify the site, but the suffix should not consume most of the title. Generate it from the route metadata:

type PageMeta = { title: string; description: string };

const pageMeta: Record<string, PageMeta> = {
  "/docs/rate-limits": {
    title: "API rate limiting guide",
    description: "Set request limits, return useful 429 responses, and test retry behavior for a public API.",
  },
  "/pricing": {
    title: "Plans and usage limits",
    description: "Compare request limits, project allowances, and support options for each Example plan.",
  },
};

const documentTitle = `${pageMeta[path].title} | Example`;

Do not join several keyword variations into the tag. Rate limiting, API limits, request throttling, API throttle guide reads like a list and hides the page's actual job. Pick one plain label that matches the page.

Follow meta description best practices

Summarize what the visitor will get from the page. Good descriptions name the subject, the useful outcome, and a concrete detail that helps the searcher choose.

<meta
  name="description"
  content="Set request limits, return useful 429 responses, and test retry behavior for a public API."
>

Google's snippet documentation explains that snippets come from page content and may use the meta description when it provides a better summary. Google can show different snippets for different searches. Write accurate preview copy, then make the visible opening answer the same intent.

Google sets no maximum meta description length and truncates snippets to fit the device. Slop Audit uses 50 to 180 characters as a practical review range. That range catches empty, tiny, or overloaded descriptions; it does not predict the exact text or width that a search result will display.

Give each route its own description. For large catalogs or documentation sites, generate descriptions from trustworthy page fields such as product name, version, category, or task. Reject empty fields and duplicates during the build. Google supports programmatic descriptions when they remain readable, diverse, and specific to the page.

Render metadata where crawlers can read it

Server-rendered pages should include the final title and description in the response <head>. Client-rendered applications can change both values with JavaScript, but the first response still deserves inspection. A cached app shell or failed script can expose the wrong route metadata to tools that do not render the page.

Google's JavaScript SEO guidance supports setting titles and descriptions with JavaScript while recommending unique, descriptive values. Test both layers when your application changes metadata during hydration:

curl -sS https://example.com/docs/rate-limits \
  | grep -E '<title>|name="description"'

Then inspect the rendered page in a browser:

({
  title: document.title,
  description: document.querySelector('meta[name="description"]')?.content,
});

Compare the two results. A mismatch can come from stale edge HTML, a client fallback, route data that loads after the first render, or a metadata component mounted at the wrong level.

Keep the title, H1, and social metadata aligned

The title tag and H1 can differ, but they should describe the same page. The H1 gives the on-page reader a visible heading. The title identifies the document in browser and search contexts. A concise title can include the site name while the H1 uses a more natural editorial phrase.

Open Graph tags serve shared-link previews, so they form a separate metadata set. Reuse values when they fit, or write a shorter social title for the image layout. Keep the identity and claims consistent. The Open Graph meta tags guide covers og:title, og:description, and preview testing. The canonical URL guide explains how to align metadata with the preferred production route.

Test title tags and meta descriptions in CI

A small browser test can enforce presence, useful length ranges, and route uniqueness. Keep thresholds in your repository so reviewers can change them as the content model evolves:

import { test, expect } from "@playwright/test";

const routes = ["/", "/pricing", "/docs/rate-limits"];

test("public routes have unique search metadata", async ({ page }) => {
  const titles = new Set<string>();
  const descriptions = new Set<string>();

  for (const route of routes) {
    await page.goto(`https://example.com${route}`);

    const title = await page.title();
    const description = await page
      .locator('meta[name="description"]')
      .getAttribute("content");

    expect(title.length, `${route} title length`).toBeGreaterThanOrEqual(10);
    expect(title.length, `${route} title length`).toBeLessThanOrEqual(65);
    expect(description?.length, `${route} description length`).toBeGreaterThanOrEqual(50);
    expect(description?.length, `${route} description length`).toBeLessThanOrEqual(180);
    expect(titles.has(title), `${route} duplicates title`).toBe(false);
    expect(descriptions.has(description ?? ""), `${route} duplicates description`).toBe(false);

    titles.add(title);
    descriptions.add(description ?? "");
  }
});

Add important public routes to the list as you ship them. Run a separate source-response check if server HTML matters to your rendering contract. The website regression testing checklist shows how to preserve a baseline and compare releases instead of relying on one manual pass.

Check the deployed metadata with Slop Audit

Run a Slop Audit after the page reaches a public HTTPS URL. The static audit reads the document title and meta description, records their values or lengths as evidence, flags missing and placeholder content, and compares each value with its practical review range. The report also checks the canonical URL, Open Graph metadata, crawler controls, and visible page identity as separate findings.

Slop Audit reviews the submitted page within a bounded audit. It does not promise a search ranking, force Google to use your preferred title or description, or prove that each route has unique metadata. Use the finding evidence to fix the route template, deploy the change, and scan the final URL again.

Metadata release checklist

• Confirm one useful title and one description on the final URL.
• Match both values to the route's visible purpose and primary search intent.
• Check titles and descriptions for duplicates across indexable routes.
• Inspect the initial response and the rendered document.
• Review length as an editorial constraint, not a search display guarantee.
• Align the title, H1, canonical URL, and social metadata.
• Run CI checks against the routes your release changes.
• Scan the deployed page and save the evidence with the release.

Finish the metadata pass, then use the website launch checklist for developers to verify reachability, mobile layout, crawl files, links, and the page's main task.