On-Page SEO - SEO Tutorial | TechLead

On-Page SEO Fundamentals

On-page SEO refers to optimizing individual web pages to rank higher. It includes both the content visible to users and the HTML source code.

Title Tags

The most important on-page element. Appears in browser tabs and search results.

<!-- Best practices for title tags -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>

<!-- Examples -->
<title>Learn React Hooks - Complete Tutorial 2024 | TechLead</title>
<title>JavaScript Array Methods Guide - Map, Filter, Reduce</title>

<!-- Next.js metadata -->
export const metadata = {
  title: 'Learn React Hooks - Complete Tutorial',
  // Or use template
  title: {
    template: '%s | TechLead',
    default: 'TechLead - Learn Web Development',
  },
};

Keep under 60 characters
Put primary keyword near the beginning
Make each page title unique
Include brand name at the end

Meta Descriptions

Summarize page content. Displayed in search results below the title.

<meta name="description"
  content="Learn React Hooks with practical examples.
  Master useState, useEffect, useContext and custom hooks
  in this comprehensive guide for beginners.">

// Next.js
export const metadata = {
  description: 'Learn React Hooks with practical examples...',
};

Keep between 150-160 characters
Include a call-to-action
Incorporate target keywords naturally
Make it compelling to improve click-through rate

Heading Structure

<!-- Proper heading hierarchy -->
<h1>Main Page Title (only one per page)</h1>

<h2>Major Section 1</h2>
  <h3>Subsection 1.1</h3>
  <h3>Subsection 1.2</h3>

<h2>Major Section 2</h2>
  <h3>Subsection 2.1</h3>
    <h4>Detail 2.1.1</h4>

<!-- Don't skip levels -->
<!-- Bad: h1 → h3 (skipped h2) -->
<!-- Good: h1 → h2 → h3 -->

Content Optimization

Do:

Use keywords naturally in first 100 words
Include related terms (LSI keywords)
Write comprehensive content
Use short paragraphs and bullet points
Add images with alt text

Don't:

Keyword stuff unnaturally
Duplicate content from other pages
Hide text or use tiny fonts
Write thin content (<300 words)
Ignore user intent

Image Optimization

// Next.js Image component with SEO
import Image from 'next/image';

<Image
  src="/react-hooks-diagram.png"
  alt="React Hooks lifecycle diagram showing useState and useEffect flow"
  width={800}
  height={450}
  loading="lazy"
/>

// File naming: use-descriptive-names.jpg (not IMG_1234.jpg)