Lesson 22 of 55 · HTML
SEO Fundamentals – Meta Tags and Title
Duration: 8 min
Search‑Engine Optimization Basics
<head>
<title>My Portfolio – Front‑End Developer</title>
<meta name='description' content='Showcase of projects, skills, and contact info for Jane Doe, a front‑end developer.' />
<meta name='keywords' content='portfolio, front‑end, developer, HTML, CSS, JavaScript' />
<link rel='canonical' href='https://example.com/' />
</head>
Why they matter
<title>– Appears in search‑engine results and browser tabs; keep under 60 characters to avoid truncation.meta description– Concise (≈155 characters) summary shown below the title in SERPs; influences click‑through rate.canonical– Prevents duplicate‑content penalties when the same page is reachable via multiple URLs.keywords– Historically used, but modern engines prioritize natural language; still useful for internal search.
SEO best practices
- Write human‑readable, hyphen‑separated URLs (
/projects/web-app). - Ensure each page has a unique title and description.
- Use structured data (see Lesson 46) for rich snippets.
- Keep the primary keyword near the start of the title and description.
Quick checklist for SEO meta tags
- Title present and under 60 characters? ✅
- Meta description under 155 characters? ✅
- Canonical URL defined? ✅
- URL slugs human‑readable and keyword‑rich? ✅
- Structured data added where relevant? ✅
Tip: Run a Lighthouse audit → SEO tab to verify that all meta tags are detected.