Learning objectives
Build a purposeful head; distinguish page title, description, and heading; identify duplicate-URL and resource-loading concerns.
Prerequisites
Read document structure and links. Know the final public URL of the page you are publishing.
Give the document an identity
The head contains metadata and resource declarations rather than the main visible article. A title identifies the page in tabs, bookmarks, history, and other contexts. Write a specific title that remains understandable outside your website, such as Library membership requirements rather than Home or Untitled.
A meta description summarizes the page’s useful content. Search systems may use or replace it when presenting a result; it is not a command that guarantees an exact snippet. Write it for the reader’s decision and keep it consistent with the page. Repeating the same description on every lesson makes different results harder to distinguish.
Set the browser’s starting assumptions
Declare UTF-8 near the start of head and save the file with that encoding. Declare the primary language on html. Use a viewport meta value of width=device-width, initial-scale=1 so a mobile browser can lay out the page against the device width. Avoid disabling zoom, which can prevent readers from enlarging text they need to see.
Link shared stylesheets with rel="stylesheet". A favicon gives the tab a recognizable visual cue but does not replace a text title. Scripts have different loading behavior depending on their type and attributes. For a classic external script that needs the parsed document, defer is often useful; module scripts defer by default unless async behavior is requested. Do not add resource hints simply because they sound fast: measure the actual critical path.
Treat search metadata as a consistency problem
A canonical link identifies the preferred URL among substantially duplicate versions. It should point to the page you intend to consolidate, not automatically to the homepage. Canonical is a signal to search systems, not an access restriction or a substitute for clean routing. Redirect obsolete public URLs when appropriate and keep internal links consistent.
Robots directives can influence indexing, but robots.txt is not a privacy mechanism. A blocked crawler may be unable to read a page’s noindex directive. Private information needs authentication and authorization. Structured data must describe content actually present on the page and use a valid supported vocabulary; it does not guarantee a special search appearance.
The most useful foundation is still a clear document: meaningful headings, descriptive links, original answers, accurate examples, and fast access to the information. Metadata cannot compensate for empty pages or misleading content. In WordPress, coordinate theme output with SEO plugins so they do not emit competing titles, descriptions, or canonical links.
Working example
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Library membership requirements | North Library</title>
<meta name="description" content="See the documents, eligibility requirements, and opening hours for joining North Library.">
<link rel="canonical" href="https://example.org/membership/">
<link rel="stylesheet" href="/assets/site.css">
</head>Another example
<head>
<title>Search results | North Library</title>
<meta name="robots" content="noindex,follow">
<script src="/assets/search.js" defer></script>
</head>Expected output
These declarations affect the containing document rather than producing visible paragraphs. Inspect the browser tab, page source, network requests, and final URL to verify them. Search presentation can differ from the supplied description.
Common mistakes
Do not put visible headings in head, use the same canonical URL on unrelated articles, or promise rankings from metadata. Do not output multiple descriptions through both a theme and an SEO plugin. Do not disable zoom in pursuit of a fixed visual layout.
Accessibility and browser notes
A useful title helps people distinguish tabs and return to a page. Language metadata helps pronunciation. Viewport configuration must preserve zoom. Test titles after navigation, especially if client-side scripts modify the document.
Practice
Write metadata for a page explaining accessible table headers. Use a specific title and a truthful one-sentence description.
Review the solution and reasoning
<title>Accessible HTML table headers | HTML Code Runner</title>
<meta name="description" content="Learn how captions, th cells, and scope connect table data to its row and column headings.">The title identifies the topic and brand. The description names the actual learning outcome without exaggerated promises. A production canonical URL should be added only after the page’s final route is known.