Code To Learn logo

Code To Learn

HTML FundamentalsM0 · Foundation Blueprint

Metadata & SEO Foundations

Configure core metadata that drives discoverability, social previews, and browser behavior.

Metadata & SEO Foundations

Learning Objectives

By the end of this lesson, you will:

  • Configure essential metadata, including description, robots, and canonical tags.
  • Define Open Graph and Twitter Card data for social platforms.
  • Prepare a favicon and app icon plan for Portfolio Pulse.
  • Record analytics and privacy considerations for later integration.

Project Context

Metadata is the handshake between your site and external systems. Search engines, social networks, and browsers read <head> before the body loads. Tight metadata improves discoverability, click-through rates, and brand consistency. Capturing decisions now prevents last-minute scramble before launch.

Essential Metadata

Required Tags

  • charset and viewport (already added)
  • description summarizing the page in 160 characters or fewer
  • robots to control indexing when staging
  • canonical to avoid duplicate content issues

Social Preview

Configure Open Graph (og:*) and Twitter Card tags to control how links preview in messaging and social platforms.

Icons and Manifest

Browsers expect favicons and Apple touch icons. Later modules cover manifests, but reserve the paths now.

Basic Example

<meta
   name="description"
   content="Avery Stone helps product teams design and ship measurable experiences."
/>
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://portfolio-pulse.example.com" />

Practical Example

<meta property="og:type" content="website" />
<meta property="og:title" content="Portfolio Pulse · Avery Stone" />
<meta
   property="og:description"
   content="Product designer and frontend engineer delivering measurable product outcomes."
/>
<meta property="og:url" content="https://portfolio-pulse.example.com" />
<meta
   property="og:image"
   content="https://portfolio-pulse.example.com/og-card.jpg"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@averystone" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

✅ Best Practices

1. Keep Descriptions Human-Readable

Why: Search engines display descriptions; compelling copy boosts click-through rates.

<meta
   name="description"
   content="Portfolio Pulse showcases product design work that grows revenue and improves customer journeys."
/>

2. Version-Control Assets Mentioned in Metadata

Why: Broken Open Graph images hurt credibility. Store preview images within the repo or a reliable CDN.

public/
├── og-card.jpg
├── favicon.ico
└── apple-touch-icon.png

❌ Common Mistakes

1. Forgetting to Update Staging Robots

Problem: Setting noindex in staging and forgetting to remove it for production.

<!-- Bad: shipped to production -->
<meta name="robots" content="noindex, nofollow" />

Solution:

<meta name="robots" content="index, follow" />

2. Using Relative URLs in Open Graph Tags

Problem: Social platforms require absolute URLs; relative paths break the preview.

<!-- Bad: relative URL -->
<meta property="og:image" content="/og-card.jpg" />

Solution:

<meta
   property="og:image"
   content="https://portfolio-pulse.example.com/og-card.jpg"
/>

🔨 Implement in Portfolio Pulse

Task: Populate Metadata

  1. Update the <head> section in index.html with the practical example tags.
  2. Add placeholder files (public/og-card.jpg, favicon.ico, apple-touch-icon.png) or document TODOs with expected dimensions in notes/orientation.md.
  3. Record analytics/privacy plans in docs/project-brief.md under a new "Measurement" section.
  4. Commit with git commit -am "chore: configure portfolio metadata".

Expected Result

Your site now presents consistent metadata across search results and social platforms, and you have a clear plan for assets.

✅ Validation Checklist

Functionality

  • Open Graph and Twitter tags use absolute URLs.
  • robots meta is set correctly for the current environment.

Code Quality

  • Metadata order is logical and grouped (basics, social, assets).
  • Placeholder assets or TODOs are documented.

Understanding

  • You can explain what each metadata group accomplishes.
  • You know when to toggle noindex (staging) vs index (production).

Project Integration

  • Measurement plans exist in the project brief.
  • Notes include asset dimensions and deadlines.

Navigation Patterns with Lists & Anchors

Build accessible navigation and learn how anchors support Portfolio Pulse's information architecture.

Accessibility-First HTML Mindset

Adopt inclusive defaults for landmarks, focus order, and assistive technology support.

On this page

Metadata & SEO FoundationsLearning ObjectivesProject ContextEssential MetadataRequired TagsSocial PreviewIcons and ManifestBasic ExamplePractical Example✅ Best Practices1. Keep Descriptions Human-Readable2. Version-Control Assets Mentioned in Metadata❌ Common Mistakes1. Forgetting to Update Staging Robots2. Using Relative URLs in Open Graph Tags🔨 Implement in Portfolio PulseTask: Populate MetadataExpected Result✅ Validation ChecklistFunctionalityCode QualityUnderstandingProject Integration