Lesson 31 / Findability
SEO and Metadata
Use page titles, descriptions, headings, semantic HTML, readable URLs, image text, and social metadata to make pages easier to understand and share.
Course Role
Reference
Use this when a project needs the topic. It is useful, but it does not have to become a full class lecture.
Teacher Notes / In-Class Use
Demo Live
- Model the core workflow from the lesson using a small class example.
- Connect the example back to the first goal: Write useful page titles and meta descriptions
Try In Class
- Write a unique title and meta description for three pages using the patterns from this lesson.
- Have students make one visible change, save, refresh, and explain what changed.
Submit Or Check
- Ask students to show the work in the browser, not only in the editor.
- Have students commit their progress with a clear message when the checkpoint is stable.
Watch For
- Students copying code without checking file paths, spelling, or capitalization.
- Visual changes that work locally but break when the project is published.
Learning Goals
- Write useful page titles and meta descriptions
- Use headings, semantic HTML, links, URLs, and image text to support findability
- Add and explain basic Open Graph metadata for shared links
- Review a page with a practical SEO and metadata checklist
SEO Starts With Clarity
Search engine optimization is not about tricking people or stuffing keywords into a page. Good beginner SEO starts with clarity.
A clear page title, useful headings, readable content, descriptive links, optimized images, accessible structure, and fast loading all help people and search engines understand the site.
What Search Engines Need
Search engines try to understand what a page is about, how it is organized, and whether it seems useful to someone searching for that topic.
- A specific page title that names the topic.
- A short description that summarizes the page.
- Headings that organize the content clearly.
- Semantic HTML that identifies navigation, main content, sections, and footer content.
- Descriptive links that explain where they go.
- Images with useful file names and alt text when they add information.
- A page that loads quickly and works on mobile devices.
Title Pattern
The title appears in the browser tab, bookmarks, search results, and sometimes shared links. A useful pattern is Page Topic | Site Name.
| Weak Title | Better Title |
|---|---|
| Home | Home | Baton Rouge Coffee Guide |
| About | About | Garden Cafe |
| Projects | Portfolio Projects | Jordan Lee |
| Menu | Menu | Riverside Tacos |
<title>Menu | Garden Cafe</title>Meta Description Pattern
A meta description should summarize the page for a human. It does not need to list every keyword. A simple pattern is: what the page is, who it helps, and what someone can do there.
| Weak Description | Better Description |
|---|---|
| Welcome to my website. | Explore Jordan Lee portfolio projects in web design, branding, and interactive media. |
| This is our menu page. | View Garden Cafe breakfast, lunch, coffee, and pastry options before your visit. |
| Best coffee coffee shop coffee. | Compare quiet Baton Rouge coffee shops by seating, Wi-Fi, outlets, and hours. |
<meta
name="description"
content="Compare quiet coffee shops for studying in Baton Rouge by seating, Wi-Fi, outlets, and hours."
>Basic Metadata Example
<head>
<title>Local Coffee Guide | Baton Rouge Study Spots</title>
<meta
name="description"
content="Compare quiet coffee shops for studying in Baton Rouge by seating, Wi-Fi, outlets, and hours."
>
</head>Headings Help Structure
Headings should describe the structure of the page, not just make text bigger. Start with one clear h1, then use h2 and h3 headings to organize sections inside the page.
- Use one main h1 for the page topic.
- Use h2 headings for major sections.
- Use h3 headings for smaller groups inside an h2 section.
- Do not skip heading levels just for visual size.
- Use CSS to change how headings look instead of choosing a heading level for its default size.
Semantic HTML Supports SEO
Semantic HTML gives the page meaningful structure. It helps browsers, assistive technology, and search engines understand what each area of the page does.
- Use header for introductory site or page content.
- Use nav for major navigation links.
- Use main for the primary page content.
- Use section when a group of content has its own heading.
- Use article for self-contained content like a post, card, review, or project entry.
- Use footer for supporting information at the end of a page or section.
<header>
<nav aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
</nav>
</header>
<main>
<h1>Garden Cafe Menu</h1>
<section>
<h2>Coffee</h2>
<p>Espresso, drip coffee, cold brew, and seasonal drinks.</p>
</section>
</main>
<footer>
<p>© 2026 Garden Cafe</p>
</footer>Descriptive Links
Link text should make sense out of context. Avoid vague links like click here because they do not explain what the user will get.
| Weak Link Text | Better Link Text |
|---|---|
| Click here | View the full coffee shop list |
| Read more | Read more about our catering options |
| Here | Download the project brief |
| Website | Visit the Garden Cafe website |
Readable URLs And File Names
For simple static websites, clear file names help users and search engines understand the page before they even open it.
| Avoid | Use Instead |
|---|---|
| page2.html | menu.html |
| my page.html | my-page.html |
| finalFINAL.html | portfolio.html |
| IMG_2049.jpg | campus-study-lounge.jpg |
Image SEO Basics
Images help findability when they are named clearly, compressed well, and described accurately when they add information to the page.
- Use descriptive file names such as campus-study-lounge.jpg instead of IMG_2049.jpg.
- Write alt text for meaningful images.
- Use empty alt text, alt="", for decorative images that do not add information.
- Resize and compress images so the page loads quickly.
- Avoid placing important text only inside an image.
<img
src="images/campus-study-lounge.jpg"
alt="Students working at tables in a bright campus study lounge"
width="900"
height="600"
>Open Graph Metadata
Open Graph metadata controls how a link may appear when shared on social platforms, messaging apps, and preview cards. Platforms can choose how they display it, but these tags give them better information to use.
| Tag | Purpose |
|---|---|
| og:title | The title used in the shared preview. |
| og:description | The short summary used in the shared preview. |
| og:image | The preview image used when the link is shared. |
| og:url | The final public URL for the page. |
<meta property="og:title" content="Baton Rouge Study Spots">
<meta property="og:description" content="Find coffee shops and public spaces for focused study time.">
<meta property="og:image" content="https://example.com/images/study-spots.jpg">
<meta property="og:url" content="https://example.com/study-spots/">Findability Checklist
| Element | Good Practice |
|---|---|
| title | Specific to the page, not the same on every page. |
| meta description | Short human-readable summary of what the page offers. |
| h1 | One clear main heading that matches the page topic. |
| h2 and h3 | Organize the page into clear sections. |
| Semantic HTML | Use header, nav, main, section, article, and footer when they match the content. |
| URLs | Readable words instead of random file names. |
| Link text | Describes where the link goes. |
| Images | Optimized file size, descriptive file names, and meaningful alt text when informative. |
| Mobile and speed | The page works on phones and does not load unnecessary large files. |
Common Mistakes
- Using the same page title everywhere.
- Writing a meta description that is vague or stuffed with repeated keywords.
- Choosing headings only because of their default visual size.
- Publishing pages with vague file names like page2.html.
- Using link text like click here or read more without context.
- Forgetting alt text on informative images.
- Adding Open Graph tags but leaving the image URL broken.
- Thinking SEO is separate from accessibility, performance, content, and page structure.
Checkpoint
Before moving on, make sure these feel true.
- I can write a useful page title and meta description.
- I can use headings, URLs, and link text to support findability.
- I can add basic Open Graph metadata.
Practice
- Write a unique title and meta description for three pages using the patterns from this lesson.
- Improve one vague heading and one vague link on an existing page.
- Rename one vague image file and update its src path in the HTML.
- Add useful alt text to one informative image and empty alt text to one decorative image.
- Add Open Graph metadata to a portfolio or project page and check that the image URL is correct.
- Run the findability checklist on one finished page before submission.