浅谈前后端分离系统的SEO优化

2026年4月27日 10:03 37 条评论

开发一个系统，不管是从头开始，还是在已有系统上二次开发，从来都不是一蹴而就的事情。在上线以前总觉得已经做够了足够的测试，但是在上线之后还是会出现各种各样的问题。

有的问题，如果是新系统完全可以避免，正是由于是在已有系统上开发的为了兼容wp才会引入一系列的问题，这类问题主要是wp原生的一些机制兼容问题导致的包括但不限于：

1.wp固定连接的兼容

2.shortcode的解析处理

3.wp资源文件与新系统资源文件的路径兼容处理

4.wp启用插件的功能实现，邮件通知、micro-post、邮件发送、邮件模板等等

5.其他的未知问题

也有一部分是新系统天生的缺陷：seo不友好，搜索引擎爬虫无法获取网页内容，毕竟robot不会执行js，这个是前后端分离系统的必然缺陷。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      href="https://zhongxiaojie.cn/wp-content/uploads/2026/01/uugai.com-166111691272754-100x100.png"
      sizes="32x32"
    />
    <link
      rel="icon"
      href="https://zhongxiaojie.cn/wp-content/uploads/2026/01/uugai.com-166111691272754-200x200.png"
      sizes="192x192"
    />
    <link
      rel="apple-touch-icon"
      href="https://zhongxiaojie.cn/wp-content/uploads/2026/01/uugai.com-166111691272754-200x200.png"
    />
    <meta
      name="msapplication-TileImage"
      content="https://zhongxiaojie.cn/wp-content/uploads/2026/01/uugai.com-166111691272754-300x300.png"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="爱好广泛的女王 独立APP开发者 AI修理师 爬虫砖家 逆向工程师 人工智能 全栈工程师"
    />
    <meta
      name="keywords"
      content="人工智能,机器学习,ml,逆向分析,信息安全,物联网,ida,uniapp,python,爬虫,妹子图,秀人集,java,vue"
    />
    <meta
      name="theme-color"
      content="#ff4f87"
    />
    <link
      rel="manifest"
      href="/manifest.json"
    />
    <link
      rel="stylesheet"
      href="/vendor/enlighterjs.min.css"
    />
    <link
      rel="stylesheet"
      href="/vendor/simple-microblogging.css"
    />
    <title>obaby 𝐢‍𝐧⃝ void - 程序媛 / 独立开发者 / 智商不稳定的女神经</title>
    <script type="module" crossorigin src="/assets/index-DFHpxK1A.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CKljzL1r.css">
  </head>
  <body>
    <div id="app"></div>
    <script
      defer
      src="/vendor/enlighterjs.min.js"
    ></script>
    <script defer src="/vendor/obaby.js"></script>

  </body>
</html>

当然有人会比较在意这个东西，不是说这个东西不对。可能是自己没那么在乎吧，之前就曾经收到过数次关于seo友链不显示的问题，上次是搞页面静态化。

其实，在我的博客添加的友链，也并不是全部都不显示，毕竟还有其他的域名，zhongxiaojie.com 以及 oba.by等还是会显示完整的友链信息，这两个域名并没有切换到新的前后端分离的系统。所以，我博客的友链，相当于数个站都给友链做了多次链接，我不知道这个东西对于seo有没有作用，至于是有好处，还是有坏处，我并不清除，我自己并不是那么关注所谓的seo。如果觉得这样反而会出问题的，欢迎反馈，我会及时删除相关链接哈。

当然，这个东西有办法解决吗？答案自然是有，至于解决方法，那就是继续回归服务器渲染。

这解决方案真的是简单粗暴啊，合着这折腾来折腾去，又要弄回服务器渲染，这辛辛苦苦四十年，一夜回到解放前？

采用这种简单粗暴的方法来解决seo问题，显示不是本仙女的作风。既然是针对搜索引擎的，那就直接对搜索引擎做单独的处理就完了。检测ua，如果是收缩引起的ua返回服务器渲染之后的内容，如果是正常浏览（搜索引擎爬虫意外的ua）返回前后端分离的内容。

要实现服务器渲染，基于vue的可以参考nuxt.js(百度百科):

Nuxt.js是由NuxtLabs团队于2016年10月推出的基于Vue.js的开源Web框架，采用MIT License授权。该框架灵感来源于Next.js，Nuxt采用了约定俗成的规范以及一种明确的目录结构，以实现对重复性任务的自动化处理，并使开发人员能够专注于推进新功能的开发。^[2]^[5]^[8]。

Nuxt默认内置服务器端渲染（SSR）功能、支持静态站点生成（SSG）和单页面应用（SPA）三种部署模式，可通过”nuxt generate”命令生成预渲染HTML文件实现静态化部署^[5]^[7]。采用模块化架构提供50多个扩展模块，支持TypeScript类型安全、推送和现代化开发工具链^[4]^[6]。

接下来也就简单了，创建nuxt项目，实现与frontend同样的页面路由和相关的页面文件布局。接口可以直接复用当前的接口，

