所有你需要知道的关于 JavaScript SEO

已发表: 2020-08-07

问任何程序员，他们都会告诉你他们对 JavaScript 的看法。

自发布以来，JavaScript (JS) 一直是全球 Web 开发人员使用的最流行的编程语言。 Stack Overflow 最近对 Web 开发人员进行的一项调查显示，JavaScript 连续八年成为最受欢迎的编程语言。

JS 允许 Web 开发人员轻松构建大型 Web 应用程序。 它具有动态更新页面并使它们更具交互性的非凡能力。 此外，AngularJS、ReactJS、Vue 和 NodeJS 等 JavaScript 框架显着减少了开发基于 JS 的网站所需的时间和精力。 难怪 JavaScript 是全球 96% 网站的基础。

然而，基于 JS 的网站似乎与 Google 有着又爱又恨的关系。 JavaScript 可以轻松控制和更改 HTML 以使网页动态和交互，从而改善网站的用户体验。 然而，搜索引擎发现处理 JS 很困难，导致大部分 JavaScript 内容未编入索引。

让我们更深入地研究一下为什么 JavaScript 会使 Google 的工作变得更加艰难，以及您可以做些什么来使您的 JS 内容对机器人友好。

Javascript 如何影响 SEO？

JavaScript 允许页面快速加载，提供丰富的界面，并且易于实现； 但是，浏览器的流动性会根据用户交互而变化，这使得搜索引擎难以理解页面并将价值与内容相关联。

搜索引擎在呈现带有 JavaScript 内容的网页时有其局限性。 Google 对页面执行初始抓取，并将找到的内容编入索引。 当资源可用时，机器人会返回在这些页面上呈现 JS。 这意味着依赖于 JavaScript 的内容和链接存在不被搜索引擎看到的风险，可能会损害网站的 SEO。

关于 js seo 的推文

资源

但是，Google 知道 JavaScript 会继续存在！ 因此，这家搜索引擎巨头将其大部分资源用于帮助搜索专业人士优化他们基于 JS 的网站。

看看这个来自 Google 的关于 JavaScript SEO 的视频系列，它可以帮助你的 JS 内容在网上更容易被发现。


SEO 专家需要以谷歌欣赏的格式来处理他们基于 JS 的网页。 稍微了解一下搜索引擎如何处理 JS 内容，就可以让 JavaScript 和 SEO 协同工作以提高您网站的排名。

搜索引擎如何处理 JavaScript？

谷歌机器人处理 JS 与非 JS 页面不同。 机器人分三个阶段处理它们，即爬行、索引和渲染。 借助以下 Google Developers 的图表，可以轻松理解这些阶段：

搜索引擎优化

资源

爬行

此阶段是关于您的内容的可发现性。 这是一个复杂的过程，涉及子过程，即种子集、爬取队列和调度、URL 重要性等。

首先，Google 的机器人将页面排队等待抓取和呈现。 机器人使用解析模块来获取页面，跟踪页面上的链接，并渲染直到页面被索引。 该模块不仅呈现页面，还分析源代码并提取 <a href=”...”> 片段中的 URL。

机器人检查 robots.txt 文件以查看是否允许爬行。 如果 URL 被标记为不允许，机器人会跳过它。 因此，检查 robots.txt 文件以避免错误至关重要。

渲染

向用户显示站点的内容、模板和其他功能的过程称为呈现。 有服务器端渲染和客户端渲染。

服务器端渲染 (SSR)

顾名思义，在这种类型的渲染中，页面填充在服务器上。 每次访问站点时，页面都会在服务器上呈现并发送到浏览器。

换句话说，当用户或机器人访问网站时，他们会收到 HTML 标记形式的内容。 这通常有助于 SEO，因为 Google 不必单独呈现 JS 来访问内容。 SSR 是传统的渲染方法，在带宽方面可能会被证明是昂贵的。

客户端渲染

客户端渲染是一种相当新的渲染类型，它允许开发人员构建他们的网站，完全在浏览器中使用 JavaScript 渲染。 因此，客户端渲染允许直接在浏览器中动态创建每个路由，而不是每个路由都有一个单独的 HTML 页面。 虽然这种类型的渲染最初很慢，因为它需要对服务器进行多轮处理，但一旦请求完成，通过 JS 框架的体验就会很快。

