Technical SEO - SEO Tutorial | TechLead

Technical SEO Essentials

Technical SEO ensures search engines can effectively crawl, index, and render your website. It's the foundation that supports all other SEO efforts.

Site Architecture

// Ideal URL structure (flat hierarchy)
https://example.com/category/page-name

// Good examples:
/blog/seo-guide
/products/running-shoes
/docs/getting-started

// Avoid:
/page.php?id=123&cat=456
/blog/2024/01/15/my-article (too deep)
/folder1/folder2/folder3/folder4/page

Keep important pages within 3 clicks from homepage
Use descriptive, keyword-rich URLs
Implement breadcrumb navigation
Create a logical category structure

XML Sitemap

// next-sitemap.config.js
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  changefreq: 'weekly',
  priority: 0.7,
  exclude: ['/admin/*', '/private/*'],
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/server-sitemap.xml',
    ],
  },
};

// Generated sitemap.xml structure:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/page</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Robots.txt

# robots.txt example
User-agent: *
Allow: /
Disallow: /api/
Disallow: /admin/
Disallow: /_next/
Disallow: /private/

# Block specific bots
User-agent: GPTBot
Disallow: /

# Sitemap location
Sitemap: https://example.com/sitemap.xml

Canonical URLs

Prevent duplicate content issues by specifying the preferred URL version:

// Canonical tag in head
<link rel="canonical" href="https://example.com/page" />

// Next.js metadata
export const metadata = {
  alternates: {
    canonical: 'https://example.com/page',
  },
};

// Common duplicate URL scenarios to handle:
// example.com/page vs www.example.com/page
// example.com/page vs example.com/page/
// example.com/page vs example.com/page?ref=twitter

HTTPS & Security

SSL Certificate: Required for HTTPS, a ranking factor
HSTS Header: Force HTTPS connections
Mixed Content: Avoid loading HTTP resources on HTTPS pages
Security Headers: CSP, X-Frame-Options, etc.

// next.config.js security headers
async headers() {
  return [{
    source: '/:path*',
    headers: [
      { key: 'X-Content-Type-Options', value: 'nosniff' },
      { key: 'X-Frame-Options', value: 'DENY' },
      { key: 'Strict-Transport-Security',
        value: 'max-age=31536000; includeSubDomains' },
    ],
  }];
}