客户专线:400-139-3868移动手机:188-01291978
首页 我们 优势 服务 案例 联系
首页 >>观点 >> react支持seo吗?-js框架怎么做seo
react支持seo吗?-js框架怎么做seo
React驱动的单页应用(SPA)正在获得增长的势头。被Facebook、Twitter和Google等科技巨头使用,React可以构建快速、响应式和动画丰富的网站和网络应用,并提供流畅的用户体验。

然而,使用React(或任何其他现代JavaScript框架,如Angular、Vue或Svelte)创建的产品在搜索引擎优化方面的能力有限。如果一个网站主要通过网站内容和搜索营销来获取客户,这就成了一个问题。


幸运的是,React有几个现成的解决方案,可以帮助你在搜索引擎中实现可见性。下面我们就来谈谈它们。

但在我们深入探讨优化单页应用(SPA)的技术细节之前,让我们先处理一些有用的理论,以帮助你理解React网站中SEO的挑战。

什么是单页应用,为什么是React?
单页应用是一个网络应用,其内容是在一个单一的HTML页面中提供的。这个页面是动态更新的,但它不会在每次用户与它交互时完全重新加载。单页Web应用的客户端不是为每次交互向服务器发送新的请求,然后接收一个包含新内容的全新页面,而是只请求和加载需要更新的数据。

Facebook、Twitter、Netflix、Trello、Gmail和Slack都是单页应用的例子。

开发者的角度来看,SPA将表现层(前端)和数据层(后端)分开,因此两个团队可以并行开发这些部分。此外,与多页应用相比,使用SPA,更容易扩展和使用微服务架构。

另请阅读 单页应用VS多页Web应用。网页开发该如何选择

从用户的角度来看,单页应用提供了与Web应用的无缝交互。另外,这些应用程序可以在本地存储中缓存数据,这意味着它们在第二次加载时会更快。

在构建SPA时,开发者可以使用其中一个流行的JavaScript框架。React、Angular或Vue。在这三大框架中,React占据了首位。根据2019年JavaScript现状调查,React是最受欢迎的JavaScript框架。

由于React基于组件的架构,它很容易重用代码,并将一个大型应用划分为更小的部分。因此,维护和调试大型SPA项目比为大型多页面应用程序做同样的事情要容易得多。虚拟DOM保证了应用的高性能。此外,React库支持所有现代浏览器,包括其旧版本。

 

但是你可能已经猜到了,React也有缺点,其中最大的一个缺点就是缺乏对搜索引擎优化的友好性。

搜索引擎优化的原则
搜索引擎优化(SEO)是指通过提高网站在搜索引擎上的知名度来提高网站流量的质量和数量。

SEO的主要任务是当目标受众通过某个关键词搜索信息时,帮助网络应用在搜索引擎(Google、Bing)中获得排名。大多数SEO工作都集中在为谷歌优化应用程序。毕竟,根据StatCounter的数据,截止到2020年,谷歌拥有92.16%的搜索引擎市场份额。

根据Backlinko的数据,75%的用户点击都会流向搜索引擎结果中的前三名网站,而第二结果页及以后的网站只获得0.78%的点击。这也是为什么数字企业都在为登上搜索结果的第一页这个位置而疯狂奋斗的原因。

对于企业主来说,从网站应用开发之初就思考SEO优化策略,找到有效的技术栈至关重要。

为了确定一个网站在搜索结果中的排名,搜索引擎使用网络爬虫。网络爬虫是一个机器人,它定期访问网页,并根据搜索引擎设定的特定标准进行分析。每个搜索引擎都有自己的爬虫,谷歌的爬虫被称为谷歌机器人。

这就是爬虫的工作原理

Googlebot会逐个链接探索页面,收集网站新鲜度、内容独特性、反向链接数量等信息,下载HTML和CSS文件,并将这些数据全部发送到Google服务器。然后由一个叫Caffeine的系统进行分析和索引。这是一个全自动的过程,所以确保爬虫正确理解网站内容至关重要。而问题就出现在这里。

为搜索引擎优化单页应用(SPA)有什么问题?
通常情况下,单页应用程序在客户端加载页面:一开始,页面是一个空容器;然后JavaScript将内容推送到这个容器中。最简单的React应用的HTML文档可能看起来如下。
如你所见,除了<div>标签和一个外部脚本外,什么都没有。单页应用需要浏览器运行脚本,只有脚本运行后,内容才会动态加载到网页上。所以当爬虫访问网站时,看到的是一个没有内容的空页面。因此,该页面无法被索引。


