up seo

2026-02-25 11:45:21 +08:00
parent 5043657470
commit 4ccf2ec354
35 changed files with 6151 additions and 26 deletions
--- a/DEPLOYMENT_GUIDE.md
+++ b/DEPLOYMENT_GUIDE.md
@@ -0,0 +1,555 @@
+# 天远查 SEO 静态页面部署指南
+
+本文档提供完整的 SEO 静态页面生成和部署方案。
+
+## 📋 目录
+
+- [快速开始](#快速开始)
+- [文件结构](#文件结构)
+- [生成静态页面](#生成静态页面)
+- [部署到生产环境](#部署到生产环境)
+- [验证SEO效果](#验证seo效果)
+- [维护和更新](#维护和更新)
+
+---
+
+## 🚀 快速开始
+
+### 1. 生成静态页面
+
+```bash
+# 进入项目目录
+cd C:\Users\a1726\Desktop\tyc\tyc-webview-v2
+
+# 运行生成器
+node scripts\seo-static-generator\run.js
+```
+
+生成成功后，会在 `scripts\seo-static-generator\static-pages\` 目录生成：
+
+- ✅ 10 个静态HTML页面
+- ✅ sitemap.xml
+- ✅ robots.txt
+
+### 2. 生成服务器配置
+
+```bash
+# 生成 Nginx 和 Apache 配置
+node scripts\seo-static-generator\generateNginxConfig.js
+```
+
+生成成功后，会创建：
+
+- ✅ nginx.conf (Nginx配置)
+- ✅ .htaccess (Apache配置)
+
+---
+
+## 📁 文件结构
+
+```
+tyc-webview-v2/
+├── scripts/
+│   └── seo-static-generator/
+│       ├── run.js                    # 主生成脚本（推荐使用）
+│       ├── generateStaticPages.js    # 完整生成脚本
+│       ├── pageTemplates.js          # 页面模板
+│       ├── crawlerMiddleware.js      # 爬虫检测中间件
+│       ├── generateNginxConfig.js    # 配置生成脚本
+│       ├── package.json              # 项目配置
+│       ├── README.md                 # 详细文档
+│       ├── index.html                # 示例页面
+│       ├── 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
+├── SEO_INTEGRATION.md                 # 集成指南
+└── DEPLOYMENT_GUIDE.md               # 本文档
+```
+
+---
+
+## 🔨 生成静态页面
+
+### 方式一：使用简化脚本（推荐）
+
+```bash
+node scripts\seo-static-generator\run.js
+```
+
+**优点：**
+- 兼容性更好
+- 输出更清晰
+- 错误处理更完善
+
+### 方式二：使用完整脚本
+
+```bash
+node scripts\seo-static-generator\generateStaticPages.js
+```
+
+**包含功能：**
+- 生成所有路由页面
+- 生成额外的路由页面
+- 生成sitemap.xml
+- 生成robots.txt
+
+---
+
+## 🌐 部署到生产环境
+
+### 方式一：Nginx 部署（推荐）
+
+#### 步骤 1：准备文件
+
+```bash
+# 1. 生成静态页面
+node scripts\seo-static-generator\run.js
+
+# 2. 生成 Nginx 配置
+node scripts\seo-static-generator\generateNginxConfig.js
+```
+
+#### 步骤 2：修改 Nginx 配置
+
+编辑 `scripts\seo-static-generator\nginx.conf`，修改以下路径：
+
+```nginx
+server_name www.tianyuancha.cn;           # 修改为你的域名
+spaRoot /var/www/tyc-webview-v2/dist;   # 修改为SPA静态文件目录
+staticRoot /var/www/tyc-webview-v2/static-pages; # 修改为SEO页面目录
+```
+
+#### 步骤 3：上传文件到服务器
+
+```bash
+# 上传 SPA 构建文件
+scp -r dist/* user@server:/var/www/tyc-webview-v2/dist/
+
+# 上传 SEO 静态页面
+scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
+
+# 上传 Nginx 配置
+scp scripts/seo-static-generator/nginx.conf user@server:/etc/nginx/sites-available/tyc-webview
+```
+
+#### 步骤 4：配置 Nginx
+
+```bash
+# SSH 登录到服务器
+ssh user@server
+
+# 创建软链接
+sudo ln -s /etc/nginx/sites-available/tyc-webview /etc/nginx/sites-enabled/
+
+# 测试配置
+sudo nginx -t
+
+# 如果测试通过，重载 Nginx
+sudo nginx -s reload
+```
+
+#### 步骤 5：验证部署
+
+```bash
+# 模拟百度爬虫
+curl -A "Baiduspider" http://www.tianyuancha.cn/
+
+# 模拟 Google 爬虫
+curl -A "Googlebot" http://www.tianyuancha.cn/
+
+# 正常浏览器访问
+curl -A "Mozilla/5.0" http://www.tianyuancha.cn/
+```
+
+### 方式二：Apache 部署
+
+#### 步骤 1：准备文件
+
+```bash
+# 1. 生成静态页面
+node scripts\seo-static-generator\run.js
+
+# 2. 生成 Apache 配置
+node scripts\seo-static-generator\generateNginxConfig.js
+```
+
+#### 步骤 2：上传文件到服务器
+
+```bash
+# 上传 SPA 构建文件
+scp -r dist/* user@server:/var/www/tyc-webview-v2/
+
+# 上传 SEO 静态页面
+scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
+
+# 上传 .htaccess
+scp scripts/seo-static-generator/.htaccess user@server:/var/www/tyc-webview-v2/
+```
+
+#### 步骤 3：启用 mod_rewrite
+
+```bash
+# SSH 登录到服务器
+ssh user@server
+
+# 启用 mod_rewrite
+sudo a2enmod rewrite
+
+# 重启 Apache
+sudo systemctl restart apache2
+```
+
+#### 步骤 4：验证部署
+
+```bash
+# 模拟百度爬虫
+curl -A "Baiduspider" http://www.tianyuancha.cn/
+
+# 模拟 Google 爬虫
+curl -A "Googlebot" http://www.tianyuancha.cn/
+
+# 正常浏览器访问
+curl -A "Mozilla/5.0" http://www.tianyuancha.cn/
+```
+
+---
+
+## ✅ 验证 SEO 效果
+
+### 1. 测试爬虫检测
+
+在本地或服务器上运行以下命令：
+
+```bash
+# 测试百度爬虫
+curl -A "Baiduspider" http://www.tianyuancha.cn/ | head -20
+
+# 测试 Google 爬虫
+curl -A "Googlebot" http://www.tianyuancha.cn/ | head -20
+
+# 测试 360 爬虫
+curl -A "360spider" http://www.tianyuancha.cn/ | head -20
+
+# 测试搜狗爬虫
+curl -A "sogou spider" http://www.tianyuancha.cn/ | head -20
+
+# 测试正常用户
+curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" http://www.tianyuancha.cn/ | head -20
+```
+
+**预期结果：**
+- 爬虫访问应该返回静态HTML页面（包含完整的TDK）
+- 正常用户访问应该返回SPA应用
+
+### 2. 验证 TDK 标签
+
+检查生成的静态页面是否包含完整的SEO标签：
+
+```bash
+# 查看生成的首页
+cat scripts/seo-static-generator/static-pages/index.html | grep -E "<title>|<meta name=\"description\"|<meta name=\"keywords\""
+```
+
+**预期输出：**
+```html
+<title>天远查官网_企业与婚姻关联风险核验_综合履约背景核验</title>
+<meta name="description" content="天远查官网...">
+<meta name="keywords" content="天远查,婚姻状态风险...">
+```
+
+### 3. 使用在线工具验证
+
+#### Google Rich Results Test
+访问：https://search.google.com/test/rich-results
+输入你的网站URL，测试结构化数据。
+
+#### 百度移动适配测试
+访问：http://ziyuan.baidu.com/
+测试移动端适配和SEO。
+
+#### Schema Markup Validator
+访问：https://validator.schema.org/
+验证结构化数据格式。
+
+---
+
+## 🔄 维护和更新
+
+### 更新 SEO 配置
+
+#### 步骤 1：修改配置
+
+编辑 `scripts\seo-static-generator\run.js` 中的 `seoConfigs`：
+
+```javascript
+const seoConfigs = {
+    '/': {
+        title: '新的页面标题',
+        description: '新的页面描述',
+        keywords: '新的关键词'
+    },
+    // ... 其他路由
+};
+```
+
+#### 步骤 2：重新生成静态页面
+
+```bash
+node scripts\seo-static-generator\run.js
+```
+
+#### 步骤 3：部署到服务器
+
+```bash
+# 上传更新的静态页面
+scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
+```
+
+### 添加新的路由页面
+
+#### 步骤 1：添加路由配置
+
+在 `scripts\seo-static-generator\run.js` 的 `seoConfigs` 中添加：
+
+```javascript
+const seoConfigs = {
+    // ... 现有路由
+    '/new-route': {
+        title: '新页面标题',
+        description: '新页面描述',
+        keywords: '关键词1,关键词2'
+    }
+};
+```
+
+#### 步骤 2：添加页面内容（可选）
+
+编辑 `scripts\seo-static-generator\pageTemplates.js`，添加内容生成函数：
+
+```javascript
+function generateNewRouteContent(seoConfig) {
+    return `
+        <h2>新页面标题</h2>
+        <p>这里写页面的具体内容...</p>
+    `;
+}
+
+// 添加到路由映射
+export function generateContentByRoute(path, seoConfig) {
+    const routeContentMap = {
+        // ... 现有路由
+        '/new-route': generateNewRouteContent(seoConfig),
+    };
+    return routeContentMap[path] || generateDefaultContent(seoConfig);
+}
+```
+
+#### 步骤 3：重新生成和部署
+
+```bash
+# 重新生成
+node scripts\seo-static-generator\run.js
+
+# 部署到服务器
+scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
+```
+
+---
+
+## 🔧 集成到 CI/CD
+
+在 CI/CD 流程中自动生成和部署静态页面。
+
+### GitHub Actions 示例
+
+创建 `.github/workflows/deploy.yml`：
+
+```yaml
+name: Deploy
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '18'
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Build Vue project
+      run: npm run build
+
+    - name: Generate SEO pages
+      run: node scripts/seo-static-generator/run.js
+
+    - name: Deploy to server
+      uses: easingthemes/ssh-deploy@v2.1.5
+      env:
+        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+        REMOTE_USER: ${{ secrets.REMOTE_USER }}
+        TARGET: /var/www/tyc-webview-v2/
+      with:
+        SOURCE: "dist/ scripts/seo-static-generator/static-pages/"
+        ARGS: "-rlgoDzvc -i"
+```
+
+### Jenkins Pipeline 示例
+
+创建 `Jenkinsfile`：
+
+```groovy
+pipeline {
+    agent any
+
+    stages {
+        stage('Checkout') {
+            steps {
+                checkout scm
+            }
+        }
+
+        stage('Install') {
+            steps {
+                sh 'npm install'
+            }
+        }
+
+        stage('Build') {
+            steps {
+                sh 'npm run build'
+            }
+        }
+
+        stage('Generate SEO') {
+            steps {
+                sh 'node scripts/seo-static-generator/run.js'
+            }
+        }
+
+        stage('Deploy') {
+            steps {
+                sh '''
+                    scp -r dist/* user@server:/var/www/tyc-webview-v2/dist/
+                    scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
+                '''
+            }
+        }
+    }
+}
+```
+
+---
+
+## 📊 监控和日志
+
+### Nginx 日志
+
+```bash
+# 查看访问日志
+sudo tail -f /var/log/nginx/tyc-webview-access.log
+
+# 查看错误日志
+sudo tail -f /var/log/nginx/tyc-webview-error.log
+
+# 查看爬虫访问记录
+grep -i "googlebot\|baiduspider" /var/log/nginx/tyc-webview-access.log
+```
+
+### Apache 日志
+
+```bash
+# 查看访问日志
+sudo tail -f /var/log/apache2/access.log
+
+# 查看错误日志
+sudo tail -f /var/log/apache2/error.log
+
+# 查看爬虫访问记录
+grep -i "googlebot\|baiduspider" /var/log/apache2/access.log
+```
+
+---
+
+## ❓ 常见问题
+
+### Q1: 静态页面没有生成？
+
+**A:** 检查以下几点：
+1. 确保 Node.js 版本 >= 14
+2. 检查是否有文件写入权限
+3. 查看控制台错误信息
+4. 尝试使用 `run.js` 脚本而不是 `generateStaticPages.js`
+
+### Q2: Nginx 配置不生效？
+
+**A:** 检查以下几点：
+1. 确保 Nginx 已重启：`sudo nginx -s reload`
+2. 检查配置文件语法：`sudo nginx -t`
+3. 查看 Nginx 错误日志：`sudo tail -f /var/log/nginx/error.log`
+4. 确保静态文件路径正确
+
+### Q3: 爬虫仍然看到的是 SPA？
+
+**A:** 检查以下几点：
+1. 确认 User-Agent 匹配规则正确
+2. 检查 Nginx/Apache 配置是否正确加载
+3. 使用 curl 测试爬虫访问
+4. 清除浏览器缓存后重试
+
+### Q4: 如何处理动态内容？
+
+**A:** 对于需要动态内容的页面，可以考虑：
+1. 使用定时任务定期重新生成静态页面
+2. 在静态页面中添加 JavaScript，让正常用户访问时加载动态内容
+3. 考虑使用动态渲染服务（方案三）
+
+### Q5: 如何测试 SEO 效果？
+
+**A:** 使用以下工具：
+1. Google Rich Results Test: https://search.google.com/test/rich-results
+2. 百度移动适配测试: http://ziyuan.baidu.com/
+3. Schema Markup Validator: https://validator.schema.org/
+
+---
+
+## 📚 相关文档
+
+- [详细使用文档](scripts/seo-static-generator/README.md)
+- [集成指南](SEO_INTEGRATION.md)
+- [useSEO.js 源码](src/composables/useSEO.js)
+
+---
+
+## 🆘 技术支持
+
+如有问题，请联系技术团队或提交 Issue。
+
+---
+
+## 📄 许可证
+
+MIT