配置openresty的处理逻辑：

# -----------------------------------------------------------------------------
# Dynamic Rendering（SEO）：爬虫 UA → Nuxt SSR；普通用户 → 现有 SPA
# - Nuxt SSR 服务建议监听 127.0.0.1:3000（可按需调整）
# - ?__ssr=1 可强制走 SSR（方便自测/排障）
# - 仅对“页面路由”生效，不影响 /assets、/vendor、/bp-api、WP 后台等
# -----------------------------------------------------------------------------
set $bp_force_ssr 0;
if ($arg___ssr = "1") {
    set $bp_force_ssr 1;
}

set $bp_is_bot 0;
if ($http_user_agent ~* "(googlebot|bingbot|baiduspider|yandexbot|duckduckbot|slurp|sogou|360spider|bytespider|petalbot|facebookexternalhit|twitterbot|rogerbot|ahrefsbot|semrushbot|mj12bot)") {
    set $bp_is_bot 1;
}

location @nuxt_ssr {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Uri $request_uri;
}

# 418 跳转技巧：在页面路由里 return 418 → error_page 转到 @nuxt_ssr
error_page 418 = @nuxt_ssr;

启动之后就可以查看服务器渲染的页面了：

当然，这个实现方法的缺点就是得完全复刻frontend的相关路由和页面，优点就是不用关注原来的系统实现逻辑，哪怕爬虫seo系统出问题也不会影响现有的系统运行。

博客： obaby 𝐢‍𝐧⃝ void

地址： https://zhongxiaojie.com/

文章： 《浅谈前后端分离系统的SEO优化》

obaby

独立 APP 开发者偶尔写点东西希望与过往一刀两断

37 comments

東风说道：

2026年4月27日 10:38 上午

Google Chrome 147.0.0.0 Windows 10 x64 Edition 中国–北京–北京新国信通信有限公司
前端都用框架了，直接一步到位SSG托管得了。

回复
1. obaby说道：
  
  2026年4月27日 10:45 上午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  不大喜欢这种静态页面生成逻辑，改了东西还得再跑一遍生成。嘎嘎。
  
  回复
  1. 東风说道：
    
    2026年4月27日 11:01 上午
    
    Google Chrome 147.0.0.0 Windows 10 x64 Edition 中国–江苏省–南京市–溧水区–中国联通–3GNET网络
    还好吧，action自动构建又不用自己打包！另外你的#app内空空如也是不是被NUXT的Fallback机制给回退了我记得以前写的时候也出现过这种情况，
    
    回复
    1. obaby说道：
      
      2026年4月27日 11:11 上午
      
      Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
      #app 哪个地方？没注意呢
      
      回复
小彦说道：

2026年4月27日 10:44 上午

Firefox 140.0 GNU/Linux x64 中国–广东省–珠海市–香洲区–中国电信–CTNET网络
还是要借用 nuxt.js 来做服务器渲染么，我也想过，但是要换框架，改代码唉~

回复
1. obaby说道：
  
  2026年4月27日 10:48 上午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  我这个是独立运行的，只给搜索引擎用，不影响现有的系统。
  
  回复
acevs说道：

2026年4月27日 10:57 上午

Microsoft Edge 142.0.0.0 Windows 11 x64 Edition 中国–山东省–青岛市–城阳区–中国联通–公众宽带
这是个插件？

回复
1. obaby说道：
  
  2026年4月27日 11:11 上午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  组件，不算插件
  
  回复
爱看说道：

2026年4月27日 1:24 下午

Google Chrome 109.0.0.0 Windows 10 x64 Edition 中国–上海–上海腾讯云
什么都难不倒我们灵妹妹

回复
1. obaby说道：
  
  2026年4月27日 2:58 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  嘻嘻
  
  回复
花非花说道：

2026年4月27日 1:46 下午

Google Chrome 147.0.0.0 Windows 11 x64 Edition 中国–江苏移动
开发这种事，感觉总会有新的需求和问题出来，然后就是再一遍的修改

回复
1. obaby说道：
  
  2026年4月27日 2:58 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  是啊，一旦开始了之后，需求就越来越多
  
  回复
崔话记说道：

2026年4月27日 2:05 下午

Google Chrome 147.0.0.0 Windows 10 x64 Edition 中国–广东–深圳电信
不考虑彻底分离，pjax 也是一种轻量解决方案，可以在不换框架的情况下兼顾前端性能与SEO 。
这个头图很有诱惑力啊

回复
1. obaby说道：
  
  2026年4月27日 2:58 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  pjax 这个没用过，找时间了解下。
  图片喜欢就行啦。
  
  回复
棋说道：

2026年4月27日 2:29 下午

Google Chrome 147.0.0.0 Windows 11 x64 Edition 中国–辽宁–沈阳–沈河区电信
还有骨架屏，真不错啊，这个应该是前后端分离最好的优化首屏加载的方式了

