team/tyc-webview-v2

Fork 0

Files

Mrx 4ccf2ec354 up seo

2026-02-25 11:45:21 +08:00

12 KiB

Raw Permalink Blame History

天远查 SEO 静态页面部署指南

本文档提供完整的 SEO 静态页面生成和部署方案。

📋 目录

快速开始
文件结构
生成静态页面
部署到生产环境
验证SEO效果
维护和更新

🚀 快速开始

1. 生成静态页面

# 进入项目目录
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. 生成服务器配置

# 生成 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               # 本文档

🔨 生成静态页面

方式一：使用简化脚本（推荐）

node scripts\seo-static-generator\run.js

优点：

兼容性更好
输出更清晰
错误处理更完善

方式二：使用完整脚本

node scripts\seo-static-generator\generateStaticPages.js

包含功能：

生成所有路由页面
生成额外的路由页面
生成sitemap.xml
生成robots.txt

🌐 部署到生产环境

方式一：Nginx 部署（推荐）

步骤 1：准备文件

# 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，修改以下路径：

server_name www.tianyuancha.cn;           # 修改为你的域名
spaRoot /var/www/tyc-webview-v2/dist;   # 修改为SPA静态文件目录
staticRoot /var/www/tyc-webview-v2/static-pages; # 修改为SEO页面目录

步骤 3：上传文件到服务器

# 上传 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

# 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：验证部署

# 模拟百度爬虫
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：准备文件

# 1. 生成静态页面
node scripts\seo-static-generator\run.js

# 2. 生成 Apache 配置
node scripts\seo-static-generator\generateNginxConfig.js

步骤 2：上传文件到服务器

# 上传 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

# SSH 登录到服务器
ssh user@server

# 启用 mod_rewrite
sudo a2enmod rewrite

# 重启 Apache
sudo systemctl restart apache2

步骤 4：验证部署

# 模拟百度爬虫
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. 测试爬虫检测

在本地或服务器上运行以下命令：

# 测试百度爬虫
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标签：

# 查看生成的首页
cat scripts/seo-static-generator/static-pages/index.html | grep -E "<title>|<meta name=\"description\"|<meta name=\"keywords\""

预期输出：

<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：

const seoConfigs = {
    '/': {
        title: '新的页面标题',
        description: '新的页面描述',
        keywords: '新的关键词'
    },
    // ... 其他路由
};

步骤 2：重新生成静态页面

node scripts\seo-static-generator\run.js

步骤 3：部署到服务器

# 上传更新的静态页面
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 中添加：

const seoConfigs = {
    // ... 现有路由
    '/new-route': {
        title: '新页面标题',
        description: '新页面描述',
        keywords: '关键词1,关键词2'
    }
};

步骤 2：添加页面内容（可选）

编辑 scripts\seo-static-generator\pageTemplates.js，添加内容生成函数：

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：重新生成和部署

# 重新生成
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：

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：

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 日志

# 查看访问日志
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 日志

# 查看访问日志
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: 检查以下几点：

确保 Node.js 版本 >= 14
检查是否有文件写入权限
查看控制台错误信息
尝试使用 run.js 脚本而不是 generateStaticPages.js

Q2: Nginx 配置不生效？

A: 检查以下几点：

确保 Nginx 已重启：sudo nginx -s reload
检查配置文件语法：sudo nginx -t
查看 Nginx 错误日志：sudo tail -f /var/log/nginx/error.log
确保静态文件路径正确

Q3: 爬虫仍然看到的是 SPA？

A: 检查以下几点：

确认 User-Agent 匹配规则正确
检查 Nginx/Apache 配置是否正确加载
使用 curl 测试爬虫访问
清除浏览器缓存后重试

Q4: 如何处理动态内容？

A: 对于需要动态内容的页面，可以考虑：

使用定时任务定期重新生成静态页面
在静态页面中添加 JavaScript，让正常用户访问时加载动态内容
考虑使用动态渲染服务（方案三）

Q5: 如何测试 SEO 效果？

A: 使用以下工具：

Google Rich Results Test: https://search.google.com/test/rich-results
百度移动适配测试: http://ziyuan.baidu.com/
Schema Markup Validator: https://validator.schema.org/

📚 相关文档

🆘 技术支持

如有问题，请联系技术团队或提交 Issue。

📄 许可证

MIT

12 KiB Raw Permalink Blame History Unescape Escape

天远查 SEO 静态页面部署指南

📋 目录

🚀 快速开始

1. 生成静态页面

2. 生成服务器配置

📁 文件结构

🔨 生成静态页面

方式一：使用简化脚本（推荐）

方式二：使用完整脚本

🌐 部署到生产环境

方式一：Nginx 部署（推荐）

步骤 1：准备文件

步骤 2：修改 Nginx 配置

步骤 3：上传文件到服务器

步骤 4：配置 Nginx

步骤 5：验证部署

方式二：Apache 部署

步骤 1：准备文件

步骤 2：上传文件到服务器

步骤 3：启用 mod_rewrite

步骤 4：验证部署

✅ 验证 SEO 效果

1. 测试爬虫检测

2. 验证 TDK 标签

3. 使用在线工具验证

Google Rich Results Test

百度移动适配测试

Schema Markup Validator

🔄 维护和更新

更新 SEO 配置

步骤 1：修改配置

步骤 2：重新生成静态页面

步骤 3：部署到服务器

添加新的路由页面

步骤 1：添加路由配置

步骤 2：添加页面内容（可选）

步骤 3：重新生成和部署

🔧 集成到 CI/CD

GitHub Actions 示例

Jenkins Pipeline 示例

📊 监控和日志

Nginx 日志

Apache 日志

❓ 常见问题

Q1: 静态页面没有生成？

Q2: Nginx 配置不生效？

Q3: 爬虫仍然看到的是 SPA？

Q4: 如何处理动态内容？

Q5: 如何测试 SEO 效果？

📚 相关文档

🆘 技术支持

📄 许可证

12 KiB

Raw Permalink Blame History