"为什么说前后端分离不利于 SEO,分离之后又是通过那些方案解决 SEO 这种问题的呢?"

为什么说前后端分离不利于 SEO 了?

为什么说前后端分离不利于 SEO,分离之后又是通过那些方案解决 SEO 这种问题的呢?

  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    19 引用 • 118 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    169 引用 • 1195 回帖
  • 后端
    30 引用 • 95 回帖 • 1 关注
  • Q&A

    提问之前请先看一下这篇文章 《提问的智慧》精读注解版,好的问题比好的答案更有价值。

    930 引用 • 5821 回帖 • 607 关注
感谢    关注    收藏    赞同    反对    举报    分享
优质回帖
  • lizhongyue248   2 感谢  

    我来说说我的理解吧。 第一个问题,为什么不利于 seo。 前后端分离之前,我们都是在服务端渲染好了 html 页面再传过来,数据都已经在后端渲染在页面上了,爬过来的页面都是拥有数据的,所以利于搜索引擎蜘蛛爬取。如果前后端分离,你一开始请求的页面可能并没有你的数据,然后通过你请求出来的页面向后端发送请求,获取到数据以后,动态加载显示到页面上,这个时候搜索引擎蜘蛛想要爬到数据,就要有执行 JavaScript 的能力(google 的好像已经有了)。举个例子,最常见的 ajax 请求,页面加载的时候,ajax 请求到数据,然后加载 dom 等,如果搜索引擎蜘蛛不执行 ajax,那么可能爬的页面就没有数据了,只是一个空页面。现在是大部分的搜索引擎都不具备执行 JavaScript 的能力的。 第二个问题,如何解决?

    1. PreRender 方式:预先渲染好 HTML,并针对于爬虫返回特定的 HTML
    2. ssr 方式,比如 vue 的 sst 解决方案
    3. 一动一静方式:提供两套前端,针对爬虫使用静态,针对用户使用动态。不过比较麻烦,而且现在 google 的已经可以模拟用户访问了。
    点击展开回帖内容
  • lizhongyue248  

    我是这样理解你的意思的,提供了一套拥有默认值静态的页面,然后动态加载改变。搜索引擎爬到的也就是你的静态页面(默认值的),就和我说的第三种一动一静的方式类似了。

    但是对于 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 而言设置默认值肯定是不能够解决的。

    点击展开回帖内容
4 回帖    
请输入回帖内容...
  • lizhongyue248   2 感谢      

    我来说说我的理解吧。 第一个问题,为什么不利于 seo。 前后端分离之前,我们都是在服务端渲染好了 html 页面再传过来,数据都已经在后端渲染在页面上了,爬过来的页面都是拥有数据的,所以利于搜索引擎蜘蛛爬取。如果前后端分离,你一开始请求的页面可能并没有你的数据,然后通过你请求出来的页面向后端发送请求,获取到数据以后,动态加载显示到页面上,这个时候搜索引擎蜘蛛想要爬到数据,就要有执行 JavaScript 的能力(google 的好像已经有了)。举个例子,最常见的 ajax 请求,页面加载的时候,ajax 请求到数据,然后加载 dom 等,如果搜索引擎蜘蛛不执行 ajax,那么可能爬的页面就没有数据了,只是一个空页面。现在是大部分的搜索引擎都不具备执行 JavaScript 的能力的。 第二个问题,如何解决?

    1. PreRender 方式:预先渲染好 HTML,并针对于爬虫返回特定的 HTML
    2. ssr 方式,比如 vue 的 sst 解决方案
    3. 一动一静方式:提供两套前端,针对爬虫使用静态,针对用户使用动态。不过比较麻烦,而且现在 google 的已经可以模拟用户访问了。
    点击展开回帖内容
    1 回复
       感谢    赞同 1    反对    举报    折叠    分享       评论    回复
  • gitors            

    问一下,如果页面原本需要 js 加载的地方,预写默认数据 必须 vue {{data}} , 给这个 data 默认值,加载以后,再覆盖默认值,再想办法让这个默认值 隐藏掉,能解决这个问题吗?只是好奇乱想到的

    点击展开回帖内容
    1 回复
       感谢    赞同    反对    举报    折叠    分享       评论    回复
  • lizhongyue248            

    我是这样理解你的意思的,提供了一套拥有默认值静态的页面,然后动态加载改变。搜索引擎爬到的也就是你的静态页面(默认值的),就和我说的第三种一动一静的方式类似了。

    但是对于 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 回复
       感谢    赞同 1    反对    举报    折叠    分享       评论    回复
  • gitors            

    好的,明白了

    点击展开回帖内容
       感谢    赞同    反对    举报    折叠    分享       评论    回复