回复
1. 棋说道：
  
  2026年4月27日 2:37 下午
  
  Google Chrome 147.0.0.0 Windows 11 x64 Edition 中国–辽宁–沈阳–沈河区电信
  咋和我一样用nuxt了
  
  回复
  1. obaby说道：
    
    2026年4月27日 2:57 下午
    
    Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
    我就是纯粹因为菜，找了个能看懂的办法来解决问题。
    
    回复
2. obaby说道：
  
  2026年4月27日 2:57 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  嗯嗯，我也觉得暂时也就这样了，这个地方没想到什么别的优化方法了。
  
  回复
林羽凡说道：

2026年4月27日 2:43 下午

Firefox 150.0 Windows 10 x64 Edition 中国–甘肃省–兰州市–城关区–中国移动–公众宽带
几个月前好像是React还是哪个，因为服务器渲染出了很大的Bug，影响非常广泛。

回复
1. obaby说道：
  
  2026年4月27日 2:56 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  react也有独立的服务器渲染组件。所以怎么说呢，十年河东十年河西，以前都是前后端分离，现在又开始搞服务器渲染了。
  我这也算逆势而为了。
  
  回复
倦意说道：

2026年4月27日 3:34 下午

Microsoft Edge 147.0.0.0 Android 10 中国–江西省–九江市–德安县–中国联通–3GNET网络
既然都前后端分离了感觉就彻底脱离WordPress算了，数据迁移也不是什么很复杂的事情。

回复
1. obaby说道：
  
  2026年4月27日 3:56 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  没太大动力，管理后台开发比前端开发复杂多了。
  
  回复
Vind说道：

2026年4月27日 3:52 下午

Google Chrome 148.0.0.0 Windows 11 x64 Edition 中国–中国广播电视网络有限公司
好用就行，关键是文档和快速。我觉得非商业推广类的网站，比如我们这些个人博客，其实SEO并没有太多意义。我也不关注SEO。

回复
1. obaby说道：
  
  2026年4月27日 3:56 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  是的，seo这个东西，现在感觉即使关注也难有什么作为。
  
  回复
J.sky说道：

2026年4月27日 5:10 下午

Google Chrome 147.0.0.0 GNU/Linux x64 中国–辽宁–朝阳–北票市电信
纯html结构的SEO基本上没啥问题，尽可能的生成原生的HTML 就好了。

回复
J.sky说道：

2026年4月27日 5:11 下午

Google Chrome 147.0.0.0 GNU/Linux x64 中国–辽宁–朝阳–北票市电信
要不是因为wordpress有个不错的后台，估计大部分人早换程序了。

回复
1. obaby说道：
  
  2026年4月27日 6:12 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  是的，wp的后台还是不错的。主要也是用习惯了。
  
  回复
皮皮社长说道：

2026年4月27日 5:32 下午

Google Chrome 131.0.6778.200 Android 16 中国–湖南省–永州市–道县–中国联通–3GNET网络
钟小姐的博客越来越好了，能不能优化一下表情按钮，单次点击不会弹窗的，要按到不放才会弹出窗口。不知道是不是专门这样设计的

回复
1. obaby说道：
  
  2026年4月27日 6:14 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  尝试强制刷新试试
  
  回复
2. obaby说道：
  
  2026年4月27日 6:15 下午
  
  Google Chrome 147.0.0.0 Mac OS X 26.4 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  有个版本的确有问题，不过后来修复啦。
  https://zhongxiaojie.cn/wp-content/uploads/2026/04/Jietu20260427-181128-HD.mp4
  
  回复
Hary说道：

2026年4月27日 6:10 下午

Microsoft Edge 147.0.0.0 Android 10 中国–安徽省–中国电信–公众宽带
看不懂的技术文章，默默打个卡，滴～

回复
1. obaby说道：
  
  2026年4月27日 6:12 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  滴，学生卡
  
  回复
  1. Hary说道：
    
    2026年4月27日 6:14 下午
    
    Microsoft Edge 147.0.0.0 Android 10 中国–安徽省–中国电信–公众宽带
    话说，我评论过之后，是看不到我这个评论的，就是不像YP或者WP那样，自己能看到，然后上面显示个待审核么，不然我不知道是不是提交成功了
    
    回复
    1. obaby说道：
      
      2026年4月27日 6:17 下午
      
      Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
      下面有个提示，有的可能会需要审核哈。（会走评论检测）
      
      回复
      1. Hary说道：
        
        2026年4月27日 6:18 下午
        
        Microsoft Edge 147.0.0.0 Android 10 中国–安徽省–中国电信–公众宽带
        哦，原来在这
      2. obaby说道：
        
        2026年4月27日 6:20 下午
        
        Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
        提示的确是不太明显，嘎嘎
2. obaby说道：
  
  2026年4月27日 6:13 下午
  
  Google Chrome 146.0.0.0 Mac OS X 10.15.7 中国–山东省–青岛市–崂山区–中国联通–3GNET网络
  有个版本的确有问题，不过后来修复啦。
  https://zhongxiaojie.cn/wp-content/uploads/2026/04/Jietu20260427-181128-HD.mp4
  
  回复