1. 站长资讯平台首页
  2. 投稿

9种使搜索引擎渲染更有效的简单方法

让我们从爆炸开始。

Googlebot不是您的想法。

SEO专家指的是Googlebot,它在前几代人中保留了一种奇怪的崇敬形式,供无所不知的神灵和看不见的力量使用。

它具有戏剧性,给故事增添了色彩,但过分简化了Googlebot的真实身份。

Googlebot只是一个用户代理。它是请求的标识符–来电显示的花哨版本。

请求收到响应后,Googlebot的工作就结束了,可以请求下一个URI了。收集的响应在出现在SERP中之前,它通过一系列服务和流程来运行。

杂乱无章的用户代理获得了所有荣耀,但是我们需要谈论繁重的工作,这是一种隐藏的结构,可为您建立网站供Google亲身体验:渲染

什么是渲染?

呈现是Googlebot检索页面,运行代码并评估内容以了解网站布局或结构的过程。

然后,在呈现过程中Google收集的所有信息将用于将您网站内容的质量和价值与其他网站以及人们在Google搜索中搜索的内容进行比较。

跟踪捕捉渲染过程

每个网页都有两种状态-在它们之间呈现

每个网页都有两种状态:

  • 初始HTML。
  • 呈现的HTML。

两国之间的网站可能大不相同。

初始HTML先发生。它是服务器的响应。它包含HTML以及指向构建页面所需的资源(如JavaScript,CSS和图像)的链接。要自己查看初始HTML,请查看页面源代码。

渲染的HTML被更广泛地称为DOM,它是Direct Object Model的缩写。每个网页都有一个DOM。它表示初始HTML以及HTML调用的JavaScript所做的任何更改。要查看DOM,请在浏览器中打开浏览器的开发人员工具,然后单击控制台选项卡。

查看呈现的html开发人员工具

如果您想轻松发现两者之间的差异,则Chrome扩展程序View Rendered Source之类的工具会突出显示从一种状态更改为另一种状态的行。

了解HTML和DOM之间的区别是解决JS SEO的关键

当内容在初始HTML和DOM之间更改时,它是客户端JavaScript更改页面。(JavaScript可以在其他地方执行,但我们稍后会解决。)

这些更改表明在用户的浏览器中正在执行JavaScript。在用户浏览器中执行JavaScript时,我们称其为客户端渲染(CSR)。

这会使您的网页处于危险之中。如果在执行过程中出现问题,则这些JavaScript更改可能永远不会发生。JavaScript是一个复杂的过程,并且是您网站上最昂贵的资源。

听起来像是开发人员问题,对不对?

不是。

SEO专业人士在游戏中拥有丰富的皮肤。

Google无法索引无法呈现的内容

为了排名,我们必须被索引。为了被索引,我们必须渲染。

如果无法呈现内容,则不会对Google理解或提升您的网站的方式有所帮助。

让我们看一个使用快乐,健康的JavaScript的网站。

成功执行javascript的页面

一切似乎井井有条。这似乎是一个权威的电子商务网站,对它的主题了解很多。

现在,让我们带走由JavaScript生成的内容。您可以通过在网站设置中阻止JavaScript在任何网站上执行此操作。

禁用JS

钱币。

强调站点权限的所有产品均已消失。

我们知道书籍和向您的网站真正认识的读者之间是有区别的。

想象一下,如果那是您需要努力优化并想要排名的内容。

这是更好的情况之一。

即使没有JavaScript,我们仍然对该页面试图实现的意图有基本的了解。我们知道品牌名称,并且仍然可以找到网站上其他页面的有用链接。

来玩个游戏。

打开页面并查看页面源。您能说出该网站的内容吗?

SEO的渲染简介
如果您无法根据初始HTML识别页面的内容以及该页面匹配的搜索意图类型,那么搜索引擎也无法。

该页面将必须经历呈现过程才能理解。

Google如何渲染(草图)

渲染不是Hellmouth或Lovecraftian的空白。这是超级马里奥兄弟级别。

尽可能地困难,但要有明确的步骤和检查点。

SEO的渲染简介

这是具有实用步骤的过程,因此您可以继续学习!

  1. URL从爬网队列中拉出
    • 跟随:选择一个页面,任何页面。
  2. Googlebot要求URL并下载初始HTML
    • 遵循:查看页面源
  3. 初始HTML传递到处理阶段(Google的索引服务进行的第一波处理)
    • 请继续:您能告诉我们此页面的内容吗?
  4. 处理阶段从初始HTML中提取链接
    • 后续操作:在Chrome开发人员工具中打开“网络”标签,然后查看请求总数。这些请求中的每一个都计入您的抓取预算。
      SEO的渲染简介
  5. 这些链接返回爬网队列
    • 继续:打开每个资源。逐一。别作弊。问问自己,资源如何带来价值。在大约20种资源中,您会感到烦恼。在50种资源中,开始思考这些事物如何以任何有意义的方式做出贡献。在80种资源中,开始了解网站正在运送的不必要的废话。提示:保留每个新选项卡,并慢慢观察您的理智失控
  6. 抓取资源后,页面将排队进行渲染
    • 跟随:闪烁。您可能已经忘记了该怎么做。
  7. 资源可用时,请求将从渲染队列移至渲染器
    • 请遵循:尝试查找原始选项卡的去向。
  8. 呈现服务使用已爬网的链接组装页面
    • 请遵循以下步骤:通过打开“开发人员工具”来查看DOM并查看资源。或者,如果您丢失了原始标签,请执行以下操作:使用Google Search Console的URL检查器呈现页面。该工具同时执行爬网和渲染。
  9. 渲染器将​​渲染的HTML传递回处理
    • 遵循以下步骤:查看GSC中可用的渲染HTML。
  10. Google索引的第二波处理
    • 继续:您能告诉页面内容吗?内容是否如此丰富和有价值,足以证明您必须打开才能到达此处的所有选项卡?
  11. 从呈现的HTML中提取链接以将其放入爬网队列
    • 请遵循以下步骤:查找呈现的HTML中可用的链接,这些链接在服务器响应中不可用。
  12. 转到列表中的下一个URL,然后重复该过程。

