登录 注册

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

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

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

  • SEO

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

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

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

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

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

    7549 引用 • 34356 回帖 • 197 关注
30 悬赏
2 关注
1 收藏
4 回帖
2
2
3.0k 135 564 377 1 446 193 10 198 1.0k

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 回复
  • 其他回帖
  • lizhongyue248 • • 2 • 2 赞同
    订阅者

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

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

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

    1 回复
  • someone9891 •
    捐赠者

    好的，明白了

EvilCodes
我的世界，我的代码，我的逻辑。
回帖
116
 帖子
112
 积分
3508

近期热议

推荐标签 标签

  • 工具

    子曰：“工欲善其事，必先利其器。”

    285 引用 • 728 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 130 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 2 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 3 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    11 引用 • 90 回帖 • 1 关注
  • GitBook

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

    3 引用 • 8 回帖 • 1 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 9 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 454 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 499 关注
  • Git

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

    207 引用 • 358 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • OnlyOffice
    4 引用 • 7 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 5 关注
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 246 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    5 引用 • 13 回帖 • 2 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    21201 引用 • 83545 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    344 引用 • 1778 回帖 • 1 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 257 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 454 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 634 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 6 关注
  • V2EX

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

    17 引用 • 236 回帖 • 343 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖

最新标签