HTML SEO Basics
In this page:
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
<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
<title>Best Chocolate Cake Recipe - Easy & 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)
<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
<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
<head>
<link rel="canonical" href="https://example.com/recipe">
</head>- Using duplicate page titles and copy-pasted descriptions across different secondary index pages.
- Using multiple h1 tags on a single webpage, which dilutes the keyword importance of your title.
- Leaving out alt attributes on your image tags, rendering your images invisible to search engines.
- 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.
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: