当前位置: 首页>资讯中心>SEO优化>文章正文

JavaScript SEO:您需要了解的内容

发布时间:2020-11-04 17:24访问人数:来源:浪知潮网络

JavaScript SEO:您需要了解的内容

您是否知道,尽管大多数网站都是PHP或.NET提供后台支持,但这些网站的大部分都是由JavaScript(如React)提供前端支持的?

大多数网站使用某种JavaScript来增加交互性并改善用户体验。有些人将其用于菜单,获取产品或价格,从多个来源获取内容,或者在某些情况下,用于网站上的所有内容。当前网络的现实是JavaScript无处不在。

我们并不是说SEO人员需要学习如何编写JavaScript。相反,SEO最需要了解搜索引擎如何处理JavaScript以及如何解决问题。在极少数情况下,甚至不允许SEO触摸代码。我的这篇文章的目标是帮助您学习:

什么是JavaScript SEO?

JavaScript SEO是技术SEO的一部分,该技术旨在使包含JavaScript的网站易于爬网和建立索引,并且易于搜索。目标是在搜索引擎中找到这些网站并使其排名更高。

JavaScript对SEO不利吗?一点也不。它与许多SEO习惯不同,并且有一些学习曲线。人们确实倾向于在可能有更好解决方案的事情上过度使用它,但是您有时必须使用已有的东西。只是知道Javascript并不是完美的,它也不总是正确的工具。与HTML和CSS不同,它无法逐步解析,并且可能会严重影响页面负载和性能。在许多情况下,您可能会为了性能而牺牲效果。

搜索引擎如何使用JavaScript处理网页

在搜索引擎的早期,下载的HTML响应足以查看大多数页面的内容。由于JavaScript的兴起,搜索引擎现在需要呈现许多页面,就像浏览器一样,以便他们能够以用户的方式看到内容。

搜索引擎处理渲染过程的系统称为Web渲染服务(WRS)。搜索引擎提供了一个简单的图表来说明此过程的工作方式。

假设我们从URL开始该过程。

1.履带式

搜寻器将GET请求发送到服务器。服务器以标头和文件内容作为响应,然后将其保存。

该请求很可能来自移动用户代理,因为如今搜索引擎主要采用移动优先索引。您可以通过站长工具查看搜索引擎是如何抓取您的网站。

有些网站会阻止来自特定国家/地区或以不同方式使用特定IP的访问者,这可能会导致搜索引擎无法看到您的内容。

某些网站还可能使用用户代理检测来向特定的搜寻器显示内容。特别是在JavaScript网站上,搜索引擎可能会看到与用户不同的东西。这就是为什么百度移动友好测试工具对于解决JavaScript SEO问题非常重要。它们向您显示搜索引擎看到的内容,对于检查搜索引擎是否可能被阻止以及他们是否可以看到页面上的内容非常有用。我将在有关渲染器的部分中介绍如何进行测试,因为下载的GET请求,渲染的页面甚至测试工具之间都存在一些关键差异。

还需要注意的是,尽管搜索引擎将抓取内容表现为“HTML”,但实际上,它们正在抓取并存储构建页面所需的所有资源。HTML页面,Javascript文件,CSS,XHR请求,API端点等。

2.加工

图像中的“处理”一词混淆了许多系统。我们将介绍其中一些与JavaScript相关的内容。

资源和链接

搜索引擎不会像用户那样浏览页面。处理的一部分是检查页面是否具有指向其他页面的链接以及构建页面所需的文件。这些链接被拉出并添加到抓取队列中,这正是搜索引擎用来确定抓取优先级和计划抓取的时间。

搜索引擎将从 标签之类的内容中提取构建页面所需的资源链接(CSS,JS等)<link>。但是,指向其他页面的链接必须采用特定的格式,搜索引擎才能将其视为链接。内部和外部链接必须是<a> 带有href 属性的标签。对于使用JavaScript的用户来说,有很多方法不适合搜索,因此可以使其工作。

好:

<a href="/page">简单很好</a>
<a href="/page" onclick="goTo('page')">仍然可以</a>  

坏:

