为什么说前后端分离不利于 SEO，分离之后又是通过那些方案解决 SEO 这种问题的呢？
为什么说前后端分离不利于 SEO 了？
本贴最后更新于 1934 天前，其中的信息可能已经时异事殊
相关帖子
-
- 其他回帖
-
lizhongyue248 • • 2 • 2 赞同
我来说说我的理解吧。
第一个问题，为什么不利于 seo。
前后端分离之前，我们都是在服务端渲染好了 html 页面再传过来，数据都已经在后端渲染在页面上了，爬过来的页面都是拥有数据的，所以利于搜索引擎蜘蛛爬取。如果前后端分离，你一开始请求的页面可能并没有你的数据，然后通过你请求出来的页面向后端发送请求，获取到数据以后，动态加载显示到页面上，这个时候搜索引擎蜘蛛想要爬到数据，就要有执行 JavaScript 的能力（google 的好像已经有了）。举个例子，最常见的 ajax 请求，页面加载的时候，ajax 请求到数据，然后加载 dom 等，如果搜索引擎蜘蛛不执行 ajax，那么可能爬的页面就没有数据了，只是一个空页面。现在是大部分的搜索引擎都不具备执行 JavaScript 的能力的。
第二个问题，如何解决？- PreRender 方式：预先渲染好 HTML，并针对于爬虫返回特定的 HTML
- ssr 方式，比如 vue 的 sst 解决方案，
- 一动一静方式：提供两套前端，针对爬虫使用静态，针对用户使用动态。不过比较麻烦，而且现在 google 的已经可以模拟用户访问了。
1 回复 -
lizhongyue248 • • 1 赞同
我是这样理解你的意思的，提供了一套拥有默认值静态的页面，然后动态加载改变。搜索引擎爬到的也就是你的静态页面（默认值的），就和我说的第三种一动一静的方式类似了。
但是对于 vue 设置默认值肯定是不能解决的，你将 vue 应用打包后查看他的 index.html 你会发现是个空页面，例如：
<!DOCTYPE html> <html lang=en> <head\> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <link rel=icon href=/favicon.ico> <title>help-teacher</title> <link href=/js/about.6f585aad.js rel=prefetch> <link href=/css/app.c9c62653.css rel=preload as=style><link href=/js/app.8741d55b.js rel=preload as\=script> <link href=/js/chunk-vendors.c3474500.js rel=preload as=script> <link href=/css/app.c9c62653.css rel=stylesheet> </head> <body> <noscript> <strong>We're sorry but help-teacher doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id=app> </div> <script src=/js/chunk-vendors.c3474500.js></script> <script src=/js/app.8741d55b.js></script> </body> </html>所以即便你使用 vue{{data}} 设置默认值，他也是需要执行 js 加载的，这个时候爬虫爬到的也不过是上面那个空页面。对于 vue 而言设置默认值肯定是不能够解决的。
1 回复 -
问一下，如果页面原本需要 js 加载的地方，预写默认数据 必须 vue {{data}} ,给这个 data 默认值，加载以后，再覆盖默认值，再想办法让这个默认值 隐藏掉，能解决这个问题吗？只是好奇乱想到的
1 回复
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于