blog

诊断JavaScript驱动的网站的优先级

在过去的20年里,谷歌的搜索引擎发生了很大的变化如果我们从整体上看技术和网络发展,我们可以看到变化的步伐非常壮观这个网站从1998年开始提供信息,但不是很吸引人或者很容易使用:现代网站不仅看起来好多了,而且它们配备了强大的功能,例如推送通知,部分脱机工作和眨眼间加载但是如果我们想要准确,我们应该使用术语“应用程序” “而不是”网站“,因为网站是互动的,动态的,并且是用JavaScript构建的。最长的时间,谷歌无法执行JavaScript,但在2015年,公司在处理JavaScript方面迈出了一大步。需要强调的是搜索引擎的发展比网络开发利基中发生的要慢得多,这可能就是为什么谷歌仍然是唯一可以执行JavaScript的搜索引擎,一开始万维网就是由于网站只有静态超文本标记语言(HTML),谷歌有一个简单的任务要完成:向服务器发出请求→获取静态HTML响应→索引页面我知道这是一个超简单的描述过程,但我想展示当今处理网站和处理网站之间处理网站之间的差异当开发人员开始使用JavaScript(JS)在网站上添加交互性时出现问题,然后当Javascript被用于创建整个网站JavaScript应用程序和网站是Google面临的挑战,因为在初始请求发送到服务器之后,Googlebot会收到一个空的或几乎空的HTML文件。在JS执行之后添加内容,图像和链接Google通过尝试解决问题渲染他们访问的几乎所有页面所以现在,该过程看起来或多或少像这样:向服务器发出请求→获取静态HTML响应→Se并将其转换为索引器→呈现页面→索引并将提取的链接发送到Googlebot→Googlebot可以抓取下一页JavaScript执行添加了很多低效率和延迟到抓取,渲染和索引的过程因为:尽管有这些障碍,我们需要为开发动态JS应用程序的繁荣做好准备,因为对React,Vuejs或Angular等开源框架的兴趣不断飙升越来越多的网站将使用JavaScript构建,因此作为SEO,我们需要能够发现使用它的网站上的问题在我们开始深入研究JavaScript以及与之相关的一些混乱之前,让我们看看将调整我们分析网站的方法的三个方面:A问题的规模是多少?我们需要理解并明确界定使用JavaScript构建的网站(应用程序),例如单页面应用程序(SPA)和部分依赖于JavaScript这里有一些可能的场景以及如何判断使用SPA构建的内容以及什么是部分依赖项:正如您可能猜到的那样,如果您对JavaScript有部分依赖性,那么解决问题的难度就会减少B网站建立在哪里?静态HTML网站是在您的服务器上构建的在收到Googlebot(以及用户)的初始请求后,它会收到一个静态页面作为响应动态网络应用程序(DWA)是在浏览器中构建的,因此在初始请求之后,我们会收到一个空的或者几乎是空的HTML文件,并且使用JavaScript以异步方式加载内容从更大的角度来看,我们可以假设客户端渲染是JS和搜索引擎优化(SEO)C问题的真正反派Google有什么限制?前段时间,Google透露了它如何呈现网站:共享网络渲染服务(WRS)负责呈现页面背后的网站是基于2015年推出的Chrome 41的无头浏览器,所以它有点过时事实谷歌使用三年历史的浏览器对渲染现代网络应用程序产生了真正的影响,因为它不支持现代应用程序使用的所有当前功能。谷歌工程师埃里克·比德曼证实他们已经意识到谷歌的局限性使用JS基于非官方声明,我们可以预期Chrome 41将在2018年底更新为更新版本为了深入了解支持和不支持的内容,请访问Caniusecom并将Chrome 41与最新版本的版本进行比较铬 列表很长:超时是下一个让JS和SEO难以匹敌的东西JavaScript应用程序通常非常沉重,而且Google资源有限想象一下,在JavaScript的情况下,Google需要渲染每个页面以查看内容下面的例子显示JS执行的重要性如果你有一个JS文件和一个相同大小的图像文件,你会发现解析需要大约2秒,然后大约15秒执行JavaScript需要合理地管理其处理资源,因为需要处理的大量数据万维网由超过十亿个网站组成,并且每天都在增长下面的图表显示,在过去五年中,桌面版本的页面中值大小增加了近100%年移动版网站的适当指标增加了250%! JavaScript网站的自然结果是爬行,索引的延迟,以及最终,那些网站的排名从事技术搜索引擎优化的SEO需要注意细节在JavaScript网站的情况下,我们需要为我们需要的棘手问题做好准备要解决,我们必须明白,我们不能总是依赖常见和众所周知的规则谷歌知道搜索引擎优化和开发人员在理解搜索行为方面存在问题,他们正在努力帮助我们这里有来自谷歌的一些资源你应该关注并检查以解决您可能遇到的任何JS问题:现在我们知道了Google的限制,让我们尝试在JavaScript网站上发现一些问题并寻找解决方法三年前,Google宣布它能够渲染和理解像现代浏览器这样的网站但是如果我们查看有关渲染JS网站的文章和评论,你会发现它们包含许多警示词,如:“可能”,“一般而且“并不总是”这应该突出这样一个事实:虽然谷歌在JS执行方面越来越好,但仍有很大的提升空间源代码是Googlebot在进入页面后看到的内容它是没有JS集成的原始HTML代码要记住的一件重要事情是,Googlebot不会呈现Googlebot是抓取工具的页面,因此它的工作是浏览页面,从源代码中提取元素并将它们发送到索引器文档对象模型(DOM)是网站的渲染版本,它意味着原始HTML由JavaScript改变,结构化和有组织“Inspect Element”显示文档对象模型渲染由Web渲染服务完成,这是Google的一部分索引器这里有一些要记住的要点:JavaScript网站被分为两个波段,这使得索引的整个过程完全不同:请记住,在第二波中对于索引,Google不会更新原始索引元素(如果它们被JavaScript更改)如果您使用JavaScript添加rel =“canonical”标记,则谷歌将不会选择它。但是,最近John Mueller表示如果谷歌陷入困境期间对页面进行渲染,原始HTML可能会用于索引即使您看到某个特定的URL被索引,也不意味着索引器发现了内容,我知道它可能会让人感到困惑,所以这里有一个小的备忘单:Google正式确认我们可以依靠这两种方法来检查Google如何“看到”该网站:现在,是时候分析代码和DOM了。在第一步,比较它们的可索引性,并检查是否有来源代码包含:然后查看它们是否符合网站的渲染版本为了发现差异,您可以使用像Diff Checker这样的工具,它将比较两个文件之间的文本差异使用Diff Checker,抓住原始的超文本传输​​专业版来自Google Search Console的协议(HTTP)响应,并将其与上面第3点中提到的工具(Rich Results测试和移动友好测试)中的DOM进行比较。可能会发生JavaScript会修改某些元素,Google可能会要遵循的两个不同说明在查看DOM时,还需要验证依赖于点击,滚动和填充表单等事件的元素JavaScript允许在用户交互后加载其他内容,链接和图像Googlebot不滚动或点击,因此,如果某些内容需要显示某个操作,Google就不会发现它 回到我之前提到的那两个浪潮,谷歌承认仅在第一波索引中考虑元数据如果源代码不包含机器人指令,hreflangs或规范标签,谷歌可能无法发现它Google如何查看您网站的呈现版本,转到Google Search Console中的Google抓取工具并提供您要检查的网址,然后点击获取和​​渲染对于复杂或动态网站,仅仅验证是否所有元素都是如此该网站取而代之谷歌正式宣称Chrome 41是Fetch and Render工具的后盾,因此最好下载并安装该浏览器的确切版本一旦安装在您的个人计算机(PC)上,您就可以进行一些交互。网站,导航到其他部分并检查由JavaScript触发的控制台中的错误移动友好测试中的新功能还可以在JavaScript中查看错误JavaScript控制台我想提一些常见和琐碎的错误要避免:内部链接是使网站可抓取的唯一方法由于JavaScript网站的源代码(一般情况下)不包含链接,因此整个抓取过程都会延迟Googlebot需要等待由Indexer呈现页面并将发现的链接发回来诊断JS网站的关键因素是检查链接是否放在DOM中源代码不必包含链接,但如果DOM没有有它们,链接将不会被发现如果主导航是用JavaScript构建的话可能会产生戏剧效果在分析大型菜单时要小心有时它们充满了对搜索引擎优化并不总是有益的花哨功能这里是约翰的提示穆勒关于如何看待导航是否适用于谷歌:还要注意“加载更多”分页和无限滚动这些元素也很棘手他们以平滑的方式加载其他内容,b在与网站交互后发生这种情况,这意味着我们无法在DOM中找到内容在Google I / O大会上,Tom Greenway为此问题提到了两个可接受的解决方案:您可以预加载这些链接并通过CSS或者您可以提供后续页面的标准超链接,因此按钮需要链接到序列中下一个内容的单独URL。下一个重要元素是嵌入内部链接的方法Googlebot仅遵循标准超链接,这意味着您需要在代码中看到这样的链接:(没有间距)如果你看到OnClick链接,它们看起来像这样并且不会被发现:所以,在浏览源代码和DOM时,总是检查以确保你正在使用内部链接上的正确方法获取内容索引的基本规则是为每个内容提供干净且唯一的URL很多时候,JS驱动的网站使用Google已明确声明的URL中的主题标签在大多数情况下,爬虫程序不会发现此类型的URL在分析网站时,请检查结构是否使用以下URL构建:URL中的#符号后面的所有内容都将被修剪并忽略Google,所以内容不会被编入索引!没有人喜欢渲染延迟,甚至谷歌据说谷歌等待最多5秒才能获得并执行JavaScript(请注意,5秒规则是基于观察结果而未经Google确认)我认为Google必须限制最大值执行的时间,因为渲染是一个非常耗费资源的过程不幸的是,诊断超时问题并不容易如果我们不能足够快地提供内容,我们就无法将内容编入索引在JavaScript网站的情况下,你需要等待一段时间加载其他元素,甚至整个部分加载器显示会出现一些新内容:如果JavaScript按时执行,Web呈现服务可以正确呈现页面,并且内容可以使用JavaScript加载索引但是,如果我们查看搜索结果,我们会看到装载机被索引了呃!我们怎样才能发现这些问题?我们可以使用像Screaming Frog这样的工具抓取网站,延迟设置为5秒。在渲染模式下,您可以查看渲染版本是否一切正常。不要依赖于获取和渲染工具中的检查延迟它可以等待JavaScript只需2分钟,因此它比Google的Indexer更耐心 John Mueller建议我们可以检查Google是否在移动友好测试中按时呈现页面,如果网站正常工作则应该可以进行索引在分析网站时,查看网站是否实现了像装载机这样的人工延迟等待内容传递:没有理由设置类似的元素;它可能会对索引不可发现的内容产生巨大影响如果内容未编入索引,您将获得任何收益。这是检查和诊断最简单的元素,也是最重要的元素!检查索引的最有用的方法是众所周知的查询:站点:域'来自您网站的几行内容'如果您搜索一些内容并在搜索结果中找到它,那就太棒了!但是,如果你没有找到它,请卷起袖子开始工作你需要找出它没有编入索引的原因!如果您想进行复杂的索引分析,您需要检查域中不同类型页面的内容部分以及不同部分,Google表示加载“懒惰”图像可能存在问题:如果图像速度很慢正在加载,为您正在服务的图像添加标记,以便在JavaScript关闭时使其可见第二个使Google可以发现懒惰内容的选项是结构化数据:不要将本文作为您将使用的唯一清单对于JS网站虽然这里有很多信息,但这还不够本文旨在成为深入分析的起点每个网站都是不同的,当你考虑独特的框架和个人开发人员的创造力时,就不可能关闭只有一个清单审核本文中表达的意见是访客作者的意见,

查看所有