Capstone: Professionalizing the Summit Trail Outfitters Site

The previous four lessons introduced each metadata element individually. This lesson brings them together. You will apply a complete, professional <head> to every page of the Summit Trail Outfitters site and verify the result against a final checklist.

Why consistent metadata matters

A site where every page has a properly configured <head> is:

Accessible — screen readers announce the correct page title and language
Mobile-ready — viewport configuration prevents broken mobile layouts
Search-visible — descriptive titles and descriptions help search engines index the site correctly
Professional — favicons and social previews signal that the site is complete, not a draft

Inconsistency is the most common mistake. A page with great metadata sitting next to a page with <title>Page</title> and no description undermines the whole site.

The complete professional `<head>`

Every page of the Summit Trail Outfitters site should follow this template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Page Title — Summit Trail Outfitters</title>
    <meta name="description" content="Page-specific description here.">

    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <meta property="og:title" content="Page Title — Summit Trail Outfitters">
    <meta property="og:description" content="Page-specific description here.">
    <meta property="og:type" content="website">
  </head>
  <body>
    ...
  </body>
</html>

Complete `<head>` for each page

index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Summit Trail Outfitters — Guided Hiking Tours in the Pacific Northwest</title>
  <meta name="description" content="Summit Trail Outfitters leads small-group guided hiking tours through the most spectacular trails in the Pacific Northwest. Book your adventure today.">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <meta property="og:title" content="Summit Trail Outfitters — Guided Hiking Tours">
  <meta property="og:description" content="Small-group guided hiking adventures across the Pacific Northwest.">
  <meta property="og:type" content="website">
</head>

tours.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tours — Summit Trail Outfitters</title>
  <meta name="description" content="Browse day hikes and full-day adventures guided by certified wilderness professionals. Tours available for all fitness levels.">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <meta property="og:title" content="Tours — Summit Trail Outfitters">
  <meta property="og:description" content="Day hikes and full-day adventures in the Pacific Northwest.">
  <meta property="og:type" content="website">
</head>

about.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About — Summit Trail Outfitters</title>
  <meta name="description" content="Founded in 2012, Summit Trail Outfitters is committed to safe, sustainable, and unforgettable outdoor adventure in the Pacific Northwest.">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <meta property="og:title" content="About Summit Trail Outfitters">
  <meta property="og:description" content="Our story, our guides, and our commitment to the outdoors.">
  <meta property="og:type" content="website">
</head>

blog-article.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>How to Choose the Right Hiking Boot — Summit Trail Outfitters Blog</title>
  <meta name="description" content="Cut, sole, waterproofing, and fit — our guide to choosing a hiking boot that will keep you comfortable on any trail.">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <meta property="og:title" content="How to Choose the Right Hiking Boot">
  <meta property="og:description" content="A beginner's guide to hiking boot selection from Summit Trail Outfitters.">
  <meta property="og:type" content="article">
</head>

Note: og:type is article for the blog post, not website. This is the correct value for a news or blog article.

contact.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact — Summit Trail Outfitters</title>
  <meta name="description" content="Questions about a tour or ready to book? Contact Summit Trail Outfitters by form, email, or phone.">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <meta property="og:title" content="Contact Summit Trail Outfitters">
  <meta property="og:description" content="Get in touch — we are happy to answer questions and help you book.">
  <meta property="og:type" content="website">
</head>

The metadata checklist

Work through this checklist for every page of the site before moving to Module 10:

Document configuration

<!DOCTYPE html> at the top
<html lang="en"> on the root element
<meta charset="UTF-8"> as the first element in <head>
<meta name="viewport" content="width=device-width, initial-scale=1">

Identification

<title> is present, descriptive, and unique per page
<meta name="description"> is present and specific to the page content
Description is under 155 characters

Visual identity

<link rel="icon" href="favicon.ico" type="image/x-icon"> present on all pages

Social metadata

og:title matches or is close to <title>
og:description is present
og:type is website for standard pages, article for blog posts

Exercise

Open each of the five Summit Trail Outfitters HTML files and apply the complete <head> from this lesson.

Update index.html, tours.html, about.html, blog-article.html, and contact.html.
Work through the metadata checklist for each page. Check each box as you confirm it.
Open each file in your browser. Verify:
- The browser tab shows the correct, unique page title
- The favicon area shows a broken icon (expected — no real file) or a default browser icon
Scan all five <title> elements. Confirm no two are identical.

When every page passes the checklist, the Summit Trail Outfitters site is professionally configured and ready for Module 10: Accessibility Foundations.

Module 09 Recap

<head> holds metadata — information about the document, not visible page content.
The three baseline elements for every page: <meta charset="UTF-8">, <meta name="viewport">, <title>.
lang="en" on <html> is required for accessibility and correct language classification.
Titles should be descriptive, unique per page, and under ~60 characters.
<meta name="description"> provides the search result excerpt. Keep it under ~155 characters.
Favicons are linked with <link rel="icon">. They appear in browser tabs, bookmarks, and history.
Open Graph tags (og:title, og:description, og:type) control social media link previews.
Consistency across pages matters. A professionally configured site has complete metadata on every page, not just the homepage.