石家庄网站建设 > 博客教程 > seo优化教程 >

石家庄网络推广公司哪家好

发布时间:2020-07-20

公司使用现代JavaScript框架和库(例如React,Angular或Vue)构建网站的情况相当普遍。到目前为止,很明显,网络已经脱离了纯HTML并进入了JS时代。
 
尽管一家企业愿意利用最新技术并没有什么不同寻常,但我们需要解决这一趋势的严峻现实:大多数向JavaScript框架的迁移并不是在考虑用户或自然流量的情况下进行的。
 
让我们将其称为JavaScript悖论:
 
在听到所有关于JavaScript框架创建惊人的UX的嗡嗡声之后,大品牌跳上了JavaScript的炒作之旅。
事实表明,JavaScript框架确实很复杂。
大品牌完全阻止了向JavaScript的迁移。他们失去了自然的流量,常常不得不走捷径,而不是为用户创造这种惊人的UX旅程(我将在本文中提到一些示例)。
既然没有回头路,SEO就需要学习如何处理JavaScript网站。
 
 
但这说起来容易做起来难,因为要使JavaScript网站在搜索引擎中取得成功对于开发人员和SEO都是一个真正的挑战。
 
本文旨在作为我全面的JavaScript SEO终极指南的后续文章,并且旨在使其尽可能地易于遵循。因此,请为自己喝杯咖啡,让我们玩得开心–这里有六个步骤可帮助您诊断和解决JavaScript SEO问题。
 
第1步:使用URL检查工具来查看Google是否可以呈现您的内容
URL检查工具(以前称为Google Fetch and Render)是一款很棒的免费工具,可让您检查Google是否可以正确呈现您的页面。
 
URL检查工具要求您将网站连接到Google Search Console。如果您还没有帐户,请查看Google的帮助页面。
 
打开Google Search Console,然后单击URL检查按钮。
 
 
 
在“ URL表单”字段中,键入要审核的页面的完整URL。
 
然后单击“测试直播” URL。
 
 
测试完成后,单击“查看已测试的页面”。
 
 
 
 
最后,单击“屏幕快照”选项卡以查看呈现的页面。
 
 
向下滚动屏幕截图,以确保正确呈现您的网页。问问自己以下问题:
 
主要内容可见吗?
Google可以看到用户生成的评论吗?
Google可以访问类似文章和产品之类的区域吗?
Google可以看到您页面的其他关键元素吗?
 
为什么屏幕截图看起来与我在浏览器中看到的不同?以下是一些可能的原因:
 
Google在渲染时遇到超时。
渲染时发生了一些错误。您可能使用了Google Web Rendering Service不支持的某些功能(Google使用已有四年历史的Chrome 41进行Web渲染,它不支持许多现代功能)。
您已阻止Googlebot的重要JavaScript文件。
第2步:确保您没有误阻止JavaScript文件
如果Google无法正确呈现您的页面,则应确保您没有在robots.txt中阻止Googlebot的重要JavaScript文件
 
TL; DR:什么是robots.txt?
 
这是一个纯文本文件,用于指示Googlebot或任何其他搜索引擎bot是否被允许请求页面/资源。
 
幸运的是,URL检查工具指出了被robots.txt阻止的呈现页面的所有资源。
 
 
但是从渲染的角度来看,如何判断阻塞的资源是否重要?
 
您有两个选择:基本和高级。
 
基本的
在大多数情况下,简单地询问您的开发人员可能是一个好主意。他们创建了您的网站,所以他们应该很了解。
 
显然,如果脚本的名称称为content.js或productListing.js,则它可能是相关的,不应被阻止。
 
不幸的是,就目前而言,URL Inspection不会通知您被阻止的JS文件的严重性。以前的Google Fetch and Render具有这样的选项:
 
高级
现在,我们可以使用Chrome开发者工具。
 
出于教育目的,我们将检查以下URL:http : //botbenchmarking.com/youshallnotpass.html
 
在最新版本的Chrome中打开该页面,然后转到Chrome开发者工具。然后移至“网络”选项卡并刷新页面。
 
最后,选择所需的资源(在本例中为YouShallNotPass.js),右键单击并选择“阻止请求URL”。
 
 
 
刷新页面,查看是否有重要内容消失。如果是这样,那么您应该考虑从robots.txt文件中删除相应的规则。
 