回到抓取页面后发生的情况，机器人会识别需要呈现的页面并将它们添加到呈现队列中，除非原始 HTML 代码中的机器人元标记告诉 Googlebot 不要索引该页面。

机器人元

页面会在渲染队列中停留几秒钟，但可能需要一些时间，具体取决于可用资源的数量。

资源

一旦资源允许，Google Web Rendering Service (WRS) 就会呈现、解析和编译页面并在页面上执行 JavaScript。 bot 再次解析呈现的 HTML 以获取链接，并将它找到的 URL 排队以进行爬行。 呈现的 HTML 用于索引页面。

索引

一旦 WRS 从外部 API 和数据库中获取数据，Google 上的 Caffeine 索引器就可以索引内容。 此阶段涉及分析 URL、了解页面上的内容及其相关性，以及将发现的页面存储在索引中。

如何为 SEO 优化 JavaScript

JavaScript 如果实施不正确，可能会破坏您的 SEO。 遵循这些 Javascript SEO 最佳实践来提高您网站的排名。

坚持您的页面搜索引擎优化工作

用于优化页面以帮助它们在搜索引擎上排名的所有页面 SEO 规则仍然适用。 优化您的标题标签、元描述、图像中的 alt 属性和元机器人标签。 独特的描述性标题和元描述帮助用户和搜索引擎轻松识别内容。 注意搜索意图和语义相关关键字的战略布局。

此外，最好有一个对 SEO 友好的 URL 结构。 在少数情况下，网站会在 URL 中实现 pushState 更改，从而使 Google 在尝试查找规范的 URL 时感到困惑。 确保检查 URL 是否存在此类问题。

确保您的 JavaScript 出现在 DOM 树中

当页面的 DOM 已充分加载时，JavaScript 呈现工作。 DOM 或文档对象模型显示页面内容的结构以及每个元素之间的关系。 您可以在页面代码上浏览器的“检查元素”中找到它。 DOM 是动态生成页面的基础。

如果您的内容可以在 DOM 中看到，那么您的内容很可能正在被 Google 解析。 检查 DOM 将帮助您确定搜索引擎机器人是否正在访问您的页面。

如果元机器人标签最初包含 noindex，机器人会跳过渲染和 JS 执行。 Googlebot 不会在页面上触发事件。 如果在 JS 的帮助下将内容添加到页面中，则应在页面加载后完成。 如果在单击按钮、滚动页面等时将内容添加到 HTML，则不会被索引。

最后，在使用结构化数据时，使用 JavaScript 生成所需的 JSON-LD 并将其注入到页面中。 顺便说一句，了解您应该从一开始就实施的顶级页面 SEO 技巧。

避免阻止搜索引擎访问 JS 内容

为了避免 Google 无法找到 JS 内容的问题，一些网站管理员使用了一个称为 cloaking 的过程，该过程将 JS 内容提供给用户，但对爬虫隐藏它。 但是，这种方法被认为违反了 Google 的网站管理员指南，您可能会因此受到处罚。 相反，要努力确定关键问题并使 JS 内容可供搜索引擎访问。

有时，站点主机可能会被无意阻止，从而阻止 Google 看到 JS 内容。 例如，如果您的网站有几个用于不同目的的子域，则每个子域都应该有一个单独的 robots.txt，因为子域被视为一个单独的网站。 在这种情况下，您需要确保这些 robots.txt 指令都不会阻止搜索引擎访问渲染所需的资源。

使用相关的 HTTP 状态码

Google 的抓取工具在抓取网页时使用 HTTP 状态代码来识别问题。 因此，您应该使用有意义的状态代码来通知机器人是否不应抓取页面或将其编入索引。 例如，您可以使用 301 HTTP 状态告诉机器人页面已移动到新 URL，从而允许 Google 相应地更新其索引。

请参阅此 HTTP 状态代码列表并了解何时使用它们：

http状态码

资源

修复重复内容