<a onclick="goTo('page')">没有,没有href </a>
<a href="javascript:goTo('page')">不,缺少链接</a>
<a href="javascript:void(0)">不,缺少链接</a>
<span onclick="goTo('page')">不是正确的HTML元素</span>
<option value ="page">不是,错误的HTML元素</ option>
<a href="#">无链接</a>  

还要注意的是, 在渲染之后,使用JavaScript添加的内部链接不会被抓取。这应该相对较快,并且在大多数情况下不必引起关注。

快取

搜索引擎下载的每个文件(包括HTML页面,JavaScript文件,CSS文件等)都将被积极地缓存。搜索引擎会忽略您的缓存时间,并在需要时提取新副本。我将在“渲染器”部分中进一步讨论这一点以及它为什么如此重要。

重复消除

 在将下载的HTML发送到呈现之前,可以从下载的HTML中删除重复的内容或将其取消优先级。使用应用程序外壳模型时,HTML响应中几乎不会显示任何内容和代码。实际上,站点上的每个页面都可能显示相同的代码,并且可能是在多个网站上显示的相同代码。有时这可能会导致页面被视为重复页面,而无法立即进行渲染。更糟糕的是,错误的页面甚至错误的网站都可能显示在搜索结果中。随着时间的推移,这应该会自行解决,但可能会出现问题,尤其是对于较新的网站。

最严格的指令

搜索引擎将 在HTML和页面的呈现版本之间选择限制性最强的语句。如果JavaScript更改了一条语句,并且与HTML中的语句冲突,则搜索引擎只会服从限制性最强的一个。Noindex将覆盖索引,HTML中的noindex将完全跳过呈现。

3.渲染队列

现在每个页面都转到渲染器。许多具有JavaScript和两阶段索引(HTML然后呈现页面)的SEO的最大担忧之一就是页面可能几天甚至几周都无法呈现。当搜索引擎对此进行调查时,他们发现页面以5秒的中值时间到达了渲染器,而第90个百分位是几分钟。因此,在大多数情况下,获取HTML和呈现页面之间的时间量不应该成为问题。

4.渲染器

渲染器是搜索引擎渲染页面以查看用户看到的内容的地方。他们将在这里处理JavaScript以及JavaScript对文档对象模型(DOM)所做的任何更改。

大多数搜索引擎都使用初级渲染器来进行渲染,因此不支持许多功能。以网络规模渲染可能是一项庞大的工作,需要大量的资源。由于规模庞大,搜索引擎在呈现过程中采取了许多捷径来加快处理速度。所以作为通常需要优化的网站都尽可能采用常见的Javascript的功能。

缓存资源

搜索引擎严重依赖缓存资源。页面被缓存;文件被缓存;API请求被缓存;基本上,所有内容在发送到渲染器之前都会被缓存。他们并没有为每次页面加载而下载每个资源,而是使用缓存的资源来加快此过程。

这可能会导致一些不可能的状态,在这种状态下,渲染过程中会使用以前的文件版本,而页面的索引版本可能包含旧文件的一部分。进行重大更改后,您可以使用文件版本控制或内容指纹生成新文件名,以便搜索引擎必须下载资源的更新版本以进行渲染。

搜索引擎机器人看到了什么

搜索引擎机器人不会对网页采取任何措施。他们不会点击或滚动,但这并不意味着他们没有解决方法。对于内容,只要无需进行任何操作就将其加载到DOM中,他们就会看到它。我将在疑难解答部分中对此进行详细介绍,但基本上,如果内容在DOM中但只是隐藏,则可以看到它。如果在单击之后才将其加载到DOM中,那么将找不到内容。

搜索引擎无需滚动即可查看您的内容,因为他们有一个聪明的解决方法来查看内容。对于移动设备,他们会以411x731像素的屏幕大小加载页面,并将长度调整为12,140像素。从本质上讲,它成为屏幕尺寸为411x12140像素的超长手机。对于台式机,它们的操作相同,并且从1024x768像素变为1024x9307像素。

另一个有趣的捷径是搜索引擎在渲染过程中不绘制像素。完成页面加载需要花费时间和其他资源,并且他们实际上并不需要查看涂有像素的最终状态。他们只需要知道结构和布局即可,而不必实际绘制像素。