步骤3:使用网址检查工具修复JavaScript错误
如果您发现Google Fetch and Render无法正确呈现页面,则可能是由于呈现时发生了JavaScript错误。
 
要进行诊断,请在“ URL检查”工具中单击“更多信息”选项卡。
 
 
然后,向您的开发人员显示这些错误,让他们进行修复。
 
JavaScript代码中只有一个错误可以停止对Google的呈现,从而使您的网站无法建立索引。
 
您的网站在最新的浏览器中可能运行良好,但是如果在旧版浏览器中崩溃(Google Web Rendering Service基于Chrome 41),则您的Google排名可能会下降。
 
需要一些例子吗?
 
Angular官方文档中的一个错误导致Google无法渲染我们的测试Angular网站。
曾几何时,Google对Angular 2+的官方网站Angular.io的某些页面进行索引编制。
如果您想知道为什么会发生,请阅读我的JavaScript SEO终极指南。
 
旁注:如果由于某些原因您不想使用URL Inspection工具来调试JavaScript错误,则可以改用Chrome 41。
 
就我个人而言,我更喜欢将Chrome 41用于调试目的,因为它具有更高的通用性和灵活性。但是,URL Inspection工具在模拟Google Web Rendering Service方面更准确,因此,对于那些不熟悉JavaScript SEO的人,我建议这样做。
 
步骤4:检查您的内容是否已在Google中建立索引
仅查看Google是否可以正确呈现您的网站还不够。您必须确保Google已正确索引您的内容。最好的选择是使用site:命令。
 
这是一个非常简单且功能强大的工具。它的语法非常简单:site:[网站的网址]“ [要搜索的片段]”。请注意,不要在site:和URL之间放置空格。
 
假设您要检查Google是否已索引Angular.io主页上的以下文本“跨所有平台开发”。
 
 
在Google中键入以下命令:site:angular.io“跨所有平台开发”
 
 
如您所见,Google将该内容编入索引,这是您想要的,但并非总是如此。
 
带走:
 
尽可能使用site:命令。
检查不同的页面模板,以确保您的整个网站正常运行。不要停留在一页上!
如果还可以,请继续下一步。如果不是这种情况,可能是由于以下几种原因造成的:
 
Google仍然没有呈现您的内容。它应该在Google访问该网址后的几天/几周内发生。如果您网站的特征要求您的内容尽快索引,请实施SSR。
Google在呈现页面时遇到超时。你的脚本快吗?服务器负载很高时,它们是否仍保持响应?
Google仍在请求旧的JS文件。好吧,Google尝试缓存很多以节省其计算能力。因此,CSS和JS文件可能会被积极地缓存。如果您发现您已修复所有JavaScript错误,但Google仍无法正确呈现您的网站,则可能是因为Google使用了已缓存的旧JS和CSS文件。要解决此问题,您可以在文件名中嵌入一个版本号,例如,将其命名为bundle3424323.js。您可以在《 HTTP缓存的Google指南》中阅读更多内容。
编制索引时,如果Google认为某些资源对基本页面内容没有贡献,则可能不会获取某些资源。
 
第5步:确保Google可以发现您的内部链接
您应该遵循一些简单的规则:
 
Google需要适当的<a href>链接来发现您网站上的URL。
如果仅当有人单击按钮时将您的链接添加到DOM,则Google不会看到它。
就是这么简单,许多大公司都会犯这些错误。
 
正确的链接结构
为了抓取网站,Googlebot需要具有传统的“ href”链接。如果未提供,那么Googlebot根本无法访问您的许多网页!
 
我认为Google I / O会议上的Tom Greenway(Google代表)对此做了很好的解释:
 
 
请注意:如果您拥有正确的<a href>链接,并带有一些其他参数(例如onClick,data-url,ng-href),则对Google来说仍然很好。
 
开发人员常犯的错误:Googlebot无法访问第二页及其后的分页
 
开发人员常犯的错误是,不允许Googlebot从分页的第二页开始搜索页面。
 
当打开Gearbest,Aliexpress和IKEA的移动版本时,您会很快注意到,实际上,它们并没有让Googlebot看到分页链接,这确实很奇怪。当Google为这些网站启用移动优先索引功能时,这些网站将会遭受损失。
 
您如何自行检查?
如果尚未下载Chrome 41,请从Ele.ph/chrome41获取。
 
然后导航到任何页面。为了本教程的缘故,我使用的是AliExpress.com的移动版本。出于教育目的,如果您遵循相同的示例,则很好。
 