2015年秋季,谷歌宣布他们的机器人也将检查网页的JavaScript和CSS,因此他们将能够像浏览器一样渲染和理解网页。这是个好消息,但SEO优化仍存在问题。 

长时间的延迟

如果页面上的内容经常更新,爬虫应该定期重新访问页面。这可能会导致问题,因为正如谷歌Chrome浏览器开发人员Paul Kinlan在Twitter上报告的那样,内容更新后可能一周后才会重新索引。

这种情况的发生是因为谷歌网络渲染服务(WRS)进入了游戏。在机器人下载了HTML、CSS和JavaScript文件后,WRS会运行JavaScript代码,从API中获取数据,之后才会将数据发送到谷歌的服务器。

抓取预算有限

抓取预算是指爬虫在一定时间内可以处理的网站上的最大网页数量。一旦这个时间到了,无论下载了多少页面(是26、3还是0),机器人都会离开网站。如果每个页面因为运行脚本而加载时间过长,机器人就会在索引之前直接离开你的网站。

说到其他搜索引擎,雅虎和必应的爬虫仍然会看到一个空页面,而不是动态加载的内容。所以,让你的基于React的SPA在这些搜索引擎上排名靠前.

你应该在设计应用架构的阶段就考虑如何解决这个问题。


解决这个问题
有几种方法可以使React应用对SEO友好:通过创建一个同构的React应用或使用prerendering。

同构的React应用
通俗地说,一个同构的JavaScript应用(或者在我们的例子中,一个同构的React应用)可以同时在客户端和服务器端运行。

得益于同构JavaScript,你可以运行React应用,并捕获通常由浏览器渲染的HTML文件。然后,这个HTML文件可以服务于每个请求网站的人(包括Googlebot)。

在客户端,应用程序可以使用这个HTML作为基础,并在浏览器中继续对其进行操作,就像它是由浏览器渲染的一样。当需要的时候,使用JavaScript添加额外的数据,因为一个同构的应用程序仍然是动态的。

一个同构应用定义了客户端是否能够运行脚本。当JavaScript关闭时,代码会在服务器上呈现,因此浏览器或机器人会获得所有元标签和HTML和CSS中的内容。

当JavaScript开启时,只有第一个页面在服务器上渲染,所以浏览器得到的是HTML、CSS和JavaScript文件。然后JavaScript开始运行,其余的内容被动态加载。得益于此,第一屏的显示速度更快,应用可以兼容旧版浏览器,而且与网站在客户端渲染时相比,用户交互更流畅。

构建一个同构应用真的很耗时。幸运的是,有一些框架可以促进这个过程。对于SEO来说,最流行的两个解决方案是Next.js和Gatsby。

Next.js是一个框架,它可以帮助你创建React应用,这些应用在服务器端快速生成,没有任何麻烦。它还可以实现自动代码分割和热代码重载。Next.js可以进行全面的服务器端渲染,这意味着当每个请求发出时,就会为每个请求生成HTML。

Gatsby是一个免费的开源编译器,可以让开发者做出快速而强大的网站。Gatsby不提供成熟的服务器端渲染。相反,它事先生成一个静态网站,并将生成的HTML文件存储在云端或托管服务上。让我们仔细看看它们的做法。

Gatsby vs Next.js

GatsbyJS框架的SEO挑战是通过生成静态网站来解决的。所有HTML页面都是在开发或构建阶段提前生成的,然后简单地加载到浏览器。它们包含静态数据,可以托管在任何托管服务或云端。这种网站的速度非常快,因为它们不是在运行时生成的,也不需要等待来自数据库或API的数据。

但数据只在构建阶段才会被获取。因此,如果你的Web应用有任何新内容,在运行另一次构建之前不会显示出来。


这种方法适用于不太频繁更新数据的应用程序,即博客。但如果你想构建一个加载数百条评论和帖子的Web应用(如论坛或社交网络),最好选择另一种技术。
傲来资讯

我们的客户

感恩所有客户 唯有尽心服务
互联网全品牌链服务:

成功案例

联系我们

电话: 全国 400-139-3868
北京 010-57023868
地址: 北京丰台纪家庙双创产业园R3栋
Copyright 2001-2021 傲来网络 | All Rights Reserved 京ICP备12005023号-2