team/tyc-webview-v2

Fork 0

Files

Mrx 4ccf2ec354 up seo

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

8.9 KiB

Raw Blame History

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：生成静态页面

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：生成服务器配置

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 部署（推荐）

# 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 部署

# 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

✅ 验证部署

测试爬虫检测

# 模拟百度爬虫（应该返回静态页面）
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/

查看生成的页面

# 在浏览器中打开示例页面
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
集成指南 - SEO_INTEGRATION.md
详细文档 - scripts/seo-static-generator/README.md

🔧 自定义配置

修改 SEO 配置

编辑 scripts\seo-static-generator\run.js 中的 seoConfigs：

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

修改 Nginx 配置

编辑 scripts\seo-static-generator\generateNginxConfig.js 中的配置：

const config = {
    serverName: 'www.tianyuancha.cn',
    spaRoot: '/var/www/tyc-webview-v2/dist',
    staticRoot: '/var/www/tyc-webview-v2/static-pages',
    sslEnabled: false,
    // ... 其他配置
};

🔄 更新和维护

更新 SEO 内容

修改 run.js 中的 seoConfigs
重新运行：node scripts\seo-static-generator\run.js
部署到服务器

添加新页面

在 run.js 的 seoConfigs 中添加新路由
在 pageTemplates.js 中添加内容生成函数
重新生成并部署

📊 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
📖 查看部署指南：DEPLOYMENT_GUIDE.md
📖 查看集成指南：SEO_INTEGRATION.md

📝 下一步

✅ 运行生成器创建静态页面
✅ 查看生成的页面效果
✅ 根据需要修改SEO配置
✅ 生成服务器配置文件
✅ 部署到测试服务器验证
✅ 部署到生产环境
✅ 使用在线工具验证SEO效果

🎊 恭喜！方案一已完成！现在你可以开始部署了！

8.9 KiB Raw Blame History Unescape Escape