在搜索引擎搜索中,我们实际上并不关心像素,因为我们并不希望将其显示给某人。我们要处理信息和语义信息,因此我们需要处于中间状态的东西。我们不必实际绘制像素。

视觉效果可能有助于解释切出的部分更好。在Chrome开发者工具中,如果您在“效果”标签上运行测试,则会获得加载图表。此处的绿色实心部分表示绘画阶段,对于搜索引擎机器人而言,这从未发生过,因此可以节省资源。

chrome开发工具

灰色 =下载量
蓝色 = HTML
黄色 = JavaScript
紫色 =布局
绿色 =绘画

5.抓取队列

搜索引擎的资源中有一些关于抓取预算的内容,但是您应该知道每个站点都有自己的抓取预算,并且每个请求的优先级都必须确定。搜索引擎还必须平衡您的网站爬网与互联网上其他所有网站的平衡。一般而言,较新的网站或具有许多动态页面的网站的爬网速度可能会较慢。某些页面的更新频率将低于其他页面,并且某些资源的请求频率也会降低。

测试/故障排除

JavaScript网站的一个“陷阱”是它们只能更新DOM的一部分。以用户身份浏览到另一个页面可能不会更新某些方面,例如DOM中的标题标签或规范标签,但这对于搜索引擎而言可能不是问题。请记住,搜索引擎会无状态加载每个页面,因此它们不会保存以前的信息,也不会在页面之间导航。我已经看到SEO绊倒了,因为他们从一页导航到另一页后会看到什么,例如没有更新的规范标签,但搜索引擎可能永远也看不到这种状态。开发人员可以通过使用History API更新状态来解决此问题,但这又可能不是问题。刷新页面并查看您看到的内容,或者最好通过搜索引擎的一种测试工具对其进行运行以查看他们看到的内容。一秒钟有更多内容。

查看源与检查

在浏览器窗口中右键单击时,您将看到几个选项,用于查看页面的源代码和检查页面。视图源将向您显示与GET请求相同的视图。这是页面的原始HTML。检查完成后,Inspect会向您显示已处理的DOM,并且更接近搜索引擎机器人看到的内容。它基本上是页面的更新和最新版本。使用JavaScript时,应在视图源上使用inspect。

搜索引擎快取

搜索引擎的缓存不是检查搜索引擎bot所见内容的可靠方法。它通常是初始HTML,尽管有时是渲染的HTML或旧版本。该系统用于在网站关闭时查看内容。它作为调试工具并不是特别有用。

搜索引擎测试工具

搜索引擎的移动友好性测试工具于调试非常有用。尽管如此,即使这些工具也与搜索引擎所看到的略有不同。我已经讨论过渲染器所没有的这些工具中的五秒超时,但是这些工具的不同之处还在于它们实时提取资源,而不是像渲染器那样使用缓存的版本。这些工具中的屏幕快照还显示带有绘制像素的页面,而搜索引擎在渲染器中看不到。

不过,该工具对于查看内容是否已加载DOM非常有用。这些工具中显示的HTML是呈现的DOM。您可以搜索一段文本,以查看默认情况下是否已加载该文本。

该工具还将向您显示可能被阻止的资源以及对调试有用的控制台错误消息。

在搜索引擎中搜索文字

您可以做的另一项快速检查就是在搜索引擎中搜索您的内容片段。搜索“内容中的某些短语”,然后查看页面是否返回。如果是这样,则很可能看到了您的内容。请注意,默认情况下隐藏的内容可能不会出现在SERP的代码片段内。

渲染选项

呈现JavaScript时有很多选择。搜索引擎会显示一个可靠的图表。对于搜索引擎而言,任何一种SSR,静态呈现,预呈现设置都可以。引起问题的主要方法是完整的客户端渲染,其中所有渲染都在浏览器中进行。

尽管即使使用客户端渲染,搜索引擎可能也可以,但最好选择其他渲染选项以支持搜索引擎。百度支持JavaScript渲染,但是比例未知。从我们所见,搜狗的支持有限,许多其他搜索引擎几乎不支持JavaScript。

使您的JavaScript网站SEO友好

许多过程与SEO过去已经看到的过程相似,但是可能会有细微的差异。

页面SEO

