up seo
This commit is contained in:
352
scripts/seo-static-generator/SEO_QUICKSTART.md
Normal file
352
scripts/seo-static-generator/SEO_QUICKSTART.md
Normal file
@@ -0,0 +1,352 @@
|
||||
# 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
Block a user