当 JavaScript 用于网站时，相同的内容可能有不同的 URL。 这会导致重复的内容问题，通常是由大小写、ID 或带有 ID 的参数引起的。 确保找到此类页面，选择要编入索引的原始/首选 URL，并设置规范标签以避免搜索引擎混淆。

修复延迟加载的内容和图像

网站速度对 SEO 至关重要。 延迟加载是一种这样的 UX 最佳实践，它可以延迟加载非关键或不可见的内容，从而减少初始页面加载时间。 但除了使页面加载更快之外，您还需要确保搜索引擎爬虫可以访问您的内容。 这些爬虫不会执行您的 JavaScript 或滚动页面来驱动延迟加载的内容，从而对您的 SEO 产生负面影响。

此外，图像搜索也是额外自然流量的来源。 因此，如果您有延迟加载的图像，搜索引擎将不会选择它们。 虽然延迟加载对用户来说非常有用，但需要小心操作以防止机器人丢失潜在的关键内容。

使用 JS SEO 工具

有大量可用的工具可以帮助您识别和修复 JavaScript 代码的问题。 这里有一些您可以利用的优势。

  • URL 检查功能。 此工具可在 Google Search Console 中找到。 它可以向您显示 Google 的抓取工具是否能够索引或抓取您的网页。
  • 搜索引擎爬虫。 这些工具使您可以有效地测试和监控搜索引擎如何抓取您的页面。
  • 页面速度洞察。 Google 的 Page Speed Insights 分享有关您网站性能的详细信息，并就如何改进它提供建议。
  • 站点：指挥部。 此工具可帮助您查看 Google 是否已正确索引您的内容。 您需要做的就是在 Google 上输入此命令 - site: [website URL] “text snippet or query”

JavaScript SEO 挑战

到目前为止，您对搜索引擎如何处理 JavaScript 内容以及如何将您的网站设置在 SEO 成功的快车道上已经有了一个清晰的认识。 但是，SEO 专家和网站管理员还面临其他一些挑战。 其中大部分源于他们在优化基于 JavaScript 的网站时所犯的错误

1. 未缩小的 JavaScript 和 CSS 文件

如果您使用 SEO 工具来审核您的 JS 网站，您可能会遇到有关未缩小的 Javascript 和 CSS 问题的警告。 在一段时间内，JS 和 CSS 文件被不必要的代码行、空格、源代码中的注释以及托管在外部服务器上所拖累，从而使您的网站变慢。 确保删除不必要的行、空格和评论，以减少页面的加载时间、提高参与率并提升 SEO。

2. 在 URL 中使用哈希

还记得 John Mueller 在 SEO 活动中所说的关于错误 URL 的内容吗？

“对我们来说，如果我们在那里看到某种散列，那就意味着那里的其余部分可能无关紧要。 在大多数情况下，当我们尝试索引内容时，我们会放弃它……”


然而，一些基于 JS 的站点会生成带有哈希的 URL。 这对您的 SEO 来说可能是灾难性的。 确保您的网址对 Google 友好。 它绝对不应该是这样的：

www.example.com/#/about -us 或

www.example.com/about#us

3.不检查内部链接结构

Google 需要正确的 <a href> 链接才能在您的网站上查找 URL。 此外，如果在单击按钮后将链接添加到 DOM，机器人将无法看到它们。 大多数网站管理员错过了这些要点，导致他们的 SEO 受到影响。

注意提供传统的“href”链接，使机器人可以访问它们。 使用网站审核工具 SEOprofiler 检查您的链接，以改进您网站的内部链接结构。

查看 Tom Greenway 在 Google I/O 会议期间的演示文稿，以获取有关正确链接结构的指导：

结论

毫无疑问，JavaScript 扩展了网站的功能。 然而，JavaScript 和搜索引擎并不总是在一起。 JavaScript 会影响搜索引擎抓取和索引网站的方式，从而影响其排名。 因此，搜索专业人员必须了解搜索引擎机器人如何处理 JS 内容，并采取必要的步骤来确保 JavaScript 适合他们的 SEO 策略。

如果您有一个基于 JS 的网站并且无法在 Google 上找到您的内容，那么是时候解决这些问题了。 使用本文中分享的信息和技巧来优化 JavaScript 以实现 SEO 并提高您的回报。