Loading...
Loading...
Implement GEO in React SPAs using static files and build tools
React SPAs require special handling for GEO endpoints since they don't have server-side routing
Create static JSON files in your public folder
public/ ├── .well-known/ │ ├── ai.txt ├── ai/ │ ├── summary.json │ ├── faq.json │ └── service.json ├── sitemap-llm.xml └── robots.txt
Generate GEO files during the build process
const fs = require('fs');
const path = require('path');
// Create .well-known directory
const wellKnownDir = path.join(__dirname, 'public', '.well-known');
if (!fs.existsSync(wellKnownDir)) {
fs.mkdirSync(wellKnownDir, { recursive: true });
}
// Create ai directory
const aiDir = path.join(__dirname, 'public', 'ai');
if (!fs.existsSync(aiDir)) {
fs.mkdirSync(aiDir, { recursive: true });
}
// Generate summary.json
const summary = {
version: "1.0",
lastModified: new Date().toISOString(),
summary: process.env.REACT_APP_AI_SUMMARY || "Your React app provides [services] to [audience] with [benefits].",
keyFeatures: [
"React-based SPA",
"Modern UI/UX",
"Fast performance"
],
targetAudience: [
"Web users",
"Mobile users"
],
primaryUseCases: [
"Use case 1",
"Use case 2"
]
};
fs.writeFileSync(
path.join(aiDir, 'summary.json'),
JSON.stringify(summary, null, 2)
);
console.log('GEO files generated successfully!');{
"scripts": {
"prebuild": "node build-script.js",
"build": "react-scripts build",
"predeploy": "node build-script.js"
}
}Use Vercel or Netlify serverless functions for dynamic content
export default function handler(req, res) {
const config = {
version: "1.0",
lastModified: new Date().toISOString(),
site: {
name: "Your React App",
description: "Your app description",
url: "https://yourapp.com",
language: "en"
},
ai: {
summary: "/api/ai/summary",
faq: "/api/ai/faq",
service: "/api/ai/service"
},
discovery: {
robots: "/robots.txt",
sitemap: "/sitemap-llm.xml",
aiTxt: "/.well-known/ai.txt"
},
features: ["spa", "react", "serverless"]
};
res.setHeader('Content-Type', 'application/json');
res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
res.status(200).json(config);
}{
"rewrites": [
{
"source": "/ai/summary.json",
"destination": "/api/ai/summary"
},
{
"source": "/ai/faq.json",
"destination": "/api/ai/faq"
},
{
"source": "/ai/service.json",
"destination": "/api/ai/service"
}
]
}Important notes for deploying React apps with GEO
Complete your React GEO implementation