team/xfc_webview_V2

Fork 0

Files

Mrx b8defa47ab f

2026-02-28 15:43:14 +08:00

7.9 KiB

Raw Blame History

SPA SEO 优化解决方案

📋 方案概述

针对SPA应用SEO问题，采用爬虫检测 + 静态HTML回退方案：

爬虫检测：识别搜索引擎爬虫（百度、Google、必应、搜狗等）
静态HTML：为爬虫提供预渲染的HTML模板，包含完整的TDK信息
正常用户：继续使用SPA应用，体验不受影响

🏗️ 项目结构

server/
├── crawler-detector.js              # 爬虫检测模块
├── middleware.js                    # SEO中间件（Express/Koa）
├── generate-seo-templates.js        # SEO模板生成器
├── server-example-express.js        # Express服务器示例
├── nginx-seo.conf                   # Nginx配置示例
└── README-SEO.md                    # 本文档

public/
└── seo-templates/                   # SEO静态模板目录
    ├── index.html                   # 首页模板
    ├── agent.html                   # 代理页模板
    ├── help.html                    # 帮助中心模板
    ├── inquire-personalData.html     # 个人查询模板
    └── ...                          # 其他页面模板

🚀 快速开始

步骤1：生成SEO模板

cd server
node generate-seo-templates.js

这会在 public/seo-templates/ 目录下生成所有页面的静态HTML模板。

步骤2：集成到你的服务器

选项A：使用Express服务器

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

# 复制nginx配置文件
cp server/nginx-seo.conf /etc/nginx/sites-available/xingfucha

# 修改配置中的路径
nano /etc/nginx/sites-available/xingfucha

# 启用站点
ln -s /etc/nginx/sites-available/xingfucha /etc/nginx/sites-enabled/

# 重启Nginx
nginx -t && systemctl restart nginx

选项C：使用Koa

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：测试爬虫检测

# 模拟百度爬虫
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等

你可以根据需要添加或修改爬虫模式：

// 在crawler-detector.js中添加新的爬虫模式
this.crawlerPatterns.push('your-custom-bot')

路由到模板映射

在 middleware.js 中配置路由与模板的对应关系：

this.routeTemplateMap = {
    '/': 'index.html',
    '/agent': 'agent.html',
    // 添加新的路由映射
    '/new-route': 'new-template.html'
}

模板生成配置

在 generate-seo-templates.js 中配置每个页面的SEO信息：

const pageSEOConfigs = {
    'new-template.html': {
        title: '页面标题',
        description: '页面描述',
        keywords: '关键词1,关键词2,关键词3',
        url: 'https://www.xingfucha.cn/new-route'
    }
}

📝 自定义模板

修改模板样式

编辑 generate-seo-templates.js 中的 generateHTMLTemplate 函数：

function generateHTMLTemplate(config) {
    return `<!DOCTYPE html>
    <html>
    <head>
        <!-- 头部信息 -->
        <style>
            /* 自定义样式 */
            body { ... }
        </style>
    </head>
    <body>
        <!-- 自定义内容 -->
    </body>
    </html>`
}

添加结构化数据

模板已包含基本的结构化数据（JSON-LD格式），如需扩展：

const structuredData = {
    "@context": "https://schema.org",
    "@type": "WebPage",
    // 添加更多字段
    "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [...]
    }
}

🧪 验证SEO效果

使用在线工具

百度资源平台：https://ziyuan.baidu.com/
Google Search Console：https://search.google.com/search-console
必应网站管理员工具：https://www.bing.com/webmasters

使用命令行工具

# 查看网页源代码
curl -A "Baiduspider" http://www.xingfucha.cn/ | grep -o '<title>.*</title>'

# 检查meta标签
curl -A "Googlebot" http://www.xingfucha.cn/ | grep -E '<meta name="description"|<meta name="keywords"'

# 检查结构化数据
curl -A "Baiduspider" http://www.xingfucha.cn/ | grep -A 20 'application/ld+json'

📊 维护建议

定期更新爬虫列表

搜索引擎爬虫的User-Agent可能会更新，建议定期检查并更新：

百度：https://ziyuan.baidu.com/spider/
Google：https://support.google.com/webmasters/answer/1061943

保持模板内容同步

当页面内容更新时，重新生成SEO模板：

cd server
node generate-seo-templates.js

或者设置定时任务自动更新：

# 添加到crontab（每小时更新一次）
0 * * * * cd /path/to/xfc_webview_V2/server && node generate-seo-templates.js

监控爬虫访问

在服务器日志中监控爬虫访问情况：

# 查看百度爬虫访问
grep "Baiduspider" /var/log/nginx/access.log

# 查看Google爬虫访问
grep "Googlebot" /var/log/nginx/access.log

🐛 常见问题

Q1: 爬虫访问的是SPA还是静态HTML？

检查响应头：

curl -I -A "Baiduspider" http://www.xingfucha.cn/

如果看到 X-SEOMiddleware: prerendered 或 X-SEOMiddleware: nginx-prerendered，说明返回的是静态HTML。

Q2: 如何调试爬虫检测？

启用调试模式：

const seoMiddleware = new SEOMiddleware({
    templateDir: 'public/seo-templates',
    debug: true // 查看详细日志
})

Q3: 模板内容如何更新？

修改 generate-seo-templates.js 中的配置，然后重新运行：

node generate-seo-templates.js

Q4: 如何处理动态内容？

静态模板只包含静态内容。如果需要包含动态数据，可以考虑：

预渲染服务：如 Prerender.io
服务端渲染：迁移到 Nuxt.js
混合方案：静态模板 + AJAX加载动态内容

Q5: 爬虫列表是否会误判？

如果某个用户被误判为爬虫，可以：

检查User-Agent是否包含爬虫关键词
在检测器中添加白名单
使用IP地址作为辅助判断

📚 参考资源

🆘 支持

如有问题，请检查：

模板目录是否存在：public/seo-templates/
模板文件是否生成：运行 node generate-seo-templates.js
服务器配置是否正确：检查中间件或Nginx配置
爬虫User-Agent是否匹配：查看检测器日志

📄 许可

本方案可自由使用和修改。

7.9 KiB Raw Blame History Unescape Escape