└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 
  3 | # 📑 Ultimate SEO Guide for Vibe Coding
  4 | 
  5 | ### *Master React + TypeScript SEO with Production-Ready Code Examples*
  6 | 
  7 | [![Vibe Coding](https://img.shields.io/badge/Vibe-Coding-purple?style=for-the-badge&logo=react)](https://github.com/markfulton/VibeCodingSEO)
  8 | [![React](https://img.shields.io/badge/React-18+-61DAFB?style=for-the-badge&logo=react)](https://reactjs.org/)
  9 | [![TypeScript](https://img.shields.io/badge/TypeScript-5+-3178C6?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
 10 | [![SEO](https://img.shields.io/badge/SEO-Optimized-green?style=for-the-badge&logo=google)](https://developers.google.com/search)
 11 | 
 12 | ---
 13 | 
 14 | ### 📈 **Get Your Vibe Coded Apps Ranked/Indexed on Search Engines**
 15 | 
 16 | This comprehensive guide provides **practical, production-ready blueprints** for maximizing organic visibility in React + TypeScript applications. From SSR strategies to Core Web Vitals optimization, get **drop-in code patterns** you can implement today.
 17 | 
 18 | ### 💻 **Join the Vibe Coding Community**
 19 | 
 20 | <table>
 21 | <tr>
 22 | <td align="center">
 23 | <a href="https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41">
 24 | <img src="https://img.shields.io/badge/🎓_Join_Skool-Vibe_Coding_Courses-FF6B35?style=for-the-badge" alt="Join Vibe Coding Skool">
 25 | </a>
 26 | <br>
 27 | <sub><b>Premium Courses & Live Sessions</b></sub>
 28 | </td>
 29 | <td align="center">
 30 | <a href="https://www.facebook.com/groups/vibecodinglife">
 31 | <img src="https://img.shields.io/badge/👥_Facebook_Group-71K+_Members-1877F2?style=for-the-badge&logo=facebook" alt="Join Facebook Group">
 32 | </a>
 33 | <br>
 34 | <sub><b>Largest Vibe Coding Community</b></sub>
 35 | </td>
 36 | </tr>
 37 | </table>
 38 | 
 39 | **🎓 [Vibe Coding is Life Skool](https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41)** - Access exclusive courses, training sessions, live builds, and project downloads
 40 | 
 41 | **👥 [Facebook Community](https://www.facebook.com/groups/vibecodinglife)** - Connect with 71,000+ developers in the largest Vibe Coding group
 42 | 
 43 | </div>
 44 | 
 45 | ---
 46 | 
 47 | ## 📋 Table of Contents
 48 | 
 49 | - 🎯 [Core SEO Decisions That Move the Needle](#-core-seo-decisions-that-move-the-needle)
 50 | - 🏗️ [Making React Indexable](#️-making-react-indexable)
 51 | - 🔗 [URL Architecture & Routing](#-url-architecture--routing)
 52 | - 📊 [Route-Level Meta Management](#-route-level-meta-management)
 53 | - 🏷️ [Structured Data & JSON-LD](#️-structured-data--json-ld)
 54 | - 🤖 [Crawling, Indexing & Sitemaps](#-crawling-indexing--sitemaps)
 55 | - 📄 [Pagination & Infinite Scroll](#-pagination--infinite-scroll)
 56 | - ⚡ [Core Web Vitals Optimization](#-core-web-vitals-optimization)
 57 | - 🌍 [Internationalization](#-internationalization)
 58 | - 📱 [Social Sharing Previews](#-social-sharing-previews)
 59 | - 🚀 [Deployment & Headers](#-deployment--headers)
 60 | - 🔧 [CI/CD SEO Guardrails](#-cicd-seo-guardrails)
 61 | - 📝 [Quick Start Checklist](#-quick-start-checklist)
 62 | - ⚠️ [Common Pitfalls & Solutions](#️-common-pitfalls--solutions)
 63 | - 🏢 [CMS Integration Strategies](#-cms-integration-strategies)
 64 | - 🛠️ [Framework Recommendations](#️-framework-recommendations)
 65 | - 📚 [Additional Resources](#-additional-resources)
 66 | 
 67 | ---
 68 | 
 69 | ## 🎯 Core SEO Decisions That Move the Needle
 70 | 
 71 | > **React-specific decisions that maximize organic visibility**
 72 | 
 73 | ### 1. 🏗️ **Render Content as HTML**
 74 | - **Prefer SSR/SSG or pre-rendering** so bots and users see real HTML fast
 75 | - Google explicitly recommends SSR/static rendering over "dynamic rendering" user-agent workarounds
 76 | - If you must ship a pure SPA, ensure every indexable view has a **unique URL that returns HTML**
 77 | 
 78 | ### 2. 🔗 **Use Crawlable Links and Stable URLs**
 79 | - Google finds pages via `<a href="…">` — it **doesn't click buttons** to load more results
 80 | - Google **ignores `#` fragments** for unique content
 81 | - Use real `<a>` links and real URLs
 82 | 
 83 | ### 3. 📄 **Canonicalization, Pagination & Parameters**
 84 | - Set the canonical for each page (absolute URL)
 85 | - Don't force every paginated URL to canonicalize to page 1
 86 | - For sorted/filtered variants, either prevent indexing or keep them crawl-eligible but non-indexable
 87 | 
 88 | ### 4. 🏷️ **Structured Data (JSON-LD)**
 89 | - Use JSON-LD and follow Google's structured-data guidelines
 90 | - Support Organization/LocalBusiness, Product/Service, FAQ, Breadcrumbs
 91 | - If you generate it with JS, that's supported—just test with Rich Results
 92 | 
 93 | ### 5. ⚡ **Core Web Vitals Are Ranking-Relevant**
 94 | - As of **March 12, 2024, INP replaced FID** as a Core Web Vital
 95 | - Monitor **LCP, CLS, INP** and optimize images, fonts, JS, and caching
 96 | 
 97 | ### 6. 🤖 **Crawl Controls & Sitemaps**
 98 | - Use **meta robots / X-Robots-Tag** to control indexing
 99 | - **robots.txt cannot "noindex"** a page
100 | - Keep **JS/CSS unblocked**
101 | - Supply an XML sitemap (50k URLs / 50 MB max per file)
102 | 
103 | ---
104 | 
105 | ## 🏗️ Making React Indexable
106 | 
107 | ### A. 🌟 **Best-Case: SSR/SSG (React 18 Streaming)**
108 | 
109 | If your platform allows Node on the edge/origin, React 18's `renderToPipeableStream` reduces time-to-HTML and improves LCP. Combine with route-level meta and HTTP caching.
110 | 
111 | ### B. 📱 **Pure SPA (Vite + React Router) with Pre-render**
112 | 
113 | If SSR is truly impossible, **pre-render** public routes at build time:
114 | 
115 | - ✅ Each page has a **static HTML shell** (title/description/LD+JSON)
116 | - ✅ Navigation uses real `<a href>` links (no button-driven routing)
117 | 
118 | ---
119 | 
120 | ## 🔗 URL Architecture & Routing
121 | 
122 | ### 🎯 **Essential Rules**
123 | 
124 | - ❌ **No hash routing** — bots ignore `#` for uniqueness. Use History API URLs
125 | - ✅ Every indexable view must have a **unique, shareable URL**
126 | - ✅ Choose one hostname (e.g., `https://www.example.com`), enforce **HTTPS + 301s**
127 | - ✅ Normalize trailing slashes/case; produce a single canonical per page
128 | - ✅ **Use absolute canonicals**
129 | 
130 | ---
131 | 
132 | ## 📊 Route-Level Meta Management
133 | 
134 | ### 🛠️ **Robust React + TypeScript Pattern**
135 | 
136 | Use **React Router v6 "data routers"** with a `handle.seo` contract and **react-helmet-async** to generate unique metadata per route.
137 | 
138 | ```tsx
139 | // src/seo/SEO.tsx
140 | import { Helmet } from 'react-helmet-async';
141 | 
142 | export type SEOConfig = {
143 |   title?: string;
144 |   description?: string;
145 |   canonical?: string;           // absolute or site-relative
146 |   robots?: string;              // e.g., "index,follow" or "noindex"
147 |   og?: { type?: string; image?: string | null };
148 |   twitter?: { card?: 'summary' | 'summary_large_image'; site?: string; creator?: string };
149 |   schema?: Record<string, unknown> | Record<string, unknown>[];
150 | };
151 | 
152 | const SITE_URL = 'https://www.example.com';
153 | 
154 | export function SEO(cfg: SEOConfig) {
155 |   const {
156 |     title, description, robots = 'index,follow', og = {}, twitter = {}, schema
157 |   } = cfg;
158 |   const canonicalUrl =
159 |     cfg.canonical?.startsWith('http')
160 |       ? cfg.canonical
161 |       : `${SITE_URL}${cfg.canonical || (typeof window !== 'undefined' ? window.location.pathname : '/')}`;
162 | 
163 |   return (
164 |     <Helmet prioritizeSeoTags>
165 |       {title && <title>{title}</title>}
166 |       {description && <meta name="description" content={description} />}
167 |       <link rel="canonical" href={canonicalUrl} />
168 |       <meta name="robots" content={robots} />
169 | 
170 |       {/* Open Graph / Twitter */}
171 |       <meta property="og:type" content={og.type ?? 'website'} />
172 |       <meta property="og:url" content={canonicalUrl} />
173 |       {title && <meta property="og:title" content={title} />}
174 |       {description && <meta property="og:description" content={description} />}
175 |       {og.image && <meta property="og:image" content={og.image} />}
176 |       <meta name="twitter:card" content={twitter.card ?? 'summary_large_image'} />
177 |       {twitter.site && <meta name="twitter:site" content={twitter.site} />}
178 |       {twitter.creator && <meta name="twitter:creator" content={twitter.creator} />}
179 | 
180 |       {/* JSON-LD */}
181 |       {schema && (Array.isArray(schema) ? schema : [schema]).map((obj, i) => (
182 |         <script key={i} type="application/ld+json"
183 |                 dangerouslySetInnerHTML={{ __html: JSON.stringify(obj) }} />
184 |       ))}
185 |     </Helmet>
186 |   );
187 | }
188 | ```
189 | 
190 | ### 🔧 **Router Configuration Example**
191 | 
192 | ```tsx
193 | // src/routes.tsx (React Router v6 data router)
194 | import { createBrowserRouter, useMatches, Outlet } from 'react-router-dom';
195 | import type { SEOConfig } from './seo/SEO';
196 | import { SEO } from './seo/SEO';
197 | 
198 | type SEOHandle = { seo: SEOConfig | ((data: any) => SEOConfig) };
199 | 
200 | function RootLayout() {
201 |   const matches = useMatches() as Array<{ handle?: SEOHandle; data?: unknown }>;
202 |   const last = matches.at(-1);
203 |   const cfg = typeof last?.handle?.seo === 'function'
204 |     ? last?.handle?.seo(last?.data)
205 |     : last?.handle?.seo;
206 | 
207 |   return (
208 |     <>
209 |       {cfg && <SEO {...cfg} />}
210 |       <Outlet />
211 |     </>
212 |   );
213 | }
214 | 
215 | // Example page-specific configs
216 | export const router = createBrowserRouter([
217 |   {
218 |     path: '/',
219 |     element: <RootLayout />,
220 |     children: [
221 |       {
222 |         index: true,
223 |         element: <HomePage />,
224 |         handle: { 
225 |           seo: { 
226 |             title: 'Acme Co. — Enterprise Widgets', 
227 |             description: 'High-reliability widgets.', 
228 |             canonical: '/' 
229 |           } 
230 |         }
231 |       },
232 |       {
233 |         path: '/services',
234 |         element: <ServicesPage />,
235 |         handle: { 
236 |           seo: { 
237 |             title: 'Services | Acme Co.', 
238 |             description: 'Advisory & implementation.', 
239 |             canonical: '/services' 
240 |           } 
241 |         }
242 |       },
243 |       {
244 |         path: '/products/:slug',
245 |         loader: productLoader,
246 |         element: <ProductPage />,
247 |         handle: {
248 |           seo: (data: Awaited<ReturnType<typeof productLoader>>) => ({
249 |             title: `${data.product.name} | Acme Co.`,
250 |             description: data.product.seoDescription,
251 |             canonical: `/products/${data.product.slug}`,
252 |             og: { type: 'product', image: data.product.ogImage ?? null },
253 |             schema: productJsonLd(data.product)
254 |           })
255 |         }
256 |       }
257 |     ]
258 |   }
259 | ]);
260 | ```
261 | 
262 | > 💡 **Why react-helmet-async?** It's the maintained, SSR-safe way to manage `<head>` in React apps. [GitHub Repository](https://github.com/staylor/react-helmet-async)
263 | 
264 | ---
265 | 
266 | ## 🏷️ Structured Data & JSON-LD
267 | 
268 | ### 🎯 **Typed, Reusable JSON-LD Helpers**
269 | 
270 | Use TypeScript helpers so each page can attach the right schema object(s). Validate with the Rich Results Test.
271 | 
272 | ```ts
273 | // src/seo/schema.ts
274 | export type Thing = Record<string, unknown>;
275 | 
276 | export const orgJsonLd = (name: string, url: string, logo: string): Thing => ({
277 |   '@context': 'https://schema.org',
278 |   '@type': 'Organization',
279 |   name, url, logo
280 | });
281 | 
282 | export const localBusinessJsonLd = (opts: {
283 |   name: string; url: string; phone?: string;
284 |   address: { 
285 |     streetAddress: string; 
286 |     addressLocality: string; 
287 |     addressRegion: string; 
288 |     postalCode: string; 
289 |     addressCountry: string 
290 |   };
291 | }): Thing => ({
292 |   '@context': 'https://schema.org',
293 |   '@type': 'LocalBusiness',
294 |   ...opts
295 | });
296 | 
297 | export const breadcrumbJsonLd = (items: Array<{ name: string; url: string }>): Thing => ({
298 |   '@context': 'https://schema.org',
299 |   '@type': 'BreadcrumbList',
300 |   itemListElement: items.map((it, i) => ({
301 |     '@type': 'ListItem', 
302 |     position: i + 1, 
303 |     name: it.name, 
304 |     item: it.url
305 |   }))
306 | });
307 | 
308 | export const productJsonLd = (p: {
309 |   name: string; description: string; url: string; image: string;
310 |   sku?: string; brand?: string;
311 |   offers?: { price: number; priceCurrency: string; availability: string; url: string };
312 | }): Thing => ({
313 |   '@context': 'https://schema.org',
314 |   '@type': 'Product',
315 |   ...p
316 | });
317 | ```
318 | 
319 | > 🏢 **Local businesses** should also consider the LocalBusiness guide (hours, phone, geo). If you generate JSON-LD with JavaScript, that's supported—just test it.
320 | 
321 | ---
322 | 
323 | ## 🤖 Crawling, Indexing & Sitemaps
324 | 
325 | ### 🎛️ **The Right Levers**
326 | 
327 | - ✅ **Use robots meta or X-Robots-Tag** to control indexing (`noindex`, `max-image-preview`, etc.)
328 | - ❌ Do **not** try to "noindex" in robots.txt; that's unsupported
329 | - ✅ Keep **JS/CSS accessible** — don't block them in robots.txt
330 | - ✅ **Sitemaps**: one file ≤ 50,000 URLs or 50 MB (uncompressed)
331 | 
332 | ### 📄 **Example robots.txt**
333 | 
334 | ```txt
335 | User-agent: *
336 | Allow: /
337 | 
338 | # Keep assets crawlable (don't disallow CSS/JS)
339 | # Disallow private or thin areas
340 | Disallow: /admin/
341 | Disallow: /cart
342 | Disallow: /checkout
343 | Disallow: /*?*sort=
344 | Disallow: /*?*filter=
345 | 
346 | Sitemap: https://www.example.com/sitemap.xml
347 | ```
348 | 
349 | ### 🗺️ **TypeScript Sitemap Generator**
350 | 
351 | ```ts
352 | // scripts/generate-sitemap.ts
353 | import { createWriteStream } from 'node:fs';
354 | import { SitemapStream, streamToPromise } from 'sitemap';
355 | import fetch from 'node-fetch';
356 | 
357 | const HOST = 'https://www.example.com';
358 | 
359 | async function main() {
360 |   const sm = new SitemapStream({ hostname: HOST });
361 |   sm.pipe(createWriteStream('public/sitemap.xml'));
362 | 
363 |   // Static pages
364 |   ['/', '/about', '/services', '/contact'].forEach(url =>
365 |     sm.write({ url, changefreq: 'monthly', priority: 0.7 })
366 |   );
367 | 
368 |   // Dynamic (e.g., from CMS/API)
369 |   const products = await fetch(`${HOST}/api/public/products`).then(r => r.json());
370 |   products.forEach((p: any) => 
371 |     sm.write({ url: `/products/${p.slug}`, lastmod: p.updatedAt })
372 |   );
373 | 
374 |   sm.end();
375 |   await streamToPromise(sm);
376 |   console.log('sitemap.xml written');
377 | }
378 | 
379 | main().catch(err => { console.error(err); process.exit(1); });
380 | ```
381 | 
382 | > ⚠️ **Status codes matter**: Unknown routes must return **404**, retired pages can be **410**, and avoid "soft-404s" (HTML saying "not found" with HTTP 200).
383 | 
384 | ---
385 | 
386 | ## 📄 Pagination & Infinite Scroll
387 | 
388 | ### 🔗 **What Google Expects**
389 | 
390 | - ✅ Use real links (`<a href="?page=2">Next</a>`) so crawlers can discover subsequent pages
391 | - ✅ Give each page a **unique URL** (e.g., `?page=n`) and **its own canonical**
392 | - ❌ Don't canonical all pages to page 1
393 | - ℹ️ Google no longer uses `rel="prev/next"` for indexing—focus on links, canonicals, and sitemaps
394 | 
395 | ---
396 | 
397 | ## ⚡ Core Web Vitals Optimization
398 | 
399 | ### 🎯 **What Changed: INP Replaced FID (March 12, 2024)**
400 | 
401 | Target passing performance at the 75th percentile for **LCP, CLS, INP**.
402 | 
403 | ### 🖼️ **Images (Often Your Biggest LCP Lever)**
404 | 
405 | ```html
406 | <!-- In <head> -->
407 | <link rel="preload" as="image" href="/images/hero.avif"
408 |       imagesrcset="/images/hero.avif 1x, /images/hero@2x.avif 2x" 
409 |       imagesizes="100vw">
410 | 
411 | <!-- In body -->
412 | <img src="/images/hero.avif" alt="Acme industrial widgets"
413 |      width="1280" height="720" 
414 |      fetchpriority="high" 
415 |      decoding="async">
416 | ```
417 | 
418 | **Best Practices:**
419 | - ✅ Serve responsive sources via `srcset`/`sizes`
420 | - ✅ Prefer **AVIF / WebP** fallbacks
421 | - ✅ **Preload the hero image** and/or use `fetchpriority="high"`
422 | - ✅ Lazy-load **below-the-fold** images (`loading="lazy"`)
423 | - ❌ **Not** the LCP image
424 | 
425 | ### 🔤 **Fonts**
426 | 
427 | ```html
428 | <link rel="preload" href="/fonts/Inter-var.woff2" as="font" type="font/woff2" crossorigin>
429 | <style>
430 |   @font-face {
431 |     font-family: 'InterVar';
432 |     src: url('/fonts/Inter-var.woff2') format('woff2');
433 |     font-weight: 100 900; 
434 |     font-display: optional;
435 |   }
436 |   body { 
437 |     font-family: 'InterVar', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
438 |   }
439 | </style>
440 | ```
441 | 
442 | **Best Practices:**
443 | - ✅ Self-host WOFF2, subset fonts
444 | - ✅ Use `font-display: optional` + `<link rel="preload" as="font">`
445 | - ✅ Avoid FOIT/FOUT and CLS
446 | 
447 | ### 📊 **Measure in the Field (RUM)**
448 | 
449 | ```ts
450 | // src/metrics/web-vitals.ts
451 | import { onLCP, onCLS, onINP, type Metric } from 'web-vitals';
452 | 
453 | const send = (m: Metric) =>
454 |   navigator.sendBeacon('/vitals', JSON.stringify({ 
455 |     name: m.name, 
456 |     value: m.value, 
457 |     id: m.id, 
458 |     path: location.pathname 
459 |   }));
460 | 
461 | onLCP(send); 
462 | onCLS(send); 
463 | onINP(send);
464 | ```
465 | 
466 | > 📈 **Google recommends** collecting Web Vitals in the field; the `web-vitals` library is the easiest way to do that.
467 | 
468 | ---
469 | 
470 | ## 🌍 Internationalization
471 | 
472 | ### 🗺️ **Multi-Language Setup**
473 | 
474 | - ✅ Use **separate URLs per language/region** (e.g., `/en/`, `/fr/`)
475 | - ✅ Add **`hreflang`** cross-links between alternates
476 | - ✅ Include a **self-reference** on each page
477 | - ❌ Don't rely on `lang` alone
478 | 
479 | ---
480 | 
481 | ## 📱 Social Sharing Previews
482 | 
483 | ### 🎨 **Open Graph & Twitter Cards**
484 | 
485 | Add page-specific `og:title`, `og:description`, `og:image` for high CTR, and Twitter card meta. Use the Open Graph protocol as the baseline. (The `SEO` component above handles this.)
486 | 
487 | ---
488 | 
489 | ## 🚀 Deployment & Headers
490 | 
491 | ### 🔧 **Clean Signals**
492 | 
493 | - **Redirects**: Permanent site-wide 301 from non-canonical host to canonical, HTTP→HTTPS, trailing slash policy
494 | - **Caching**: 
495 |   - Hashed static assets → `Cache-Control: public, max-age=31536000, immutable`
496 |   - HTML → `no-store` or `max-age=0, must-revalidate`
497 | - **Security**: HSTS (helps consistency on HTTPS)
498 | - **Favicons & Site Names**: Follow Google's favicon and site-name guidelines
499 | 
500 | ---
501 | 
502 | ## 🔧 CI/CD SEO Guardrails
503 | 
504 | ### 🛡️ **Prevent SEO Regression**
505 | 
506 | - ✅ **Lighthouse CI** budget in CI (fail builds if LCP/CLS/INP regress)
507 | - ✅ **ESLint** with `jsx-a11y` plugin (accessibility helps semantics)
508 | - ✅ **Link checker** (broken internal links)
509 | - ✅ **Tests** that read route configs and assert each public page has title/description/canonical and JSON-LD
510 | 
511 | ---
512 | 
513 | ## 📝 Quick Start Checklist
514 | 
515 | ### 🚀 **Day 1 Implementation**
516 | 
517 | - [ ] Pick rendering path: SSR/SSG if possible; otherwise pre-render public routes
518 | - [ ] Implement the `SEO` component + `handle.seo` per route
519 | - [ ] Add Organization (and LocalBusiness/Product/etc.) JSON-LD to relevant pages
520 | - [ ] Ship `sitemap.xml`, `robots.txt` (with sitemap directive), and correct status codes/404s
521 | - [ ] Optimize LCP (hero image preload), fonts, and reduce JS
522 | - [ ] Start collecting Web Vitals with `web-vitals`
523 | - [ ] If multilingual, wire `hreflang`
524 | 
525 | ---
526 | 
527 | ## ⚠️ Common Pitfalls & Solutions
528 | 
529 | ### 🚨 **Avoid These Mistakes**
530 | 
531 | - ❌ **SPA 404s returning HTTP 200** due to "catch-all" rewrites
532 |   - ✅ Configure your host to serve real `404.html` with status 404
533 | 
534 | - ❌ **Faceted URLs exploding crawl**
535 |   - ✅ Keep pages crawlable for users but **noindex** values you don't want in the index
536 | 
537 | - ❌ **Dynamic rendering** for bots only
538 |   - ✅ Use SSR/SSG or pre-render for everyone instead
539 | 
540 | ---
541 | 
542 | ## 🏢 CMS Integration Strategies
543 | 
544 | ### A. 🎯 **WordPress (Root) + React App (Subdomain)**
545 | 
546 | **What:** Keep all public, indexable content on WordPress at `example.com`. Put the authenticated product at `app.example.com`.
547 | 
548 | **Why it works for SEO:**
549 | - WordPress gives non-devs fast publishing + mature SEO plugins
550 | - Google treats **subdomains as valid site partitions**
551 | - You can **noindex** app/login/etc. using `meta robots` or `X-Robots-Tag` header
552 | 
553 | ### B. 🔄 **Same Domain, Different Origins: Reverse Proxy**
554 | 
555 | **What:** Keep marketing at `example.com` and mount the React app at `example.com/app` via **reverse proxy/rewrites**.
556 | 
557 | **Why:** Preserves one hostname and **consolidates signals** under the root.
558 | 
559 | ### C. 🎭 **Headless WordPress + React Front End**
560 | 
561 | **What:** WordPress only for content editing/API; public site is built with a React framework that **pre-renders** pages.
562 | 
563 | **Benefits:** HTML is ready on first byte (great for crawl & Core Web Vitals) + you retain WordPress editorial workflow.
564 | 
565 | ---
566 | 
567 | ## 🛠️ Framework Recommendations
568 | 
569 | ### 🏆 **SEO-Forward React Frameworks**
570 | 
571 | | Framework | Why it's Strong for SEO | Signature Features |
572 | |-----------|------------------------|-------------------|
573 | | **Next.js (App Router)** | SSR/SSG by default, Server Components + streaming ship HTML early | `generateMetadata`, file-based robots/sitemap, ISR |
574 | | **React Router v7** | SSR + pre-rendering for static URLs, progressive enhancement | Route-level `<Meta/>` + prerender config |
575 | | **TanStack Start** | Full-document SSR, streaming, Selective SSR per route | Per-route `ssr` controls, streaming SSR |
576 | | **Astro (with React)** | Islands architecture → static HTML by default, hydrate only interactive components | React integration, islands (`client:*` directives) |
577 | | **Gatsby** | Mature SSG with DSG + optional SSR, huge source plugin ecosystem | DSG/SSR rendering options, CMS integrations |
578 | 
579 | ### 🎯 **Choosing the Right Path**
580 | 
581 | - **Strong editorial + blogs/docs?** → **Astro** or **Headless WP + Next/Gatsby**
582 | - **One React codebase for everything?** → **Next.js App Router**
583 | - **Prefer edge runtime + progressive enhancement?** → **React Router (v7)** or **Next on Edge**
584 | - **Want to dial SSR per route?** → **TanStack Start**
585 | - **E-commerce on Shopify?** → **Hydrogen**
586 | 
587 | ---
588 | 
589 | ## 📚 Additional Resources
590 | 
591 | ### 🔗 **Key Google Documentation**
592 | 
593 | - [JavaScript SEO Basics](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics) - Google's official JS SEO guidance
594 | - [Dynamic Rendering as a Workaround](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering) - Why to prefer SSR/static
595 | - [Pagination Best Practices](https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading) - Crawlable links, unique URLs
596 | - [Robots Meta Tag](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag) - Control indexing properly
597 | - [Sitemaps Guide](https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap) - Build and submit sitemaps
598 | 
599 | ### 🚀 **Performance Resources**
600 | 
601 | - [INP Became a Core Web Vital](https://web.dev/blog/inp-cwv-march-12) - March 12, 2024 update
602 | - [Optimize LCP](https://web.dev/articles/optimize-lcp) - Preload critical images
603 | - [Optimize Web Fonts](https://web.dev/learn/performance/optimize-web-fonts) - Preload + font-display: optional
604 | - [Measure Web Vitals](https://web.dev/articles/vitals-field-measurement-best-practices) - Field measurement best practices
605 | 
606 | ### 🏗️ **Technical Implementation**
607 | 
608 | - [Open Graph Protocol](https://ogp.me/) - Social preview reference
609 | - [Structured Data Guidelines](https://developers.google.com/search/docs/appearance/structured-data/sd-policies) - JSON-LD best practices
610 | - [React Helmet Async](https://github.com/staylor/react-helmet-async) - SSR-safe head management
611 | 
612 | ---
613 | 
614 | <div align="center">
615 | 
616 | ### 🌟 **Ready to Level Up Your Vibe Coding Skills?**
617 | 
618 | Join thousands of vibe coders mastering coding and deploying with AI!
619 | 
620 | [![Join Vibe Coding is Life Skool](https://img.shields.io/badge/🎓_Join_Skool-Premium_Courses-FF6B35?style=for-the-badge)](https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41)
621 | [![Join Facebook Group](https://img.shields.io/badge/👥_Facebook-71K+_Developers-1877F2?style=for-the-badge&logo=facebook)](https://www.facebook.com/groups/vibecodinglife)
622 | 
623 | **Made with ❤️ by [Mark Fulton](https://markfulton.com/)**
624 | 
625 | </div>
626 | 


--------------------------------------------------------------------------------