Skip to main content
SEO Fundamentals·Lesson 4 of 5

Technical SEO

Technical SEO makes sure search engines can crawl, render, and index your site efficiently. Great content means nothing if Google can't access it.

Core Web Vitals

Core Web Vitals are Google's metrics for page experience. They directly affect rankings.

MetricWhat It MeasuresGoodNeeds WorkPoor
LCP (Largest Contentful Paint)Loading speed< 2.5s2.5-4.0s> 4.0s
INP (Interaction to Next Paint)Responsiveness< 200ms200-500ms> 500ms
CLS (Cumulative Layout Shift)Visual stability< 0.10.1-0.25> 0.25

Improving LCP

LCP measures how quickly the main content loads. Common fixes:

  • Optimize images — compress, use modern formats (WebP/AVIF), specify dimensions
  • Preload critical resources — fonts, hero images, above-the-fold CSS
  • Use a CDN — serve assets from servers close to users
  • Reduce server response time — optimize database queries, use caching
<!-- Preload your hero image -->
<link rel="preload" as="image" href="/hero.webp" />

<!-- Preload critical font -->
<link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin />

Improving INP

INP measures how quickly the page responds to user interactions:

  • Break up long tasks — use requestIdleCallback or setTimeout to yield
  • Reduce JavaScript — less JS = faster interactions
  • Defer non-critical JS — load analytics and chat widgets after the page is interactive

Improving CLS

CLS measures unexpected layout shifts. Prevent them by:

  • Set image dimensions — always include width and height
  • Reserve space for ads and embeds — use CSS aspect-ratio or min-height
  • Avoid inserting content above existing content — especially banners
<!-- Always specify dimensions -->
<img src="photo.webp" width="800" height="600" alt="..." />

Site Speed

Beyond Core Web Vitals, overall site speed matters:

OptimizationImpact
Enable compression (gzip/Brotli)60-80% smaller file transfers
Browser caching headersReturning visitors load instantly
Minimize CSS/JSSmaller files, faster parsing
Lazy load below-the-fold imagesFaster initial load
Use HTTP/2 or HTTP/3Parallel resource loading
Remove unused CSS/JSLess code to download and parse

Test your speed with:

  • PageSpeed Insights — Google's official tool
  • WebPageTest — detailed waterfall analysis
  • Lighthouse — built into Chrome DevTools

Structured Data

Structured data helps Google understand your content and can earn rich results (stars, FAQs, breadcrumbs) in search results.

JSON-LD Format

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Next.js Best Practices",
  "author": {
    "@type": "Person",
    "name": "Sabaoon"
  },
  "datePublished": "2026-03-20",
  "description": "A comprehensive guide to Next.js best practices."
}
</script>

Common Schema Types

TypeRich Result
Article / BlogPostingArticle details in search
BreadcrumbListBreadcrumb trail in results
FAQExpandable Q&A in results
HowToStep-by-step instructions
CourseCourse details with provider
ProductPrice, availability, reviews

Testing Structured Data

Use Google's Rich Results Test to validate your markup before publishing.

Canonical URLs

Canonical tags tell Google which version of a page is the original when the same content exists at multiple URLs.

<link rel="canonical" href="https://example.com/blog/my-post" />

Common scenarios:

ProblemSolution
http:// and https:// versionsCanonical to https://
www and non-www versionsCanonical to your preferred version
URL parameters (?sort=price)Canonical to the clean URL
Syndicated contentCanonical to the original source
Paginated contentEach page canonicals to itself

Mobile-First Indexing

Google indexes and ranks based on the mobile version of your site, not desktop.

Requirements

  • Responsive design — the same HTML serves all devices
  • Same content on mobile — don't hide content on mobile that exists on desktop
  • Readable without zooming — text at least 16px, tap targets at least 48px
  • No horizontal scrolling — everything fits within the viewport
  • Fast on mobile networks — optimize for 3G/4G speeds

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scal=1" />

This is required. Without it, mobile browsers render the page at desktop width and zoom out.

Sitemaps

Your XML sitemap lists all the pages Google should know about.

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

Guidelines:

  • Include all pages you want indexed
  • Exclude pages you don't (admin, API, duplicates)
  • Keep lastmod accurate — Google uses it to decide re-crawl priority
  • Submit in Google Search Console
  • Maximum 50,000 URLs per sitemap (use sitemap index for more)

robots.txt

Controls which URLs crawlers can access:

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /_next/static/

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

Important: Disallow prevents crawling, not indexing. A page can still appear in search results if other sites link to it. Use the noindex meta tag to prevent indexing.

<!-- Prevent indexing -->
<meta name="robots" content="noindex, nofollow" />

HTTPS

HTTPS is a confirmed ranking factor. Every site should use it.

  • Get a free SSL certificate from Let's Encrypt
  • Redirect all HTTP traffic to HTTPS
  • Update internal links to use HTTPS
  • Check for mixed content (HTTP resources on HTTPS pages)

Summary

  • Core Web Vitals (LCP, INP, CLS) directly affect rankings
  • Optimize images, reduce JavaScript, and use a CDN for speed
  • Add structured data for rich results in search
  • Use canonical tags to prevent duplicate content issues
  • Design mobile-first — Google indexes the mobile version
  • Submit an XML sitemap and configure robots.txt correctly
  • Always use HTTPS