← Back to HTML Course | Chapter 7: Advanced APIs & Features | Lesson 9 of 11

HTML SEO Basics

Imagine publishing a brilliant book, but instead of putting it on a bookstore shelf, you lock it in an unmarked cardboard box in your basement. Nobody would ever know it exists. Search Engine Optimization (SEO) is placing your book on the front display shelf. It is the art of structuring your HTML code so that search engine bots (like Google) can read, categorize, and rank your website easily. By writing clean, structured HTML, you make sure your site appears at the top of search listings when people search for your services.

In this page:

  1. Search Engine Optimization Basics
  2. Meta Titles and Descriptions
  3. Heading Hierarchies (h1 to h6)
  4. Alt Text and Crawler Contexts
  5. Canonical Links and Robots Rules
Syntax
markup 
<title>Page title</title>
<meta name="description" content="Page description">
<link rel="canonical" href="url">

Search Engine Optimization Basics

SEO is the practice of organizing your webpage markup to help search engine crawlers index your content. Writing clean, semantic, and well-structured code is the foundation of high page rankings.

Note: Structure your code cleanly to make it easy for search engine bots to read and index your content.
Warning: Avoid using black-hat tricks like hiding white text on white backgrounds, as search engines will penalize your rankings.

Example: Search Engine Optimization Basics

markup 
<article>
  <h1>How to Bake Bread</h1>
  <p>Clean, semantic content that crawlers can index.</p>
</article>

Meta Titles and Descriptions

Your title and meta description tags are the first things users see in search listings. Designing these tags with relevant keywords is essential for attracting visitors to your site.

Note: Keep your page titles under 60 characters, and descriptions under 160 characters to prevent them from getting truncated.
Warning: Never stuff your titles with repetitive lists of keywords, as search engines will flag this as spam.

Example: Meta Titles and Descriptions

markup 
<title>Best Chocolate Cake Recipe - Easy &amp; Quick</title>
<meta name="description" content="Learn to bake a moist chocolate cake in 30 minutes.">

Heading Hierarchies (h1 to h6)

Search engines use headings to establish a clear hierarchy of importance on your page. Organizing your content with headings helps bots index your pages accurately.

Note: Only use one h1 tag per page to represent the primary title of your document.
Warning: Never skip heading levels (like jumping from h1 directly to h3), as it breaks the outline structure.

Example: Heading Hierarchies (h1 to h6)

markup 
<h1>Main Topic</h1>
<h2>Subtopic</h2>
<h3>Detail</h3>

Alt Text and Crawler Contexts

Search engine crawlers are text-only bots that cannot see images. Providing descriptive alt text inside your image tags allows crawlers to index your images for image searches.

Note: Write clear, descriptive alt text that naturally incorporates relevant page keywords.
Warning: Do not write generic descriptions like image or graphic, as they provide zero context to crawlers.

Example: Alt Text and Crawler Contexts

markup 
<img src="cake.jpg" alt="Slice of chocolate cake with strawberries">

Canonical Links and Robots Rules

Using identical content across multiple URLs on your site can hurt your SEO rankings. The canonical link element tells search engines which URL is the master copy to index, preventing duplicate content penalties.

Note: Always specify a canonical link in your head section to protect your search engine page rankings.
Warning: Failing to declare canonical URLs can cause search bots to index duplicate pages, diluting your search rankings.

Example: Canonical Links and Robots Rules

markup 
<head>
  <link rel="canonical" href="https://example.com/recipe">
</head>
Live Example
Related Topics

HTML Accessibility · HTML Performance · HTML SSE · HTML Security

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using duplicate page titles and copy-pasted descriptions across different secondary index pages.
  2. Using multiple h1 tags on a single webpage, which dilutes the keyword importance of your title.
  3. Leaving out alt attributes on your image tags, rendering your images invisible to search engines.
Chapter Summary
  • SEO is organizing your HTML markup to help search engine crawlers index your content.
  • Write distinct, keyword-rich titles and descriptions kept under standard character limits.
  • Maintain a clear heading hierarchy from h1 to h6, and use canonical links to prevent duplicate indexing penalties.
Browser Support

Standard SEO meta tags and link structures are supported natively by all web crawlers and browsers.

🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson HTML Accessibility Next Lesson → HTML Performance

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.