diff --git a/server/README-SEO.md b/server/README-SEO.md deleted file mode 100644 index 6df075e..0000000 --- a/server/README-SEO.md +++ /dev/null @@ -1,355 +0,0 @@ -# SPA SEO 优化解决方案 - -## 📋 方案概述 - -针对 SPA 应用 SEO 问题，采用**爬虫检测 + 静态 HTML 回退**方案： - -1. **爬虫检测**：识别搜索引擎爬虫（百度、Google、必应、搜狗等） -2. **静态 HTML**：为爬虫提供预渲染的 HTML 模板，包含完整 TDK、OG、canonical、结构化数据 -3. **正常用户**：继续使用 SPA，体验不受影响 - -**配置统一**：服务端 SEO 模板内容与前端 `src/composables/useSEO.js` 保持一致（标题、描述、关键词、域名），域名默认为 `https://www.quannengcha.com`（全能查）。可通过环境变量 `SEO_BASE_URL` 覆盖。 - -## 🏗️ 项目结构 - -``` -server/ -├── crawler-detector.js # 爬虫检测模块 -├── middleware.js # SEO 中间件（Express/Koa），路由与 useSEO.js 一致 -├── generate-seo-templates.cjs # SEO 模板生成器（与 useSEO.js 同步） -├── server-example-express.js # Express 服务器示例 -├── nginx-www.quannengcha.com.conf # 全能查 Nginx 配置（quannengcha.com） -├── nginx-www.tianyuancha.cn.conf # 天远查 Nginx 配置（tianyuancha.cn） -├── nginx-www.tianyuandb.com.conf # 天远数据 Nginx 配置（tianyuandb.com） -├── test-seo.js # SEO 端到端检测脚本 -└── README-SEO.md # 本文档 - -public/ -└── seo-templates/ # SEO 静态模板目录（运行 generate 后生成） - ├── index.html - ├── agent-system-guide.html - ├── inquire-riskassessment.html - ├── inquire-companyinfo.html - ├── inquire-preloanbackgroundcheck.html - ├── inquire-marriage.html - ├── inquire-backgroundcheck.html - ├── inquire-homeservice.html - ├── inquire-consumerFinanceReport.html - ├── agent.html - ├── help.html - ├── help-guide.html - ├── example.html - ├── service.html - ├── promote.html - └── ... -``` - -## 🚀 快速开始 - -### 步骤1：生成 SEO 模板 - -```bash -cd server -node generate-seo-templates.cjs -# 或 npm run generate -``` - -这会在 `public/seo-templates/` 下生成所有页面的静态 HTML 模板，内容与 `src/composables/useSEO.js` 一致。 - -### 步骤2：集成到你的服务器 - -#### 选项A：使用Express服务器 - -```javascript -const express = require('express') -const SEOMiddleware = require('./server/middleware') - -const app = express() - -// 初始化SEO中间件 -const seoMiddleware = new SEOMiddleware({ - templateDir: path.join(__dirname, 'public/seo-templates'), - debug: true // 开发环境开启调试日志 -}) - -// 应用SEO中间件（必须在静态文件服务之前） -app.use(seoMiddleware.express()) - -// 静态文件服务 -app.use(express.static(path.join(__dirname, 'dist'))) - -// SPA路由处理 -app.get('*', (req, res) => { - res.sendFile(path.join(__dirname, 'dist/index.html')) -}) -``` - -#### 选项B：使用 Nginx - -- 全能查站点：参考 `server/nginx-www.quannengcha.com.conf`，将 `root` 和 `server_name`、证书路径改为你的服务器路径。 -- 天远查站点：参考 `server/nginx-www.tianyuancha.cn.conf`。 -- 部署时把 `public/seo-templates/` 整目录上传到服务器 `root` 下的 `static-pages/`。 - -```bash -# 复制并修改配置 -cp server/nginx-www.quannengcha.com.conf /etc/nginx/sites-available/quannengcha -nano /etc/nginx/sites-available/quannengcha # 修改 root、证书等 - -# 启用并重载 -ln -s /etc/nginx/sites-available/quannengcha /etc/nginx/sites-enabled/ -nginx -t && systemctl restart nginx -``` - -#### 选项C：使用Koa - -```javascript -const Koa = require('koa') -const serve = require('koa-static') -const SEOMiddleware = require('./server/middleware') - -const app = new Koa() - -// 应用SEO中间件 -const seoMiddleware = new SEOMiddleware({ - templateDir: path.join(__dirname, 'public/seo-templates'), - debug: true -}) - -app.use(seoMiddleware.koa()) - -// 静态文件服务 -app.use(serve(path.join(__dirname, 'dist'))) - -app.listen(3000) -``` - -### 步骤3：测试爬虫检测 - -```bash -# 模拟百度爬虫 -curl -A "Baiduspider" http://localhost:3000/ - -# 模拟Google爬虫 -curl -A "Googlebot/2.1" http://localhost:3000/ - -# 模拟普通用户 -curl http://localhost:3000/ -``` - -## 🔧 配置说明 - -### 爬虫检测器配置 - -`crawler-detector.js` 包含以下爬虫识别： - -- **中文搜索引擎**：百度、360、搜狗、必应、有道、搜搜、头条搜索 -- **国际搜索引擎**：Google、Bing、Yahoo -- **社交媒体爬虫**：Facebook、Twitter、LinkedIn、WhatsApp等 - -你可以根据需要添加或修改爬虫模式： - -```javascript -// 在crawler-detector.js中添加新的爬虫模式 -this.crawlerPatterns.push('your-custom-bot') -``` - -### 路由到模板映射 - -在 `middleware.js` 中配置路由与模板的对应关系： - -```javascript -this.routeTemplateMap = { - '/': 'index.html', - '/agent': 'agent.html', - // 添加新的路由映射 - '/new-route': 'new-template.html' -} -``` - -### 模板生成配置 - -**推荐**：页面 SEO 以 `src/composables/useSEO.js` 为唯一来源；修改标题/描述/关键词时只改 `useSEO.js` 中的 `routeConfigs`，然后同步到服务端： - -- 在 `server/generate-seo-templates.cjs` 的 `pageSEOConfigs` 中保持与 `useSEO.js` 一致（含新增路由与 `BASE_URL`）。 -- 在 `server/middleware.js` 的 `routeTemplateMap` 中为新路由添加映射。 -- 若用 Nginx，在对应 conf 的 `$seo_file` 中增加 `if ($uri = '/新路径') { set $seo_file 新模板.html; }`。 - -新增页面示例（`generate-seo-templates.cjs`）： - -```javascript -'new-template.html': { - title: '页面标题', - description: '页面描述', - keywords: '关键词1,关键词2', - url: 'https://www.tianyuandb.com/new-route' -} -``` - -## 📝 自定义模板 - -### 修改模板样式 - -编辑 `generate-seo-templates.js` 中的 `generateHTMLTemplate` 函数： - -```javascript -function generateHTMLTemplate(config) { - return ` - - - - - - - - - ` -} -``` - -### 添加结构化数据 - -模板已包含基本的结构化数据（JSON-LD格式），如需扩展： - -```javascript -const structuredData = { - "@context": "https://schema.org", - "@type": "WebPage", - // 添加更多字段 - "breadcrumb": { - "@type": "BreadcrumbList", - "itemListElement": [...] - } -} -``` - -## 🧪 验证SEO效果 - -### 使用在线工具 - -1. **百度资源平台**：https://ziyuan.baidu.com/ -2. **Google Search Console**：https://search.google.com/search-console -3. **必应网站管理员工具**：https://www.bing.com/webmasters - -### 使用命令行工具与检测脚本 - -```bash -# 本地/线上 SEO 检测（会请求爬虫 UA 与普通 UA） -cd server -SEO_TEST_URL=http://localhost:3000 node test-seo.js -# 或线上：SEO_TEST_URL=https://www.tianyuandb.com node test-seo.js -``` - -```bash -# 查看爬虫看到的标题 -curl -s -A "Baiduspider/2.0" https://www.tianyuandb.com/ | grep -o '.*' - -# 检查 meta 与 canonical -curl -s -A "Googlebot" https://www.tianyuandb.com/ | grep -E '`、``、``、`` -- 用 **普通浏览器 UA** 再请求一遍，确认仍是 200（SPA 正常） - -全部通过即说明：爬虫拿到的是 SEO 模板，普通用户拿到的是 SPA。 - ---- - -## 二、用 curl 手动检测 - -在服务器已启动的前提下，在终端执行： - -### 爬虫应拿到“带 TDK 的 HTML” - -```bash -# 模拟百度爬虫请求首页 -curl -s -A "Baiduspider/2.0" http://localhost:3000/ | findstr /i "title description keywords canonical" -``` - -应能看到包含「天远数据」的 title，以及 description、keywords、canonical 等标签。 - -**Windows 下中文乱码说明**：服务器返回的是 UTF-8，CMD 默认是 GBK，直接 `curl … | findstr` 会看到乱码（如 `澶╄繙鏁版嵁`）或出现 “FINDSTR: 写入错误”。可任选一种方式解决： - -```cmd -:: 方式 1：先切到 UTF-8 再执行（CMD） -chcp 65001 -curl -s -A "Baiduspider/2.0" https://www.tianyuandb.com/ | findstr /i "title description" -``` - -```powershell -# 方式 2：PowerShell 下指定输出编码 -[Console]::OutputEncoding = [System.Text.Encoding]::UTF8 -curl -s -A "Baiduspider/2.0" https://www.tianyuandb.com/ | Select-String -Pattern "title|description" -``` - -```cmd -:: 方式 3：保存到文件后用编辑器打开（任意编码都行） -curl -s -A "Baiduspider/2.0" https://www.tianyuandb.com/ -o seo-test.html -:: 用记事本/VSCode 打开 seo-test.html，选 UTF-8 即可看到正确中文 -``` - -```bash -# 看完整 HTML 前几行（含 ） -curl -s -A "Baiduspider/2.0" http://localhost:3000/ | more -``` - -### 普通用户应拿到 SPA（一般是带 script 的 index.html） - -```bash -# 不带爬虫 UA，相当于普通浏览器 -curl -s http://localhost:3000/ | findstr /i "script root app" -``` - -通常会有 `id="app"` 或大量 `