tyc-webview-v2/scripts/seo-static-generator

天远查 SEO 静态页面生成器

为 Vue SPA 应用生成 SEO 友好的静态 HTML 页面，解决爬虫无法抓取客户端渲染内容的问题。

功能特性

• ✅ 自动根据路由和 SEO 配置生成静态 HTML 页面
• ✅ 完整的 TDK（Title、Description、Keywords）优化
• ✅ 支持 Open Graph 和 Twitter Cards
• ✅ 包含 Schema.org 结构化数据
• ✅ 自动生成 sitemap.xml
• ✅ 自动生成 robots.txt
• ✅ Nginx 和 Apache 配置生成
• ✅ 爬虫检测中间件
• ✅ 复用现有的 useSEO.js 配置

目录结构

scripts/seo-static-generator/
├── package.json                    # 项目配置
├── README.md                        # 使用说明
├── pageTemplates.js                # 页面模板生成器
├── generateStaticPages.js          # 静态页面生成主脚本
├── crawlerMiddleware.js            # 爬虫检测中间件
├── generateNginxConfig.js          # 配置文件生成脚本
└── static-pages/                    # 生成的静态页面（自动创建）
    ├── index.html
    ├── inquire-category-lawsuit.html
    ├── inquire-marriage.html
    ├── ...
    ├── sitemap.xml
    └── robots.txt

快速开始

1. 安装依赖

cd scripts/seo-static-generator

注意：本工具使用 Node.js 原生模块，无需安装额外依赖。

2. 生成静态页面

# 生成所有静态页面
node generateStaticPages.js

# 或使用 npm script
npm run generate

生成成功后，静态页面将保存在 static-pages/ 目录中。

3. 生成服务器配置

# 生成 Nginx 配置
npm run nginx

# 或生成 Apache .htaccess 配置
npm run htaccess

配置说明

SEO 配置

SEO 配置在 generateStaticPages.js 中定义，可以直接复用 useSEO.js 中的配置：

const seoConfigs = {
    '/': {
        title: '天远查官网_企业与婚姻关联风险核验_综合履约背景核验',
        description: '天远查官网(TianYuanCha)聚合官方公示数据...',
        keywords: '天远查,婚姻状态风险, 配偶背景核验...'
    },
    '/inquire/category/lawsuit': {
        title: '司法涉诉核验_个人及企业法律诉讼记录...',
        description: '天远查司法风险检测中心...',
        keywords: '司法案件核验,法律诉讼记录...'
    },
    // ... 更多路由配置
};

Nginx 配置

在 generateNginxConfig.js 中修改配置：

const config = {
    serverName: 'www.tianyuancha.cn',        // 你的域名
    spaRoot: '/var/www/tyc-webview-v2/dist', // SPA 静态文件目录
    staticRoot: '/var/www/tyc-webview-v2/static-pages', // SEO 静态页面目录
    sslEnabled: false,                       // 是否启用 HTTPS
    sslCertPath: '/etc/nginx/ssl/cert.pem',  // SSL 证书路径
    sslKeyPath: '/etc/nginx/ssl/key.pem'      // SSL 密钥路径
};

部署步骤

方式一：Nginx 部署（推荐）

1. 生成静态页面

npm run generate

2. 生成 Nginx 配置

npm run nginx

3. 部署配置文件

# 复制生成的 nginx.conf 到 Nginx 配置目录
sudo cp scripts/seo-static-generator/nginx.conf /etc/nginx/sites-available/tyc-webview

# 创建软链接
sudo ln -s /etc/nginx/sites-available/tyc-webview /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重载 Nginx
sudo nginx -s reload

4. 部署静态文件

# 将生成的静态页面复制到服务器
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/

方式二：Apache 部署

1. 生成静态页面

npm run generate

2. 生成 .htaccess 配置

npm run htaccess

3. 部署配置文件

# 复制 .htaccess 到网站根目录
cp scripts/seo-static-generator/.htaccess /var/www/tyc-webview-v2/

4. 部署静态文件

# 将生成的静态页面复制到服务器
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/

工作原理

爬虫检测流程

用户请求
    ↓
Nginx 检测 User-Agent
    ↓
    ├─ 是爬虫 → 返回静态页面（static-pages/）
    └─ 否      → 返回 SPA 应用（dist/）

爬虫 User-Agent 列表

工具内置了以下爬虫的识别：

• Google: googlebot, googlebot-image, googlebot-news
• 百度: baiduspider, baiduspider-mobile
• 必应: bingbot, msnbot
• 360: 360spider
• 搜狗: sogou spider, sogou-orion
• 头条: bytespider
• 神马: yisouspider
• 其他: yandex, duckduckbot, slurp 等

自定义页面内容

修改页面模板

编辑 pageTemplates.js 中的模板函数：

export function generateStaticHTML(seoConfig, options = {}) {
    // 自定义 HTML 模板
}

添加新的路由页面

1. 在 generateStaticPages.js 中添加路由配置：

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

2. 在 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);
}

集成到构建流程

在项目的 package.json 中添加构建脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:seo": "node scripts/seo-static-generator/generateStaticPages.js",
    "build:all": "npm run build && npm run build:seo"
  }
}

现在运行 npm run build:all 就可以同时构建 SPA 和生成静态页面。

测试

测试爬虫检测

使用 curl 模拟爬虫访问：

# 模拟百度爬虫
curl -A "Baiduspider" http://www.tianyuancha.cn/

# 模拟 Google 爬虫
curl -A "Googlebot" http://www.tianyuancha.cn/

# 正常浏览器访问
curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" http://www.tianyuancha.cn/

验证 SEO

使用在线工具验证生成的页面：

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

常见问题

Q: 如何添加新的爬虫识别？

A: 在 crawlerMiddleware.js 的 SEARCH_ENGINE_BOTS 数组中添加：

const SEARCH_ENGINE_BOTS = [
    // ... 现有爬虫
    'new-bot-name',
];

Q: 静态页面如何保持最新？

A: 每次更新 SEO 配置后，重新运行：

npm run generate

建议将此步骤集成到 CI/CD 流程中。

Q: 如何处理动态内容？

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

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

Q: Nginx 配置不生效怎么办？

A: 检查以下几点：

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

技术支持

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

许可证

MIT