Technical SEO for Developers: How to Make SPAs and Websites Rank on Google

Great content doesn't rank if search engines can't discover, render and understand it. Content writers handle what to say; technical SEO — mostly a developer's job — makes sure Google can crawl the pages, read the right signals and serve them fast. This guide covers the essentials, with special attention to single-page applications built with React.

How search engines process a page

1. Crawl — Googlebot discovers URLs through links and sitemaps and downloads them.
2. Render — it executes JavaScript (in a headless Chromium) to see the final content, sometimes with a delay.
3. Index — it analyzes content and signals and stores the page.
4. Rank — it decides where to show the page for each query.

Every step can fail for technical reasons: blocked URLs, content only available after JavaScript, duplicate pages, slow servers.

1. Crawlability

robots.txt

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

robots.txt controls crawling, not indexing. To keep a page out of search results, use a noindex meta tag (and let it be crawled so Google can see it).

Internal links

Use real <a href> links. Buttons with onClick navigation or links that only exist after user interaction are invisible to crawlers. Every important page should be reachable within a few clicks from the home page — an articles index with links to every article helps a lot.

XML sitemap

List canonical URLs with last-modified dates, and for multilingual sites include hreflang alternates:

<url>
  <loc>https://example.com/en/articles/technical-seo-for-developers</loc>
  <lastmod>2026-08-10</lastmod>
  <xhtml:link rel="alternate" hreflang="fa" href="https://example.com/fa/articles/technical-seo-for-developers"/>
  <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/articles/technical-seo-for-developers"/>
</url>

Generate it dynamically from your database so new content appears automatically, and submit it in Google Search Console.

2. SPAs and rendering

A classic React SPA sends an almost empty HTML page and builds everything with JavaScript. Google can render JavaScript, but:

• rendering may be delayed and isn't guaranteed for every page;
• other crawlers and social networks (Telegram, LinkedIn, X previews) usually don't execute JavaScript;
• titles and meta tags set only by JavaScript may be missed by those bots.

Options, from most to least robust:

This website uses the third approach: ASP.NET Core serves the React app but, for each URL, injects the correct <title>, meta description, canonical, hreflang, Open Graph tags, JSON-LD and the article's text into the HTML. Crawlers get complete content immediately; users get the full interactive React experience.

3. Titles, descriptions and headings

<title>Technical SEO for Developers | Ali Mahmoodi</title>
<meta name="description" content="A developer's guide to technical SEO: crawling, rendering SPAs, canonical, hreflang, structured data and Core Web Vitals." />

• Unique title per page, ~50–60 characters, main topic first.
• Meta description ~120–160 characters. It doesn't directly affect ranking, but a good one increases click-through rate.
• One <h1> per page describing the main topic; <h2>/<h3> for sections in logical order.
• Descriptive URLs: /articles/technical-seo-for-developers beats /articles?id=48.

In React, update head tags on every route change (a small hook that sets document.title and meta tags, or a library like react-helmet-async).

4. Canonical URLs and duplicates

The same content often lives at several URLs: with and without trailing slash, with tracking parameters, http and https, www and non-www, or filters in query strings. Tell Google which URL is the main one:

<link rel="canonical" href="https://example.com/en/articles/technical-seo-for-developers" />

Also redirect (301) old or alternative URLs to the canonical version, and consider noindex for filtered or paginated variations that add no unique value.

5. Multilingual sites: hreflang

For pages available in several languages:

<link rel="alternate" hreflang="fa" href="https://example.com/fa/articles/seo" />
<link rel="alternate" hreflang="en" href="https://example.com/en/articles/seo" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/articles/seo" />

• Every language version needs its own URL (/fa/…, /en/…).
• Annotations must be reciprocal and include a self-reference.
• Don't force IP-based redirects on every URL — Googlebot crawls mostly from the US and must be able to reach the Persian pages.

6. Structured data (JSON-LD)

Structured data helps Google understand the page and can enable rich results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Technical SEO for Developers",
  "datePublished": "2026-08-10T00:00:00Z",
  "dateModified": "2026-08-10T00:00:00Z",
  "inLanguage": "en-US",
  "author": { "@type": "Person", "name": "Ali Mahmoodi" },
  "mainEntityOfPage": "https://example.com/en/articles/technical-seo-for-developers"
}
</script>

Useful types: Person and WebSite (home page), BlogPosting/Article, BreadcrumbList, FAQPage, Product, Organization. Validate with Google's Rich Results Test, and only describe content that's actually visible on the page.

7. Performance and Core Web Vitals

Page experience is a ranking signal, and speed directly affects bounce rate:

• LCP (Largest Contentful Paint) < 2.5 s — optimize hero images, server response time, critical CSS.
• INP (Interaction to Next Paint) < 200 ms — keep the main thread free; split long tasks.
• CLS (Cumulative Layout Shift) < 0.1 — reserve space for images, ads and fonts.

Practical wins: compress with Brotli/gzip, cache hashed static assets for a year, code-split heavy routes, lazy-load below-the-fold images, self-host fonts, and use a CDN.

8. Mobile and accessibility

Google indexes the mobile version of your site. Make sure content, structured data and links are the same on mobile, tap targets are large enough, and text is readable without zooming. Semantic HTML, alt text on images and a correct lang attribute help both accessibility and SEO.

9. HTTP status codes matter

• Real missing pages must return 404, not a "not found" page with status 200 ("soft 404").
• Moved content: 301 permanent redirect.
• Temporary maintenance: 503 with Retry-After.
• Avoid redirect chains (A → B → C).

In SPAs this needs server cooperation: the server should know which routes exist and return proper status codes.

Common mistakes

1. Every page sharing the same <title> and description.
2. Content only loaded after clicks or scrolls with no crawlable links.
3. noindex accidentally left in production after staging.
4. Blocking CSS/JS in robots.txt, so Google can't render the page.
5. Missing canonicals on parameterized URLs.
6. Huge JavaScript bundles delaying content.

Summary

Technical SEO means making pages crawlable (robots.txt, links, sitemaps), renderable (server-side metadata or full SSR for SPAs), understandable (titles, headings, canonical, hreflang, structured data) and fast (Core Web Vitals). Treat these as engineering requirements from day one, verify them in Google Search Console, and your content will have a fair chance to rank.

FAQ

Can Google index a React SPA?

Yes, usually — but rendering can be delayed and other crawlers may not run JavaScript. Server-side metadata or SSR makes indexing reliable.

Do meta keywords matter?

Google ignores the keywords meta tag for ranking. Focus on titles, content, headings and structured data.

How long until changes show up in Google?

From days to weeks. Request indexing in Search Console for important pages and keep your sitemap up to date.