登录 注册

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

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

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

  • SEO

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

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

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

    246 引用 • 1338 回帖 • 1 关注
  • 后端
    44 引用 • 126 回帖 • 1 关注
  • Q&A

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

    9924 引用 • 45060 回帖 • 79 关注
30 悬赏
2 关注
1 收藏
4 回帖
2
2
3.0k 135 564 387 1 446 193 10 198 1.1k

相关帖子

4 回帖
为什么说前后端分离不利于 SEO 了？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • someone9891 • via macOS
    捐赠者

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

    1 回复
  • 其他回帖
  • someone9891 • via macOS
    捐赠者

    好的，明白了

  • lizhongyue248 • • 2 • 2 赞同 via Linux

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

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

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

    但是对于 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
我的世界，我的代码，我的逻辑。
回帖
118
 帖子
113
 积分
3543

近期热议

推荐标签 标签

  • OneNote
    1 引用 • 3 回帖 • 2 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 580 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 2 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 2 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 13 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    180 引用 • 3878 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 164 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 118 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 310 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 2 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 33 关注
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 118 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 560 关注
  • Lute

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

    29 引用 • 202 回帖 • 28 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • Postman

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

    4 引用 • 3 回帖 • 2 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    6 引用 • 143 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 3 关注
  • Anytype
    3 引用 • 31 回帖 • 24 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    167 引用 • 597 回帖 • 4 关注

最新标签