为什么说前后端分离不利于 SEO,分离之后又是通过那些方案解决 SEO 这种问题的呢?
为什么说前后端分离不利于 SEO 了?
相关帖子
-
lizhongyue248 • • 2 • 2 赞同
我来说说我的理解吧。
第一个问题,为什么不利于 seo。
前后端分离之前,我们都是在服务端渲染好了 html 页面再传过来,数据都已经在后端渲染在页面上了,爬过来的页面都是拥有数据的,所以利于搜索引擎蜘蛛爬取。如果前后端分离,你一开始请求的页面可能并没有你的数据,然后通过你请求出来的页面向后端发送请求,获取到数据以后,动态加载显示到页面上,这个时候搜索引擎蜘蛛想要爬到数据,就要有执行 JavaScript 的能力(google 的好像已经有了)。举个例子,最常见的 ajax 请求,页面加载的时候,ajax 请求到数据,然后加载 dom 等,如果搜索引擎蜘蛛不执行 ajax,那么可能爬的页面就没有数据了,只是一个空页面。现在是大部分的搜索引擎都不具备执行 JavaScript 的能力的。
第二个问题,如何解决?- PreRender 方式:预先渲染好 HTML,并针对于爬虫返回特定的 HTML
- ssr 方式,比如 vue 的 sst 解决方案,
- 一动一静方式:提供两套前端,针对爬虫使用静态,针对用户使用动态。不过比较麻烦,而且现在 google 的已经可以模拟用户访问了。
1 回复 -
问一下,如果页面原本需要 js 加载的地方,预写默认数据 必须 vue {{data}} ,给这个 data 默认值,加载以后,再覆盖默认值,再想办法让这个默认值 隐藏掉,能解决这个问题吗?只是好奇乱想到的
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 回复 -
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于