team/tyc-webview-v2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
tyc-webview-v2/scripts/seo-static-generator/SEO_QUICKSTART.md

353 lines
8.9 KiB
Markdown
Raw Permalink Normal View History

up seo
2026-02-25 11:45:21 +08:00
# 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效果
---
**🎊 恭喜！方案一已完成！现在你可以开始部署了！**
Reference in New Issue Copy Permalink