The head for SEO: title, meta description, canonical, and viewport
Part 8's homepage had a bare-minimum <head> — just a title. This part fills it in properly, with every tag that genuinely affects how the page is found, ranked, and clicked on in search results, tying directly into the SEO series this content sits alongside.
The real, complete SEO-ready head
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bright Leaf Coffee — Small-batch coffee, roasted weekly</title>
<meta
name="description"
content="Small-batch coffee roasted weekly and shipped within 24 hours. Gift and monthly subscriptions available."
/>
<link rel="canonical" href="https://brightleafcoffee.com/" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
</head><title>: the single highest-weight element on the page
The title tag is what shows as the clickable headline in search results and as the browser tab label — it's consistently one of the strongest individual ranking signals in real, practical SEO, exactly as the SEO series' own title tag guidance covers in depth. A real, effective title states what the page actually is, includes the genuinely important keyword naturally, and stays under roughly 60 characters so search engines don't truncate it with an ellipsis in results.
<meta name="description">: not a ranking factor, but a real click-through factor
<meta
name="description"
content="Small-batch coffee roasted weekly and shipped within 24 hours. Gift and monthly subscriptions available."
/>Google doesn't use the meta description as a direct ranking signal — but it's frequently shown as the snippet text under the title in search results, which makes it a real, direct lever on click-through rate independent of ranking position. A genuinely compelling, accurate description that matches what the page actually delivers earns more clicks at the same ranking position than a vague or missing one, which the SEO series covers in the exact same depth.
viewport: not optional on any real modern page
<meta name="viewport" content="width=device-width, initial-scale=1" />Without this tag, mobile browsers render the page at a fixed desktop-width virtual viewport and then zoom it out to fit the real screen — resulting in tiny, unreadable text a visitor has to manually pinch-zoom to read. This single tag is what makes a page responsive at all on a phone; omitting it isn't a minor gap, it's a completely broken mobile experience, directly connected to the SEO series' own mobile-first indexing coverage — Google indexes and ranks primarily using the mobile version of a page, so a broken mobile viewport is a genuine, direct ranking problem, not just a cosmetic one.
<link rel="canonical">: telling search engines which URL is the real one
<link rel="canonical" href="https://brightleafcoffee.com/" />A canonical tag declares the one, real, authoritative URL for a page's content — genuinely important when the same content is reachable through more than one URL (with and without a trailing slash, with tracking parameters attached, an HTTP and HTTPS version). Without it, search engines have to guess which version is the "real" one to index and rank, sometimes splitting ranking signal across duplicates instead of concentrating it on one — covered in full depth in the SEO series' own canonical tag guidance.
Favicons: small, but a real trust signal
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />A missing favicon shows a generic, blank browser tab icon — small, but it's a real, immediate signal of an unfinished or untrustworthy-looking site, especially across multiple open tabs where a visitor is scanning icons to find the right one. Providing both a traditional .ico fallback and a modern SVG icon covers the real range of browsers and use contexts (including how the icon appears in bookmarks and browser history).
Copying the exact same meta description across every page of a real site, or leaving it off entirely and letting search engines auto-generate a snippet from page content. Both produce a real, worse click-through outcome than a genuine, specific description written for what that individual page actually offers — the homepage's description above is deliberately different from what the Subscriptions page (built in part 21) needs.
Next: Open Graph and Twitter Card meta tags — controlling exactly how a real link to this page looks when shared on social media.