HTML title and metadata: distinguish document identity from page copy

Use it for a real task

The receipt list is one page in a larger site. Its title includes the page purpose and site name; its description gives a short human-readable summary. A page-specific description is useful for previews, but a search engine may choose different text. The charset declaration stays near the start of head so decoding is settled early.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pending receipts | AI Trove</title>
  <meta name="description" content="Review pending receipt batches and export dates.">
</head>

What the markup guarantees

Keep exactly one meaningful title for an ordinary document. Metadata is not a substitute for the visible heading or for access control: anything emitted into the response is available to the client.

Cost and limits

Metadata adds little transfer size, but duplicate or stale descriptions create maintenance cost across many routes. Generate them from the page's actual purpose, then inspect the rendered head.

Common Mistakes

• Do not put a secret or private token in a meta element.
• Avoid giving many unrelated pages the same title.
• The description does not guarantee the text shown in a search result.

Connected lessons

• HTML document skeleton: declare language, encoding, and a real title
• HTML headings and paragraphs: expose a readable outline without styling tricks
• Web Technology

Related: HTML document skeleton: declare language, encoding, and a real title.

Related: HTML time and data: pair readable copy with machine-readable values.

Related: HTML site icon: identify a document in browser UI.

Related: HTML meta description: write a page summary from actual content.

Continue with HTML color-scheme metadata: declare supported UI schemes separately from browser chrome.