内容,标题标签,元描述,alt属性,元机器人标签等所有正常的页面SEO规则仍然适用。

在使用JavaScript网站时,我反复看到的几个问题是标题和描述可能会被重用,并且图像上的alt属性很少设置。

允许爬行

不要阻止对资源的访问。搜索引擎需要能够访问和下载资源,以便它们能够正确呈现页面。在robots.txt中,允许对所需资源进行爬网的最简单方法是添加:

User-Agent: Baiduspider
Allow: .js
Allow: .css

网址

更新内容时更改URL。我已经提到过History API,但是您应该知道,使用JavaScript框架,它们将拥有一个路由器,可让您映射到干净的URL。您不想使用哈希(#)进行路由。对于Vue和某些较早版本的Angular来说,这尤其是一个问题。因此,对于诸如abc.com/#something之类的URL,服务器通常会忽略#之后的任何内容。要为Vue修复此问题,您可以与开发人员一起更改以下内容:

Vue router:
Use ‘History’ Mode instead of the traditional ‘Hash’ Mode. 
const router = new VueRouter ({
mode: ‘history’,
router: [] //the array of router links
)}

内容重复

使用JavaScript,同一内容可能有多个URL,这会导致重复的内容问题。这可能是由于大小写,ID,带有ID的参数等引起的。因此,所有这些都可能存在:

domain.com/Abc
domain.com/abc
domain.com/123
domain.com/?id=123

解决方案很简单。选择要索引的一个版本并设置规范标签。

SEO “插件”类型选项

对于JavaScript框架,这些通常称为模块。通过搜索框架​​和模块名称(例如“ React Helmet”),可以找到许多流行框架的版本,例如React,Vue和Angular。Meta标签,Helmet和Head都是具有相似功能的常用模块,可让您设置SEO所需的许多常用标签。

错误页面

因为JavaScript框架不是服务器端的,所以它们不能真正引发类似404的服务器错误。对于错误页面,您有几个不同的选择:

  1. 使用JavaScript重定向到确实以404状态代码响应的页面
  2. 将noindex标记添加到失败的页面,并添加诸如“ 404页面未找到”之类的错误消息。由于返回的实际状态代码为200,可以将其视为软404。

网站地图

JavaScript框架通常具有映射到干净URL的路由器。这些路由器通常有一个附加模块,也可以创建站点地图。您可以通过搜索系统+路由器站点地图(例如“ Vue路由器站点地图”)来找到它们。许多渲染解决方案可能还具有站点地图选项。同样,只要找到您使用的系统,然后再找到搜索引擎的系统+网站地图(例如“ Gatsby网站地图”),您肯定会找到已经存在的解决方案。

重新定向

SEO用于301/302重定向 (在服务器端)。但是Javascript通常在客户端运行。可以,因为搜索引擎按照重定向进行页面处理。重定向仍会传递所有信号,您可以通过查找“window.location.href”在代码中找到这些重定向。

国际化

通常,对于不同的框架,有一些模块选项可支持国际化所需的某些功能,例如hreflang。它们通常已移植到不同的系统,并包含i18n,intl或很多时候用于标题标签(如Helmet)的相同模块可用于添加所需的标签。

延迟加载

通常有用于处理延迟加载的模块。如果您尚未注意到,有许多模块可以处理使用JavaScript框架时需要做的几乎所有事情。Lazy和Suspense是最流行的延迟加载模块。您需要延迟加载图像,但要注意不要延迟加载内容。这可以使用JavaScript来完成,但可能意味着搜索引擎未正确选择它。

总结

JavaScript是明智使用的工具,而不是SEO所担心的东西。希望本文能帮助您了解如何更好地使用它,但不要害怕与您的开发人员联系并与他们合作并向他们提出问题。他们将成为您帮助改善搜索引擎JavaScript网站的最大盟友。

有问题吗?请联系浪知潮在线客服。

分享:
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:service@langzhichao.com,我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1115814032】

SEO按天计费
  • 联系人
  • 电话
  • 邮箱
  • 验证码
    看不清?点击更换

南京浪知潮网络科技有限公司 Copyright © 2012-2019 All Rights Reserved.未经许可,不可拷贝或镜像   网站地图