打开Aliexpress的“手机”类别的移动版本。
 
 
然后,右键单击“查看更多”,然后选择“检查”按钮以查看其实现方式。
 
 
如您所见,没有指向分页第二页的<a href>和<link rel>链接。
 
Aliexpress.com上的手机类别中有2,000多种产品。由于移动版Googlebot只能访问其中的20个,因此仅占1%!
 
这意味着该类别中99%的产品对于移动Googlebot都是不可见的!太疯狂了!
 
这些错误是由延迟加载的错误实现引起的。还有许多其他网站也犯了类似的错误。您可以在我的文章“ Mobile First Indexing中可能失败的流行网站 ”中阅读更多内容。
 
TL; DR:仅使用link rel =“ next”对Google来说是一个微弱的信号
注意:通常使用“ link rel =” next”来指示分页序列。但是,凯尔·布兰切特(Kyle Blanchette)的发现似乎表明,仅“ link rel =” next”这一信号对Google来说太弱了,应该通过传统的<a href>链接加以加强。
 
 
John Mueller对此进行了更多讨论:
 
“我们可以了解哪些页面与rel next,rel =” previous”一起,但是如果页面上根本没有任何链接,那么我们很难在页面之间进行爬网。(...)因此,在页面顶部使用rel =“ next” rel =“ previous”是一个很好的主意,告诉我们这些页面的连接方式,但是您确实需要页面上的常规HTML链接。
 
 
不要误会我的意思-使用<link rel =” next”>并没有错。相反,它们是有益的,但是最好将这些标记与传统的<a href>链接结合使用。
 
检查Google是否可以看到菜单链接
审核JavaScript网站的另一个重要步骤是确保Google可以看到您的菜单链接。要检查这一点,请使用Chrome 41。
 
就本教程而言,我们将使用Target.com的情况:
 
 
 
首先,打开任何浏览器并从菜单中选择一些链接:
 
https://www.target.com/c/clothing/-/N-5xtd3- >服装
https://www.target.com/c/shoes/-/N-55b0t- >鞋子
https://www.target.com/c/furniture/-/N-5xtnr- >家具
接下来,打开Chrome41。在Chrome开发者工具中(单击Ctrl + Shift + J),导航到elements选项卡。
 
结果?幸运的是,Google可以选择Target.com的菜单链接。
 
 
现在,检查Google是否可以在您的网站上获取菜单链接,并查看您是否也处于目标位置。
 
步骤6:检查Google是否可以发现隐藏在标签下的内容
我经常观察到,在许多电子商务商店中,Google无法发现和索引隐藏在选项卡下的内容(产品说明,意见,相关产品等)。我知道这很奇怪,但是很常见。
 
这是确保SEO可以隐藏选项卡下隐藏内容的每次SEO审核的关键部分。
 
打开Chrome 41并导航到Boohoo.com上的任何产品;例如,肌肉贴身背心。
 
 
点击Details&Care查看产品说明:
 
“细节与关怀
94%棉6%氨纶。肌肉健美背心。模特身高为6'1“,穿着英国M码。”
现在,是时候检查它是否在DOM中了。为此,请转到Chrome开发者工具(Ctrl + Shift + J),然后点击“网络”标签。
 
确保启用了禁用缓存选项。
 
 
单击F5刷新页面。刷新后,导航至“元素”选项卡并搜索产品说明:
 
 
 
 
如您所见,对于boohoo.com,Google可以查看产品说明。
 
完善!现在花点时间检查您的网站是否正常。
 
包起来
显然,JavaScript SEO是一个非常复杂的主题,但是我希望本教程对您有所帮助。
 
如果您仍在与Google排名斗争,则可能需要考虑实施动态渲染或混合渲染。而且,当然,随时可以在Twitter上与我联系,以了解此需求或其他SEO需求。

网站建设
Website
客户案例
Customer case
关于展为
About ZHANWEI
展为致力于网站建设与网络营销,微信营销,专业领域包括网站建设、网站seo优化推广、移动互联网营销、三网合一网站建设,微信营销小程序开发,与其他网站建设及系统开发公司不同,我们的整合解决方案结合了展为网络建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

扫码咨询

Copyright © 石家庄展为网络有限公司. 冀ICP备14018173号-6 Copyright 2010-2020版权所有
展为网络
网站建设
客户案例