How to Write HTML Metadata for Search and Sharing
Create useful titles, descriptions, canonical URLs, and social cards without treating metadata as a bag of keywords.
The short version
Metadata should accurately preview the page a person is about to open.
Start with the search result
The title should identify the page and distinguish it from neighboring pages. The meta description should summarize the useful outcome in plain language. Neither needs repeated keywords or a list of features.
Keep a canonical URL when the same content is reachable through tracking parameters or multiple paths. Set the document language and viewport explicitly.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accessible HTML Forms: A Practical Guide</title>
<meta name="description" content="Build forms people can understand, complete, and correct from any device.">
<link rel="canonical" href="https://example.com/guides/accessible-forms">
</head>Make shared links understandable
Open Graph and X metadata influence how a link appears in chat and social feeds. Reuse the page title and description unless the channel genuinely needs a shorter version. The preview image should be legible at small sizes and should not promise content the page does not contain.
Treat metadata as part of the release
Preview the result before shipping. Check for truncated or duplicated titles, accidental noindex directives, stale canonical hosts, and missing images. A beautiful page with generic metadata is hard to recognize after it leaves your site.