On-Page SEO

On-page SEO is everything you do on your own pages to help search engines understand and rank your content. It's the SEO you have the most control over.

Title Tags

The title tag is the single most important on-page SEO element. It appears in:

• Browser tabs
• Search engine results (the blue clickable link)
• Social media shares

Best Practices

<!-- Good -->
<title>Next.js Best Practices for Production Apps | Sabaoon.dev</title>

<!-- Bad — too generic -->
<title>Best Practices</title>

<!-- Bad — keyword stuffing -->
<title>Next.js Best Practices Next.js Tips Next.js Guide Next.js Tutorial</title>

Rules for title tags:

Title Formulas That Work

• How-to: "How to Deploy Next.js to Vercel in 5 Minutes"
• List: "10 React Performance Tips You Should Know"
• Guide: "The Complete Guide to TypeScript Generics"
• Year: "Best JavaScript Frameworks in 2026"
• Question: "What Is Server-Side Rendering and When Should You Use It?"

Meta Descriptions

The meta description is the snippet below your title in search results. Google doesn't use it for ranking, but it affects click-through rate.

<meta name="description" content="Learn how to deploy a Next.js application to Vercel with custom domains, environment variables, and preview deployments. Step-by-step guide with screenshots." />

Best Practices

• 150-160 characters — Google truncates longer descriptions
• Include your keyword — Google bolds matching terms in results
• Include a call to action — "Learn how", "Discover", "Find out"
• Describe the value — what will the reader get from this page?
• Unique per page — never duplicate descriptions

Headings (H1-H6)

Headings create structure for both users and search engines.

<h1>Next.js Best Practices</h1>           <!-- One per page -->
  <h2>Project Structure</h2>               <!-- Major sections -->
    <h3>Organizing Components</h3>          <!-- Subsections -->
    <h3>Route Groups</h3>
  <h2>Data Fetching</h2>
    <h3>Server Components</h3>
    <h3>Client Components</h3>

Rules:

• One H1 per page — it should include your primary keyword
• Logical hierarchy — don't skip levels (H1 → H3 without H2)
• Descriptive — headings should tell readers what the section covers
• Natural keywords — include related terms but don't force them

Content Optimization

Write for Humans First

Google's algorithm is sophisticated enough to understand natural language. Write content that's genuinely helpful, then make sure search engines can understand it.

Content Checklist

• Answer the search intent — give people what they came for
• Be comprehensive — cover the topic thoroughly, don't leave gaps
• Use your keyword naturally — in the first paragraph, headings, and throughout
• Break up text — short paragraphs, bullet points, tables, images
• Add unique value — say something the top 10 results don't
• Keep it updated — outdated content drops in rankings

Keyword Placement

Include your primary keyword in:

1. Title tag
2. H1 heading
3. First 100 words
4. At least one H2
5. Meta description
6. URL slug
7. Image alt text

Don't force it. If it reads awkwardly, rephrase. Google understands synonyms and related terms.

URL Structure

Clean URLs help users and search engines:

Good:  /blog/nextjs-best-practices
Bad:   /blog/post?id=847&cat=3
Bad:   /blog/2026/03/20/the-complete-and-ultimate-guide-to-nextjs-best-practices-for-production

Rules:

• Use hyphens, not underscores (best-practices not best_practices)
• Keep it short and descriptive
• Include your keyword
• Use lowercase only
• Avoid unnecessary words ("the", "and", "a")

Image Optimization

Images need SEO attention too.

Alt Text

Alt text describes the image for screen readers and search engines:

<!-- Good — descriptive -->
<img src="dashboard.png" alt="Analytics dashboard showing monthly traffic growth from 5k to 25k visitors" />

<!-- Bad — too vague -->
<img src="dashboard.png" alt="image" />

<!-- Bad — keyword stuffing -->
<img src="dashboard.png" alt="SEO analytics dashboard SEO traffic SEO growth" />

Image Best Practices

Internal Linking

Internal links connect your pages to each other. They:

• Help Google discover and understand your site structure
• Pass authority from strong pages to weaker ones
• Keep users on your site longer
• Create topic clusters that signal expertise

Best Practices

• Use descriptive anchor text — "read our Next.js deployment guide" not "click here"
• Link from high-authority pages — your homepage and popular posts should link to important content
• Link contextually — place links where they naturally fit in the content
• Don't overdo it — 3-5 internal links per 1000 words is a good baseline
• Fix broken links — 404 errors waste crawl budget and hurt user experience

Topic Clusters

Organize content around a pillar page with supporting content:

Pillar: "Complete Guide to Testing"
  ├── "Unit Testing with Jest"
  ├── "E2E Testing with Playwright"
  ├── "API Testing with Postman"
  ├── "Performance Testing"
  └── "CI/CD Testing Pipelines"

The pillar page links to all cluster pages, and each cluster page links back to the pillar. This signals to Google that your site has deep expertise on the topic.

Summary

• Title tags are the most important on-page element — keyword near the front, under 60 characters
• Meta descriptions don't affect ranking but drive click-through rate
• Use one H1 per page with a logical heading hierarchy
• Write comprehensive content for humans, then optimize for search engines
• Clean URLs with keywords, hyphens, and lowercase
• Add descriptive alt text to all images
• Internal links help Google discover pages and pass authority