很棒的工作!仅130万亿页,您将成为一个合适的机器人!

如何使渲染更有效,更轻松

既然您已经亲身体验了渲染过程(很抱歉,不客气),那么让我们来谈谈如何减少体验的痛苦。

1.注意您如何交付内容

您使用的客户端资源越多,出现问题的地方就越多。

假设您确实是Googlebot。

请求这些资源时是否提供了错误?

现在,资源创建的任何内容都丢失在Internet的沙发上。

希望这并不重要。

2.跳过渲染队列并在服务器响应中传递关键内容

JavaScript必须在某个地方执行。在大多数情况下,它要么在您的服务器上,要么在用户的浏览器中。

当我们在服务器端执行JavaScript时,我们可以将结果(呈现的内容)以初始HTML的形式发送给用户。

许多JavaScript框架(例如Angular和React)都具有本机可用的这些功能。

要在服务器端呈现内容,需要与开发人员合作并了解代码库。

重要的是要了解您不必是100%的客户端或100%的服务器端。相反,应集中精力在重要的时刻发货。

此处的“关键”表示用户为何要访问该页面。您需要通过页面模板为您的网站定义。

补充内容,网站页脚和屏幕外项目等元素可以等待。

初始HTML中的JSON-LD是将Googlebot备忘单传递给Googlebot的一种很好的方法,但请确保您也拥有用户所关心的内容。

3.仅发送您需要的脚本

在2019年,脚本的主要成本现在是下载量和CPU执行时间。

每个调用的脚本都必须下载,解析,编译和执行-不管它是否对页面内容有所帮助。

Google Chrome浏览器具有内置功能,可帮助您查看使用了多少代码。

如何发现浪费的脚本

  • 打开开发人员工具。
  • 单击右上角的3个点。
  • 选择更多工具,覆盖率。
  • 重新加载页面。

SEO的渲染简介

作为目标,一个健康,有效的页面应小于1MB。

可能是,性能不佳的登陆页面可能会掉下一些脚本。如果发现过多的脚本,请与您的开发团队一起进行split的代码。

4.将人为体验优先于闪亮功能

您的收件箱中可能有很多优惠,可以试用具有专有指标的新AI驱动工具,这些指标将您的网站可见性排名为独角兽。

如果您已经使用其他15个跟踪像素来衡量性能,则可能不需要新的独角鲸得分。

第三方脚本可能会对性能,渲染,安全性和用户隐私产生负面影响。

可以考虑将第三方脚本加载为别人的房门钥匙。

5.懒惰的图像和脚本,不阻塞渲染

一幅图片值一千个字吧?

就是这个 1,000个字约为2kb。

根据HTTPArchive,图像是请求最多的资产,平均请求为900kbs。

SEO的渲染简介

从Chrome 76开始,原生支持延迟加载。只需添加该属性即loading="lazy"可以最小的开发票证获得最大价值。

同样,您还可以通过添加一个简单的属性来异步加载脚本: <rel=”myscript.js” async defer>

6.保持脚本包很小

如果您的脚本大于50–100 kB,请将其分成单独的较小的包。

多个较小的捆绑包比单个大型脚本包更有效。

如果您的站点使用HTTP / 2复用,则可以同时进行多个请求和响应。

7.缓存,缓存,缓存

还记得上面的后续练习吗?想象一下每次都必须返回可重用的JS资源。通过尽可能长时间地缓存资源,可以轻松避免该额外步骤。

如果您将JS分成较小的专用于特定功能的捆绑包,则可以更轻松地长时间缓存它们。

阅读Google的《网络基础知识》,然后与您的工程师坐下来,深入了解您当前缓存的方式和内容。

8.性能和渲染直接相关

Google使用Chromium进行渲染的原因有很多。其中之一是它可以捕获关键时序-从时间到首字节(TTFB)到时间到交互式(TTI)的所有内容。

它在加载页面时捕获的数据有助于告知所有信息,从对移动设备的友好程度到快速的设计。这两个都是排名的因素。

您的资源越高效,越高效,页面呈现的效率就越高。

Lighthouse是一个免费的测试工具,可以帮助您确定性能瓶颈。

如果您想深入了解Lighthouse的性能指标,则本指南将分解该指标及其组成部分。

9.请记住,没有一项技术天生就是好坏

JavaScript是一种工具,具有有效的应用程序,可以创建丰富的交互式和个性化体验。锤子也是一种工具。

锤子非常适合挂照片,锤子非常适合钉子工作,但这并不适合家庭修脚。

知道你的指甲之间的区别。不要怪工具。

最好的渲染方式是什么?这取决于…

这取决于您使用的技术。这取决于您的业务目标是什么。

这要看是不是一个问题,谷歌并不想回答注销的答案。

技术细致入微。渲染是在它们之间的空间中发生的许多过程之一。

与您可以在关键字中进行的所有页面优化相比,我们看不到的行为对我们网站的影响更大。

这是您的号召性用语。保持好奇心。问问题。

与您不了解的团队不愉快地开会。提出愚蠢的问题。

看起来像主题专家面前的傻瓜。它表明您愿意学习。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 206599465@qq.com 举报,一经查实,本站将立刻删除。
分享本页
返回顶部