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

本贴最后更新于 2127 天前,其中的信息可能已经时异事殊

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

  • SEO

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

    35 引用 • 200 回帖 • 15 关注
  • 前端

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

    247 引用 • 1347 回帖
  • 后端
    44 引用 • 126 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    7929 引用 • 36268 回帖 • 169 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • lizhongyue248 2 2 赞同

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

    1. PreRender 方式:预先渲染好 HTML,并针对于爬虫返回特定的 HTML
    2. ssr 方式,比如 vue 的 sst 解决方案
    3. 一动一静方式:提供两套前端,针对爬虫使用静态,针对用户使用动态。不过比较麻烦,而且现在 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 回复
  • 好的,明白了

EvilCodes
我的世界,我的代码,我的逻辑。

推荐标签 标签

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 402 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    131 引用 • 1114 回帖 • 131 关注
  • 前端

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

    247 引用 • 1347 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 740 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖 • 1 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 561 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 383 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 478 关注
  • SEO

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

    35 引用 • 200 回帖 • 15 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 17 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 505 关注
  • OnlyOffice
    4 引用 • 1 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 18 关注
  • 996
    13 引用 • 200 回帖 • 2 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    728 引用 • 1326 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 4 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 335 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖 • 1 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 212 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 4 关注