SEO Basics
Help search engines discover, understand, and rank your pages with the right HTML meta tags and structure.
1. Introduction
SEO stands for Search Engine Optimisation. It is the practice of making your web pages discoverable by search engines like Google, Bing, and DuckDuckGo, and helping them appear higher in search results.
As a frontend developer, your job includes writing HTML that is SEO-friendly. The good news: if you write semantic, accessible HTML, you are already halfway there. SEO and accessibility share many best practices.
2. Theory
How Search Engines Work
- Crawling — Search engine bots follow links to find web pages
- Indexing — They store and organise the page content
- Ranking — When someone searches, they rank pages by relevance and quality
Essential Meta Tags for SEO
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title -- most important SEO element -->
<title>Learn HTML for Beginners — Free Step-by-Step Guide</title>
<!-- Meta description -- shown in search results -->
<meta name="description" content="Learn HTML from scratch with our free beginner guide. Step-by-step lessons with code examples, exercises, and interview questions.">
<!-- Tell search engines if to index this page -->
<meta name="robots" content="index, follow">
<!-- Canonical URL -- prevents duplicate content issues -->
<link rel="canonical" href="https://example.com/learn-html">
</head>Open Graph Tags (Social Sharing)
When someone shares your page on Facebook, LinkedIn, or Twitter, these tags control the preview:
<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Learn HTML for Beginners">
<meta property="og:description" content="Free step-by-step HTML guide with code examples.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/learn-html">
<meta property="og:type" content="article">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learn HTML for Beginners">
<meta name="twitter:description" content="Free step-by-step HTML guide.">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">Heading Hierarchy for SEO
Search engines use heading structure to understand your content's organisation:
- One
<h1>per page — the main topic <h2>–<h6>for subtopics in logical order- Include your main keyword in the
<h1>and<title>
Image Alt Text for SEO
Search engines cannot see images — they read alt text. Good alt text that describes the image naturally (not keyword-stuffed) helps Google understand what the image is about.
Structured Data (JSON-LD)
Structured data helps search engines display rich results (stars, FAQs, events, recipes in search):
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Learn HTML for Beginners",
"author": {
"@type": "Person",
"name": "Jane Smith"
},
"datePublished": "2024-03-15",
"description": "Free step-by-step HTML guide."
}
</script>Technical SEO Checklist
| Item | HTML Element | Impact |
|---|---|---|
| Page title | <title> | Very high — most important ranking factor |
| Meta description | <meta name="description"> | Affects click-through rate from results |
| H1 tag | <h1> | High — communicates main topic |
| Semantic structure | <article>, <section> | Medium — helps crawlers parse content |
| Alt text on images | alt="" | Medium — image search visibility |
| Canonical URL | <link rel="canonical"> | Prevents duplicate content penalties |
| Mobile viewport | <meta name="viewport"> | Required — Google uses mobile-first indexing |
| Page speed | Optimised images, lazy loading | High — Core Web Vitals ranking factor |
3. Real World Example
When you search "best chocolate chip cookie recipe", Google returns pages where: the <title> contains "chocolate chip cookie recipe", the <h1> is the recipe name, the content uses <article> and recipe structured data (which enables the star rating and image in results), and the page loads fast on mobile. Every SEO decision is reflected in the HTML.
4. Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Chocolate Chip Cookie Recipe — Ready in 30 Minutes</title>
<meta name="description" content="Make the best chewy chocolate chip cookies at home. Simple recipe with 7 ingredients, step-by-step instructions, tips for perfect results.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://recipes.example.com/chocolate-chip-cookies">
<!-- Open Graph -->
<meta property="og:title" content="Best Chocolate Chip Cookie Recipe">
<meta property="og:description" content="Chewy, golden, ready in 30 minutes.">
<meta property="og:image" content="https://recipes.example.com/images/cookies-og.jpg">
<meta property="og:url" content="https://recipes.example.com/chocolate-chip-cookies">
<meta property="og:type" content="article">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Best Chocolate Chip Cookies",
"image": "https://recipes.example.com/images/cookies.jpg",
"author": {"@type": "Person", "name": "Jane Baker"},
"totalTime": "PT30M",
"recipeYield": "24 cookies",
"aggregateRating": {"@type": "AggregateRating", "ratingValue": "4.9", "ratingCount": "482"}
}
</script>
</head>
<body>
<main>
<article>
<h1>Best Chocolate Chip Cookie Recipe</h1>
<p>Chewy, golden, and ready in just 30 minutes...</p>
<img
src="images/cookies.jpg"
alt="Golden brown chocolate chip cookies on a cooling rack"
width="800"
height="533">
<h2>Ingredients</h2>
<!-- ingredients list -->
<h2>Instructions</h2>
<!-- numbered steps -->
</article>
</main>
</body>
</html>5. Code Breakdown
| Element | SEO Purpose |
|---|---|
<title> | The blue clickable link in Google results. Include primary keyword near the start. 50–60 characters ideal. |
<meta name="description"> | The snippet below the title in results. Does not directly rank — but affects click-through rate. 150–160 characters ideal. |
<link rel="canonical"> | Tells Google the preferred URL if the same content exists on multiple URLs (prevents duplicate content) |
og:image | Controls the preview image when page is shared on social media. Recommended: 1200×630px |
| Recipe JSON-LD | Enables rich results in Google — star rating, image, cook time shown directly in search results |
<h1> containing keyword | Signals the main topic to Google. One per page, includes primary keyword naturally |
6. Common Mistakes
Every page needs a unique, descriptive title. Generic titles like "Home Page" or the same title on every page hurt rankings. Each page needs a unique title reflecting its specific content.
Cramming keywords into your title, description, or content unnaturally is penalised by Google. Write naturally for humans first — search engines are sophisticated enough to understand context.
Without a meta description, Google picks a random snippet from the page, which may not be compelling. Always write a clear, enticing description that includes your primary keyword.
7. Best Practices
8. Practice Exercise
Choose any page from your previous assignments. Add full SEO meta tags:
- A descriptive
<title>(50–60 chars, includes main keyword) - A compelling
<meta name="description">(150–160 chars) - Open Graph tags (og:title, og:description, og:image, og:url)
- A canonical link
- Check the heading hierarchy — is there exactly one
<h1>? - Test the Open Graph preview using the Facebook Sharing Debugger (or opengraph.xyz)
9. Assignment
Completely SEO-optimise your blog homepage from the Semantic HTML assignment. Add: optimised title and description, full Open Graph tags, a robots meta tag, a canonical URL, JSON-LD structured data for the blog (use @type: "Blog" or "WebPage"), and verify all images have descriptive alt text.
10. Interview Questions
Q1: What is SEO and why does it matter for frontend developers?
Answer: SEO (Search Engine Optimisation) is the practice of making web pages rank higher in search engine results. Frontend developers control many key SEO factors through HTML: page titles, meta descriptions, heading hierarchy, semantic structure, image alt text, page speed, and mobile responsiveness. A frontend developer who understands SEO writes code that ranks better and serves users and businesses better.
Q2: What is the purpose of the meta description?
Answer: The meta description is shown as the snippet of text below the page title in search results. It does not directly affect rankings, but it significantly impacts click-through rate — a compelling description convinces users to click your result over others. It should be 150–160 characters, include the primary keyword, and describe what value the page provides to the user.
Q3: What are Open Graph tags and when do you use them?
Answer: Open Graph tags are meta tags in the <head> that control how a page appears when shared on social media (Facebook, LinkedIn, etc.). They define the shared preview's title, description, and image. Without them, social platforms pick content arbitrarily — often poorly. Include them on any public-facing page you want to be shared.
Q4: What is structured data and what is it used for?
Answer: Structured data (typically JSON-LD format) is machine-readable information added to a page's <head> that describes its content in a standardised format (Schema.org). Google uses it to display rich results — recipe star ratings, event dates, product prices, FAQ dropdowns — directly in search results. It does not directly improve rankings but significantly improves visibility and click-through rate.