Technical SEO: What Developers Need to Know

You build a beautiful website, but nobody visits. Why? Google can't read it. Technical SEO is the foundation that allows content to rank.

Rendering: Ensure Google Can See It

Client-Side Rendering (CSR)

JS loads -> Fetches Data -> Renders HTML. Googlebot is smart enough to run JS now, but it's slow and unreliable.

Server-Side Rendering (SSR) / Static (SSG)

HTML arrives fully populated. Preferred for SEO. Next.js or Remix makes this easy.

Core Web Vitals (The Ranking Factors)

Google measures UX with three metrics:

LCP (Largest Contentful Paint): Loading perf.
- Target: < 2.5s
- Fix: Optimize images (WebP), lazy load, use CDNs.
FID (First Input Delay) / INP: Interactivity.
- Target: < 200ms
- Fix: Reduce JS execution, break up long tasks.
CLS (Cumulative Layout Shift): Visual stability.
- Target: < 0.1
- Fix: Reserve space for images/ads (width/height attributes).

Essential HTML Tags

<head>
  <!-- The basics -->
  <title>Unique Keyphrase | Brand</title>
  <meta name="description" content="160 chars summary for search results">
  
  <!-- Canonical URL (prevents duplicate content issues) -->
  <link rel="canonical" href="https://example.com/page">
  
  <!-- Open Graph (for social media) -->
  <meta property="og:title" content="...">
  <meta property="og:image" content="...">
  
  <!-- Viewport (mobile friendly) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Structured Data (JSON-LD)

Help Google understand "This is a Recipe" or "This is a Job Posting".

/* Inside <head> */
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "Technical SEO Guide",
  "author": {
    "@type": "Person",
    "name": "TechGyanic"
  },
  "datePublished": "2024-01-01"
}
</script>

Use Google's Rich Results Test to validate.

Robots and Sitemaps

robots.txt: Who can enter?

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

sitemap.xml: Map of all your pages. Generate this dynamically in Next.js to ensure new pages are instantly discoverable.

Common Developer Mistakes

Using <div> or <button> for links
- Google follows <a href="...">. It doesn't click onClick.
Slow API responses
- If your TTFB (Time to First Byte) is > 1s, Google slows down crawling.
Broken Redirects
- Use 301 (Permanent) for moves. 302 (Temporary) doesn't pass "link juice."

SEO is a partnership between content (Marketing) and accessibility (Engineering). You own the accessibility part.