Techie BabajiLearn to Code. Build Real Skills.
SEO · Technical SEO

JavaScript SEO

Search engines can run JavaScript, but client-only rendering adds delay and risk. The safest approach is to send real HTML.

Intermediate 5 min Lesson 17 of 22
Before you start:How Search Engines WorkReact: Introduction to React
0/22 in SEO
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 29, 2026

Related tutorials

Interview questions

Learning objectives#

  • Compare CSR, SSR, SSG and prerendering
  • Set unique titles and meta per route
  • Use crawlable links and routes
  • Test what Google sees

Explanation#

Client-side rendering (CSR) ships an empty HTML shell; content appears after JavaScript runs. Rendering may be delayed and some crawlers do not run JS at all.

Server-side rendering (SSR), static generation (SSG) and build-time prerendering send complete HTML for each URL.

Each route needs its own URL, <title>, meta description, canonical and structured data — in the HTML response, not only after hydration.

Use real <a href> links (React Router’s <Link> renders them). Avoid content that appears only after clicks or scrolling.

Code example: Per-route metadata in React#

TSXpages/LessonPage.tsx Runnable
// React 19 hoists <title>, <meta> and <link> rendered anywhere into <head>.
export default function LessonPage({ lesson }: { lesson: Lesson }) {
  const url = `https://techiebabaji.com/tutorials/${lesson.id}`;
  return (
    <article>
      <title>{`${lesson.title} | Techie Babaji`}</title>
      <meta name="description" content={lesson.description} />
      <link rel="canonical" href={url} />
      <h1>{lesson.title}</h1>
      <p>{lesson.intro}</p>
    </article>
  );
}


// Build step: prerender every route to static HTML (this site does this for all pages),
// so crawlers receive full content without running JavaScript.
Expected output
View-source of each lesson URL shows its own title, description, canonical and full text.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. The route component outputs its own head tags.
  2. Prerendering turns each route into a full HTML file.
  3. Links are real anchors, so crawlers follow them.
  4. URL Inspection’s rendered HTML confirms it.

Real-world use case#

Techie Babaji prerenders every tutorial route at build time, so each lesson is fully crawlable and has unique metadata.

Common mistakes#

One title for the whole SPA

Every route looks the same to search engines.

Navigation with onClick on divs

Crawlers do not click. Use <a href>.

Best practices#

  • SSR, SSG or prerendering for content pages
  • Unique head tags per route
  • Real links and URLs
  • Check rendered HTML in Search Console

Remember this#

Send HTML, not an empty shell.

Unique title/meta/canonical per route.

<a href> links only.

Practice exercise#

Your task: How can you quickly check whether a page’s content is in the initial HTML?

Show solution
Shell Illustrative
curl -s https://techiebabaji.com/tutorials/react/usestate-hook | grep -i "<h1"

Mini quiz#

JavaScript SEO quizMultiple choice Question 1 of 1

Which approach gives crawlers full HTML without running JavaScript?

Score so far: 0/0

Want more? Practise all SEO MCQs · SEO interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.