Gaurav’s Notes

SEO

2 min read

🔹 What is SEO?

SEO stands for Search Engine Optimization — a set of techniques used to make your webpages rank higher in search engine results (Google, Bing, etc.).

The goal:
→ Drive organic (free) traffic to your site by appearing higher for relevant search queries.

🔹 How Search Engines Work (Simplified):

  1. Crawl: Bots visit your website and read its content

  2. Index: Pages are added to the search engine’s database

  3. Rank: Pages are scored and ordered based on how relevant and trustworthy they are for a given query

🔹 Key Components of SEO:

1. On-Page SEO

Applies to the page’s own content and structure.

  • title and meta description tags

  • Heading hierarchy (<h1>, <h2>, etc.)

  • URL structure (/blog/js-webcomponents vs /post?id=123)

  • Image alt tags

  • Content quality and keywords

  • Internal links

2. Technical SEO

Involves how your website is built and served.

  • Fast page load speed

  • Mobile responsiveness

  • Proper use of canonical URLs

  • Clean HTML structure

  • Sitemaps (/sitemap.xml)

  • Robots.txt configuration

  • Avoiding duplicate content

  • SEO-friendly routing (SSR/SSG preferred for SPAs)

3. Off-Page SEO

Things outside your site that affect ranking.

  • Backlinks from trusted domains

  • Social sharing signals

  • Brand mentions

🔹 Tools Used in SEO:

ToolUse
Google Search ConsoleTrack how your site appears in search
Google PageSpeed InsightsPerformance and core web vitals
Yoast SEO (WordPress)On-page SEO analysis
Ahrefs / SEMrushKeyword research and backlink analysis
Screaming FrogFull-site crawl analysis

🔹 SEO in Modern Frameworks (React, Next.js, etc.)

  • CSR (Client-Side Rendering) hurts SEO
    → Bots may not wait for JS to load your content

  • SSR (Server-Side Rendering) or SSG (Static Site Generation) helps SEO
    → Content is sent as raw HTML, ready to be indexed

Example: Next.js uses app/page.tsx with generateMetadata or next/head for SEO config.

🔹 SEO Checklist for Developers:

  • ✅ Use descriptive <title> and <meta name="description">

  • ✅ Serve fast, responsive pages (optimize Core Web Vitals)

  • ✅ Avoid duplicate content (use canonical tags)

  • ✅ Ensure all pages are crawlable (robots.txt, no 404s)

  • ✅ Add alt text to images

  • ✅ Structure content with semantic HTML

  • ✅ Prefer SSR/SSG for important pages

Graph View

Backlinks