# SPA SEO 优化解决方案
## 📋 方案概述
针对SPA应用SEO问题，采用**爬虫检测 + 静态HTML回退**方案：
1. **爬虫检测**：识别搜索引擎爬虫（百度、Google、必应、搜狗等）
2. **静态HTML**：为爬虫提供预渲染的HTML模板，包含完整的TDK信息
3. **正常用户**：继续使用SPA应用，体验不受影响
## 🏗️ 项目结构
```
server/
├── crawler-detector.js # 爬虫检测模块
├── middleware.js # SEO中间件（Express/Koa）
├── generate-seo-templates.js # SEO模板生成器
├── server-example-express.js # Express服务器示例
├── nginx-seo.conf # Nginx配置示例
└── README-SEO.md # 本文档
public/
└── seo-templates/ # SEO静态模板目录
├── index.html # 首页模板
├── agent.html # 代理页模板
├── help.html # 帮助中心模板
├── inquire-personalData.html # 个人查询模板
└── ... # 其他页面模板
```
## 🚀 快速开始
### 步骤1：生成SEO模板
```bash
cd server
node generate-seo-templates.js
```
这会在 `public/seo-templates/` 目录下生成所有页面的静态HTML模板。
### 步骤2：集成到你的服务器
#### 选项A：使用Express服务器
```javascript
const express = require('express')
const SEOMiddleware = require('./server/middleware')
const app = express()
// 初始化SEO中间件
const seoMiddleware = new SEOMiddleware({
templateDir: path.join(__dirname, 'public/seo-templates'),
debug: true // 开发环境开启调试日志
})
// 应用SEO中间件（必须在静态文件服务之前）
app.use(seoMiddleware.express())
// 静态文件服务
app.use(express.static(path.join(__dirname, 'dist')))
// SPA路由处理
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'))
})
```
#### 选项B：使用Nginx
```bash
# 复制nginx配置文件
cp server/nginx-seo.conf /etc/nginx/sites-available/xingfucha
# 修改配置中的路径
nano /etc/nginx/sites-available/xingfucha
# 启用站点
ln -s /etc/nginx/sites-available/xingfucha /etc/nginx/sites-enabled/
# 重启Nginx
nginx -t && systemctl restart nginx
```
#### 选项C：使用Koa
```javascript
const Koa = require('koa')
const serve = require('koa-static')
const SEOMiddleware = require('./server/middleware')
const app = new Koa()
// 应用SEO中间件
const seoMiddleware = new SEOMiddleware({
templateDir: path.join(__dirname, 'public/seo-templates'),
debug: true
})
app.use(seoMiddleware.koa())
// 静态文件服务
app.use(serve(path.join(__dirname, 'dist')))
app.listen(3000)
```
### 步骤3：测试爬虫检测
```bash
# 模拟百度爬虫
curl -A "Baiduspider" http://localhost:3000/
# 模拟Google爬虫
curl -A "Googlebot/2.1" http://localhost:3000/
# 模拟普通用户
curl http://localhost:3000/
```
## 🔧 配置说明
### 爬虫检测器配置
`crawler-detector.js` 包含以下爬虫识别：
- **中文搜索引擎**：百度、360、搜狗、必应、有道、搜搜、头条搜索
- **国际搜索引擎**：Google、Bing、Yahoo
- **社交媒体爬虫**：Facebook、Twitter、LinkedIn、WhatsApp等
你可以根据需要添加或修改爬虫模式：
```javascript
// 在crawler-detector.js中添加新的爬虫模式
this.crawlerPatterns.push('your-custom-bot')
```
### 路由到模板映射
在 `middleware.js` 中配置路由与模板的对应关系：
```javascript
this.routeTemplateMap = {
'/': 'index.html',
'/agent': 'agent.html',
// 添加新的路由映射
'/new-route': 'new-template.html'
}
```
### 模板生成配置
在 `generate-seo-templates.js` 中配置每个页面的SEO信息：
```javascript
const pageSEOConfigs = {
'new-template.html': {
title: '页面标题',
description: '页面描述',
keywords: '关键词1,关键词2,关键词3',
url: 'https://www.xingfucha.cn/new-route'
}
}
```
## 📝 自定义模板
### 修改模板样式
编辑 `generate-seo-templates.js` 中的 `generateHTMLTemplate` 函数：
```javascript
function generateHTMLTemplate(config) {
return `
`
}
```
### 添加结构化数据
模板已包含基本的结构化数据（JSON-LD格式），如需扩展：
```javascript
const structuredData = {
"@context": "https://schema.org",
"@type": "WebPage",
// 添加更多字段
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [...]
}
}
```
## 🧪 验证SEO效果
### 使用在线工具
1. **百度资源平台**：https://ziyuan.baidu.com/
2. **Google Search Console**：https://search.google.com/search-console
3. **必应网站管理员工具**：https://www.bing.com/webmasters
### 使用命令行工具
```bash
# 查看网页源代码
curl -A "Baiduspider" http://www.xingfucha.cn/ | grep -o '.*'
# 检查meta标签
curl -A "Googlebot" http://www.xingfucha.cn/ | grep -E '