Technical SEO for Developers — A Practical Guide

A ladder climbing up search engine rankings

Most SEO advice targets marketers. "Use the right keywords," "build backlinks," and so on. Not wrong, but it's vague from a developer's standpoint. What developers actually control is technical SEO — the code and infrastructure that let search engines properly understand and evaluate your site.

That's what this guide covers.

How Search Engines Read Your Site

Google goes through three stages before showing your page in search results:

Crawling — Googlebot visits your page and fetches the HTML
Indexing — The fetched HTML is analyzed and stored in the search database
Ranking — Pages are sorted by relevance for a given query

Developers can directly influence stages 1 and 2. Make it easy for crawlers to navigate your site, and make sure each page's content is parseable by search engines.

Meta Tags — The Absolute Basics

<head>
  <title>Page Title — Site Name</title>
  <meta name="description" content="120-155 character page description" />
  <link rel="canonical" href="https://example.com/page" />
  <meta name="robots" content="index, follow" />
</head>

title — The blue link in search results. Keep it around 60 characters. Put important keywords toward the front, but make it a natural sentence. Keyword stuffing like "Next.js | React | Framework | Web Dev" backfires.

description — The gray text below the title in search results. This directly affects click-through rate, so don't half-ass it. Write 120-155 characters explaining what value the user gets from the page.

canonical — Tells search engines "this is the original" when the same content is accessible via multiple URLs. Especially important when query parameters like ?sort=price create duplicate URLs. Skip it and search engines may treat your pages as duplicate content, tanking your rankings.

Open Graph & Twitter Cards

These control the preview that appears when someone shares your link on social media. They don't directly affect search rankings, but they influence traffic from shares, so they're worth getting right.

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />

OG image size should be 1200x630px. Miss this and shared links show no thumbnail or a broken image.

Sitemaps and robots.txt

sitemap.xml — A file listing all your pages for search engines.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-03-18</lastmod>
  </url>
  <url>
    <loc>https://example.com/blog/my-post</loc>
    <lastmod>2026-03-15</lastmod>
  </url>
</urlset>

In Next.js, create an app/sitemap.ts file to generate this automatically. Pull from your data source so you don't have to manually update it every time you publish a post.

robots.txt — Tells crawlers where they can and can't go, and where your sitemap lives.

User-agent: *
Allow: /
Disallow: /api/
Sitemap: https://example.com/sitemap.xml

Paths like /api/ don't belong in search results, so block them.

Structured Data (JSON-LD)

You've seen rich snippets in Google results — star ratings, FAQ accordions, recipe cards. Structured data makes those possible. You feed page information to search engines in JSON-LD format.

<script type="application/ld+json">
{JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "datePublished": "2026-03-18",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  }
})}
</script>

Adding structured data doesn't guarantee rich snippets, but it helps search engines understand your page more accurately. Use Article for blog posts, WebApplication for tool pages, FAQPage if you have FAQ content.

Core Web Vitals — Performance Is SEO

Google has included page performance as a ranking signal since 2021. Three metrics matter:

LCP (Largest Contentful Paint) — Time until the largest content element renders. Target: under 2.5 seconds. Usually the hero image or a large text block.

What you can do:

Set width and height on images (prevents layout shift)
Use Next.js <Image> component (automatic optimization, lazy loading)
Apply font-display: swap to web fonts

INP (Interaction to Next Paint) — Time from user interaction to the next visual update. Target: under 200ms. This replaced FID.

Break up long main-thread tasks
Offload heavy computation to Web Workers
Prevent unnecessary re-renders with React.memo and useMemo

CLS (Cumulative Layout Shift) — How much page elements jump around during load. Target: under 0.1. The classic case is text shifting when an ad or image loads late.

Specify dimensions on images and videos
Reserve space for dynamically inserted content
Optimize web font loading strategy

Check your scores with Lighthouse or PageSpeed Insights, then work through the issues.

Rendering Strategies and SEO

SSR (Server-Side Rendering) — HTML is generated on the server, so crawlers can read content immediately. Most SEO-friendly approach.

SSG (Static Site Generation) — HTML is pre-built at build time. Just as SEO-friendly as SSR, with zero server load. Perfect for blogs and documentation sites.

CSR (Client-Side Rendering) — Content is rendered by JavaScript in the browser. Googlebot can execute JavaScript, but it uses more crawl budget and indexing can be delayed. Avoid CSR for SEO-critical pages.

If you're using Next.js App Router, server components (SSR/SSG) are the default, so there's less to worry about. Just avoid putting critical content inside "use client" components.

Practical Checklist

Run through this for every new page:

<title> and <meta description> set?
Canonical URL specified?
OG tags + OG image configured?
alt text on all images?
Heading hierarchy correct (h1 → h2 → h3)?
Page included in sitemap?
Looks right on mobile?

Checking this manually every time isn't realistic, so build a metadata utility function that handles the defaults. Wrapping Next.js's generateMetadata with sensible defaults cuts down on missed items.

SEO isn't a one-time setup — it's ongoing monitoring. Make a habit of checking Google Search Console regularly for crawl errors, indexing status, and search performance. That habit ends up being the most important SEO work you can do.