353 lines
8.9 KiB
Markdown
353 lines
8.9 KiB
Markdown
# SEO 静态页面方案一 - 快速开始
|
||
|
||
## ✅ 方案已实现
|
||
|
||
**方案一：Nginx中间件 + 预渲染静态页面** 已完整实现！
|
||
|
||
---
|
||
|
||
## 🎯 核心功能
|
||
|
||
- ✅ 自动生成SEO优化的静态HTML页面
|
||
- ✅ 完整的TDK（Title、Description、Keywords）
|
||
- ✅ 支持Open Graph和Twitter Cards
|
||
- ✅ 包含Schema.org结构化数据
|
||
- ✅ 自动生成sitemap.xml和robots.txt
|
||
- ✅ 爬虫检测和路由区分
|
||
- ✅ Nginx和Apache配置生成
|
||
- ✅ 复用现有的useSEO.js配置
|
||
|
||
---
|
||
|
||
## 📁 生成的文件
|
||
|
||
```
|
||
tyc-webview-v2/
|
||
├── scripts/seo-static-generator/
|
||
│ ├── run.js # 主生成脚本
|
||
│ ├── generateStaticPages.js # 完整生成脚本
|
||
│ ├── pageTemplates.js # 页面模板
|
||
│ ├── crawlerMiddleware.js # 爬虫检测中间件
|
||
│ ├── generateNginxConfig.js # 配置生成脚本
|
||
│ ├── nginx.conf # Nginx配置
|
||
│ ├── .htaccess # Apache配置
|
||
│ ├── static-pages/ # 生成的静态页面
|
||
│ │ ├── index.html # 首页
|
||
│ │ ├── inquire-category-lawsuit.html
|
||
│ │ ├── inquire-marriage.html
|
||
│ │ ├── inquire-category-vehicle.html
|
||
│ │ ├── inquire-category-marriageStatus.html
|
||
│ │ ├── agent.html
|
||
│ │ ├── help.html
|
||
│ │ ├── example.html
|
||
│ │ ├── service.html
|
||
│ │ ├── inquire.html
|
||
│ │ ├── sitemap.xml # 站点地图
|
||
│ │ └── robots.txt # 爬虫规则
|
||
│ ├── README.md # 详细文档
|
||
│ └── index.html # 示例页面
|
||
├── SEO_INTEGRATION.md # 集成指南
|
||
├── DEPLOYMENT_GUIDE.md # 部署指南
|
||
└── SEO_QUICKSTART.md # 本文档
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 快速开始（3步完成）
|
||
|
||
### 步骤 1：生成静态页面
|
||
|
||
```bash
|
||
cd C:\Users\a1726\Desktop\tyc\tyc-webview-v2
|
||
node scripts\seo-static-generator\run.js
|
||
```
|
||
|
||
**输出：**
|
||
```
|
||
========================================
|
||
天远查 - 静态页面生成器
|
||
========================================
|
||
|
||
📂 输出目录: C:\Users\a1726\Desktop\tyc\tyc-webview-v2\scripts\seo-static-generator\static-pages
|
||
|
||
📝 生成静态页面:
|
||
|
||
✅ index.html
|
||
✅ inquire-category-lawsuit.html
|
||
✅ inquire-marriage.html
|
||
✅ inquire-category-vehicle.html
|
||
✅ inquire-category-marriageStatus.html
|
||
✅ agent.html
|
||
✅ help.html
|
||
✅ example.html
|
||
✅ service.html
|
||
✅ inquire.html
|
||
|
||
📝 生成SEO文件:
|
||
|
||
✅ sitemap.xml
|
||
✅ robots.txt
|
||
|
||
========================================
|
||
✨ 完成! 共生成 10 个静态页面
|
||
========================================
|
||
```
|
||
|
||
### 步骤 2：生成服务器配置
|
||
|
||
```bash
|
||
node scripts\seo-static-generator\generateNginxConfig.js
|
||
```
|
||
|
||
**输出：**
|
||
```
|
||
============================================================
|
||
生成 Nginx 配置文件
|
||
============================================================
|
||
|
||
✅ Nginx配置文件生成成功!
|
||
📁 保存路径: C:\Users\a1726\Desktop\tyc\tyc-webview-v2\scripts\seo-static-generator\nginx.conf
|
||
|
||
📝 使用说明:
|
||
1. 将生成的 nginx.conf 复制到 Nginx 配置目录
|
||
2. 修改配置中的路径（spaRoot、staticRoot等）为实际路径
|
||
3. 测试配置: nginx -t
|
||
4. 重载Nginx: nginx -s reload
|
||
|
||
✅ Apache .htaccess 配置文件生成成功!
|
||
📁 保存路径: C:\Users\a1726\Desktop\tyc\tyc-webview-v2\scripts\seo-static-generator\.htaccess
|
||
|
||
📝 使用说明:
|
||
1. 将生成的 .htaccess 复制到网站根目录
|
||
2. 确保 Apache 启用了 mod_rewrite 模块
|
||
3. 重启Apache服务
|
||
```
|
||
|
||
### 步骤 3：部署到服务器
|
||
|
||
#### Nginx 部署（推荐）
|
||
|
||
```bash
|
||
# 1. 上传静态页面
|
||
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
|
||
|
||
# 2. 上传Nginx配置（先修改配置文件中的路径）
|
||
scp scripts/seo-static-generator/nginx.conf user@server:/etc/nginx/sites-available/tyc-webview
|
||
|
||
# 3. 在服务器上配置
|
||
ssh user@server
|
||
sudo ln -s /etc/nginx/sites-available/tyc-webview /etc/nginx/sites-enabled/
|
||
sudo nginx -t
|
||
sudo nginx -s reload
|
||
```
|
||
|
||
#### Apache 部署
|
||
|
||
```bash
|
||
# 1. 上传静态页面
|
||
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
|
||
|
||
# 2. 上传.htaccess
|
||
scp scripts/seo-static-generator/.htaccess user@server:/var/www/tyc-webview-v2/
|
||
|
||
# 3. 在服务器上启用mod_rewrite
|
||
ssh user@server
|
||
sudo a2enmod rewrite
|
||
sudo systemctl restart apache2
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ 验证部署
|
||
|
||
### 测试爬虫检测
|
||
|
||
```bash
|
||
# 模拟百度爬虫（应该返回静态页面）
|
||
curl -A "Baiduspider" http://www.tianyuancha.cn/
|
||
|
||
# 模拟 Google 爬虫（应该返回静态页面）
|
||
curl -A "Googlebot" http://www.tianyuancha.cn/
|
||
|
||
# 正常浏览器访问（应该返回 SPA）
|
||
curl -A "Mozilla/5.0" http://www.tianyuancha.cn/
|
||
```
|
||
|
||
### 查看生成的页面
|
||
|
||
```bash
|
||
# 在浏览器中打开示例页面
|
||
start scripts\seo-static-generator\index.html
|
||
|
||
# 或直接查看生成的文件
|
||
cat scripts\seo-static-generator\static-pages\index.html
|
||
```
|
||
|
||
---
|
||
|
||
## 📋 生成的静态页面列表
|
||
|
||
| 路由 | 文件名 | 页面说明 |
|
||
|------|--------|----------|
|
||
| / | index.html | 首页 |
|
||
| /inquire/category/lawsuit | inquire-category-lawsuit.html | 司法涉诉核验 |
|
||
| /inquire/marriage | inquire-marriage.html | 婚前背景核验 |
|
||
| /inquire/category/vehicle | inquire-category-vehicle.html | 车辆档案报告 |
|
||
| /inquire/category/marriageStatus | inquire-category-marriageStatus.html | 婚姻关联风险核验 |
|
||
| /agent | agent.html | 代理中心 |
|
||
| /help | help.html | 帮助中心 |
|
||
| /example | example.html | 示例报告 |
|
||
| /service | service.html | 客服中心 |
|
||
| /inquire | inquire.html | 核验工具 |
|
||
|
||
---
|
||
|
||
## 🌟 支持的爬虫
|
||
|
||
- ✅ Google (googlebot)
|
||
- ✅ 百度 (baiduspider)
|
||
- ✅ 必应 (bingbot)
|
||
- ✅ 360 (360spider)
|
||
- ✅ 搜狗 (sogou spider)
|
||
- ✅ 头条 (bytespider)
|
||
- ✅ 神马 (yisouspider)
|
||
- ✅ Yandex (yandex)
|
||
- ✅ DuckDuckGo (duckduckbot)
|
||
- ✅ 其他常见爬虫
|
||
|
||
---
|
||
|
||
## 📚 文档导航
|
||
|
||
- **快速开始** - 本文档
|
||
- **部署指南** - [DEPLOYMENT_GUIDE.md](DEPLOYMENT_GUIDE.md)
|
||
- **集成指南** - [SEO_INTEGRATION.md](SEO_INTEGRATION.md)
|
||
- **详细文档** - [scripts/seo-static-generator/README.md](scripts/seo-static-generator/README.md)
|
||
|
||
---
|
||
|
||
## 🔧 自定义配置
|
||
|
||
### 修改 SEO 配置
|
||
|
||
编辑 `scripts\seo-static-generator\run.js` 中的 `seoConfigs`：
|
||
|
||
```javascript
|
||
const seoConfigs = {
|
||
'/': {
|
||
title: '你的页面标题',
|
||
description: '你的页面描述',
|
||
keywords: '关键词1,关键词2,关键词3'
|
||
},
|
||
// ... 其他路由
|
||
};
|
||
```
|
||
|
||
### 修改 Nginx 配置
|
||
|
||
编辑 `scripts\seo-static-generator\generateNginxConfig.js` 中的配置：
|
||
|
||
```javascript
|
||
const config = {
|
||
serverName: 'www.tianyuancha.cn',
|
||
spaRoot: '/var/www/tyc-webview-v2/dist',
|
||
staticRoot: '/var/www/tyc-webview-v2/static-pages',
|
||
sslEnabled: false,
|
||
// ... 其他配置
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 更新和维护
|
||
|
||
### 更新 SEO 内容
|
||
|
||
1. 修改 `run.js` 中的 `seoConfigs`
|
||
2. 重新运行：`node scripts\seo-static-generator\run.js`
|
||
3. 部署到服务器
|
||
|
||
### 添加新页面
|
||
|
||
1. 在 `run.js` 的 `seoConfigs` 中添加新路由
|
||
2. 在 `pageTemplates.js` 中添加内容生成函数
|
||
3. 重新生成并部署
|
||
|
||
---
|
||
|
||
## 📊 SEO 优化特性
|
||
|
||
每个生成的静态页面都包含：
|
||
|
||
- ✅ 完整的 TDK 标签
|
||
- ✅ Canonical URL
|
||
- ✅ Open Graph 标签（Facebook、LinkedIn）
|
||
- ✅ Twitter Cards
|
||
- ✅ Schema.org 结构化数据
|
||
- ✅ Robots Meta 标签
|
||
- ✅ 响应式设计
|
||
- ✅ 美观的页面样式
|
||
- ✅ 链接到主站
|
||
|
||
---
|
||
|
||
## 🎉 工作原理
|
||
|
||
```
|
||
用户请求
|
||
↓
|
||
Nginx 检测 User-Agent
|
||
↓
|
||
├─ 是爬虫 → 返回静态页面（static-pages/）
|
||
└─ 否 → 返回 SPA 应用（dist/）
|
||
```
|
||
|
||
**优势：**
|
||
- 爬虫看到完整的SEO内容
|
||
- 正常用户看到完整的SPA应用
|
||
- 不影响用户体验
|
||
- 性能优异
|
||
|
||
---
|
||
|
||
## ❓ 常见问题
|
||
|
||
**Q: 生成的静态页面在哪里？**
|
||
A: 在 `scripts\seo-static-generator\static-pages\` 目录
|
||
|
||
**Q: 如何修改页面内容？**
|
||
A: 编辑 `pageTemplates.js` 中的内容生成函数
|
||
|
||
**Q: 支持哪些服务器？**
|
||
A: 支持 Nginx 和 Apache
|
||
|
||
**Q: 如何测试爬虫检测？**
|
||
A: 使用 `curl -A "Baiduspider" http://your-domain.com/` 测试
|
||
|
||
**Q: 如何集成到 CI/CD？**
|
||
A: 参考 `DEPLOYMENT_GUIDE.md` 中的 CI/CD 集成部分
|
||
|
||
---
|
||
|
||
## 🆘 技术支持
|
||
|
||
- 📖 查看详细文档：[scripts/seo-static-generator/README.md](scripts/seo-static-generator/README.md)
|
||
- 📖 查看部署指南：[DEPLOYMENT_GUIDE.md](DEPLOYMENT_GUIDE.md)
|
||
- 📖 查看集成指南：[SEO_INTEGRATION.md](SEO_INTEGRATION.md)
|
||
|
||
---
|
||
|
||
## 📝 下一步
|
||
|
||
1. ✅ 运行生成器创建静态页面
|
||
2. ✅ 查看生成的页面效果
|
||
3. ✅ 根据需要修改SEO配置
|
||
4. ✅ 生成服务器配置文件
|
||
5. ✅ 部署到测试服务器验证
|
||
6. ✅ 部署到生产环境
|
||
7. ✅ 使用在线工具验证SEO效果
|
||
|
||
---
|
||
|
||
**🎊 恭喜！方案一已完成！现在你可以开始部署了！**
|