CONTACT
US

2022-04-25 Viewed: 704 Tags: seo google 海外营销 google seo 谷歌优化外贸自建站谷歌seo2022 Java平台开发

JavaScript SEO 进阶指南

SEO 面临的更常见的技术 SEO 挑战之一是让 Google 索引 JavaScript 内容。JavaScript 在网络上的使用正在迅速增加。有据可查的是，由于忽略了 JavaScript SEO 的重要性，许多网站都在努力推动有机增长。

如果您在使用 JavaScript 框架（例如 React、Angular 或 Vue.js）开发的网站上工作，您将不可避免地面临与使用 WordPress、Shopify 或其他流行 CMS 平台的网站不同的挑战。但是，要在搜索引擎上取得成功，您必须确切地知道如何检查您网站的页面是否可以呈现和索引，识别问题并使其对搜索引擎友好。在本指南中，我们将教您需要了解的有关 JavaScript SEO 的所有信息。具体来说，我们将看看：

什么是 JavaScript？
什么是 JavaScript SEO？
Google 如何抓取和索引 JavaScript？
如何使您网站的 JavaScript 内容对 SEO 友好
服务器端渲染与客户端渲染与动态渲染
常见的 JavaScript SEO 问题以及如何避免它们

什么是 JavaScript？

JavaScript 或 JS 是一种用于网站的编程（或脚本）语言。简而言之，JavaScript 与 HTML 和 CSS 并驾齐驱，提供了原本无法实现的交互性水平。对于大多数网站来说，这意味着动画图形和滑块、交互式表单、地图、基于网络的游戏和其他交互式功能。

但是，使用 React 或 Angular 等 JavaScript 框架构建整个网站变得越来越普遍，这些框架可用于为移动和 Web 应用程序提供动力。这些框架可以构建单页和多页 Web 应用程序这一事实使它们越来越受到开发人员的欢迎。但是使用 JavaScript 以及其他框架会带来一系列 SEO 挑战。我们将在下面看看这些。

什么是 JavaScript SEO？

JavaScript SEO 是技术 SEO 的一部分，它涉及使搜索引擎更容易抓取和索引 JavaScript。JavaScript 网站的 SEO 提出了自己独特的挑战和流程，必须遵循这些挑战和流程，以使搜索引擎能够索引您的网页，从而最大限度地提高您的排名机会。也就是说，在使用 JavaScript 网站时很容易犯常见错误。开发人员将进行更多的来回交流，以确保一切都正确完成。然而，JavaScript 越来越受欢迎，作为 SEO，了解如何正确优化这些网站是一项重要的学习技能。

Google 如何抓取和索引 JavaScript？

让我们澄清一件事：谷歌在渲染 JavaScript 方面比几年前更好，因为这通常需要数周才能发生。但在我们深入研究确保您网站的 JavaScript 对 SEO 友好并且实际上可以被抓取和索引的方法之前，您需要了解 Google 是如何处理它的。这发生在三个阶段的过程中：

抓取
渲染
索引

让我们更深入地看看这个过程，将其与 Googlebot 如何抓取 HTML 页面进行比较。这是一个快速而简单的过程，从下载 HTML 文件、提取链接和下载 CSS 文件开始，然后将这些资源发送到 Google 的索引器 Caffeine。咖啡因然后索引页面。

与 HTML 页面一样，该过程从下载的 HTML 文件开始。然后链接是由 JavaScript 生成的，但是这些不能被提取出来。因此，Googlebot 会下载页面的 CSS 和 JS 文件，然后需要使用属于 Caffeine 的 Web 渲染服务来索引此内容。然后，WRS 可以索引内容并提取链接。

而现实情况是，这是一个复杂的过程，比 HTML 页面需要更多的时间和资源，而且在 JavaScript 呈现之前，Google 无法索引内容。抓取 HTML 网站既快速又高效：Googlebot 下载 HTML，然后提取页面上的链接并抓取它们。但是当涉及到 JavaScript 时，这不能以同样的方式发生，因为必须在提取链接之前渲染它。让我们看一下使您网站的 JavaScript 内容 SEO 友好的方法。

如何使您网站的 JavaScript 内容对 SEO 友好？

Google 必须能够抓取和呈现您网站的 JavaScript 才能将其编入索引。然而，面临阻止这种情况发生的挑战并不少见。但是，在确保您网站的 JavaScript 对 SEO 友好时，您可以遵循几个步骤来确保您的内容被呈现和索引。

实际上，它归结为三件事：

确保 Google 可以抓取您网站的内容
确保 Google 可以呈现您网站的内容
确保 Google 可以索引您网站的内容

您可以采取一些步骤来确保这些事情能够发生，以及提高 JavaScript 内容的搜索引擎友好性的方法。让我们来看看这些是什么。

1. 确保 Google 可以使用 Google Search Console 呈现您的网页

虽然 Googlebot 基于 Chrome 的最新版本，但它的行为方式与浏览器不同。这意味着在此打开您的网站并不能保证您的网站内容可以呈现。您可以使用 Google Search Console 中的 URL 检查工具来检查 Google 是否可以呈现您的网页。输入您要测试的页面的 URL，然后在屏幕右上角查找“测试实时 URL”按钮。

一两分钟后，您会看到“实时测试”选项卡出现，当您点击“查看测试页面”时，您会看到显示 Google 如何呈现它的页面屏幕截图。您还可以在 HTML 选项卡中查看呈现的代码。检查是否存在任何差异或缺少内容，因为这可能意味着资源（包括 JavaScript）被阻止或发生错误或超时。点击“更多信息”选项卡查看任何错误，因为这些可以帮助您确定原因。

Google 无法呈现 JavaScript 页面的最常见原因是这些资源在您网站的 robots.txt 文件中被阻止，这通常是意外情况。将以下代码添加到该文件中，以确保不会阻止抓取关键资源：

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

但是让我们澄清一件事； Google 不会在搜索结果中索引 .js 或 .css 文件。这些资源用于呈现网页。没有理由阻止关键资源，这样做会阻止您的内容被呈现，进而阻止被索引。

2. 确保 Google 正在索引您的 JavaScript 内容

如果您确认您的网页正在正确呈现，您需要确定它是否被编入索引。您可以通过 Google Search Console 以及直接在搜索引擎上进行检查。前往 Google 并使用 site: 命令查看您的网页是否在索引中。例如，将下面的 yourdomain.com 替换为您要测试的页面的 URL：

site:yourdomain.com/page-URL/

如果该页面在 Google 的索引中，您会看到该页面显示为返回结果。如果您没有看到 URL，这意味着该页面不在索引中。但是让我们假设它是并检查是否有一段 JavaScript 生成的内容被索引。再次，使用 site: 命令并在旁边包含一段内容。例如：

site:yourdomain.com/page-URL/ "snippet of JS content"

在这里，您正在检查此内容是否已被索引，如果是，您将在代码段中看到此文本。您还可以使用 Google Search Console 分析 JavaScript 内容是否被索引，同样使用 URL 检查工具。这一次，不是测试实时 URL，而是单击“查看已抓取页面”按钮并查看索引页面的 HTML 源代码。扫描您知道由 JavaScript 生成的内容片段的 HTML 代码。

Google 无法为您的 JavaScript 内容编制索引的原因可能有很多，包括：

无法在第一个实例中呈现内容
由于 JavaScript 会在单击时生成指向该 URL 的链接，因此无法发现该 URL
在 Google 为内容编制索引时页面超时
Google 确定 JS 资源对页面的更改不足以保证被下载
我们将在下面查看一些常见问题的解决方案。

服务器端渲染与客户端渲染与动态渲染

您是否面临 Google 索引您的 JavaScript 内容的问题很大程度上取决于您的网站如何呈现此代码。而且你必须了解服务器端渲染、客户端渲染和动态渲染之间的区别。

作为 SEO人员，我们需要学习与开发人员合作，以克服使用 JavaScript 的挑战。虽然 Google 继续改进其抓取、呈现和索引 JavaScript 生成的内容的方式，但您可以从一开始就防止许多常见问题成为问题。

事实上，了解呈现 JavaScript 的不同方式可能是 JavaScript SEO 需要了解的最重要的事情。那么这些不同类型的渲染是什么，它们是什么意思呢？

服务器端呈现 (SSR) 是指 JavaScript 在服务器上呈现，并将呈现的 HTML 页面提供给客户端（浏览器、Googlebot 等）。页面被抓取和索引的过程与我们上面描述的任何 HTML 页面相同，不应该存在特定于 JavaScript 的问题。

根据 Free Code Camp 的说法，SSR 的工作原理如下：

“每当您访问一个网站时，您的浏览器都会向包含该网站内容的服务器发出请求。一旦请求完成处理，您的浏览器就会取回完全呈现的 HTML 和将其显示在屏幕上。”

这里的问题是 SSR 对开发人员来说可能是复杂且具有挑战性的。尽管如此，仍然存在诸如 Gatsby 和 Next.JS（用于 React 框架）、Angular Universal（用于 Angular 框架）或 Nuxt.js（用于 Vue.js 框架）等工具来帮助实现这一点。

客户端渲染 (CSR) 与 SSR 完全相反，是客户端（在本例中为浏览器或 Googlebot）使用 DOM 渲染 JavaScript 的地方。当客户端必须呈现 JavaScript 时，当 Googlebot 尝试抓取、呈现和索引内容时，可能会存在上述挑战。

同样，根据 Free Code Camp 的说法：

“当开发人员谈论客户端渲染时，他们是在谈论使用 JavaScript 在浏览器中渲染内容。因此，您不是从 HTML 文档本身获取所有内容，而是得到一个裸露的-bones 带有 JavaScript 文件的 HTML 文档，该文件将使用浏览器呈现网站的其余部分。”

当您了解 CSR 的工作原理时，就会更容易理解为什么会出现 SEO 问题。动态呈现是服务器端呈现的替代方案，也是一种可行的解决方案，用于为包含在浏览器中生成的 JavaScript 内容但对 Googlebot 提供静态版本的用户提供站点。这是由 Google 的 John Mueller 在 Google I/O 2018 上介绍的：

将其视为将客户端呈现的内容发送给浏览器中的用户，并将服务器端呈现的内容发送给搜索引擎。这也得到了 Bing 的支持和推荐，并且可以使用诸如 prerender.io 之类的工具来实现，该工具将自己描述为“JavaScript SEO 的火箭科学”。 Puppeteer 和 Rendertron 是其他替代方案。

澄清许多 SEO 可能会遇到的问题：只要提供的内容相似，动态渲染就不会被视为伪装。唯一被认为是伪装的情况是提供了完全不同的内容。使用动态呈现，用户和搜索引擎看到的内容将是相同的，可能只是具有不同级别的交互性。

您可以在此处了解有关如何设置动态渲染的更多信息。

常见的 JavaScript SEO 问题以及如何避免它们

面对由 JavaScript 引起的 SEO 问题并不少见，下面您将找到一些常见的问题，以及如何避免这些问题的提示。

阻止 robots.txt 文件中的 .js 文件会阻止 Googlebot 抓取这些资源，因此无法呈现这些资源并将其编入索引。允许抓取这些文件以避免由此引起的问题。
Google 通常不会等待很长时间来呈现 JavaScript 内容，如果这被延迟，您可能会发现内容因超时错误而未编入索引。
设置分页，其中指向第一个页面之外的页面的链接（比如说在电子商务类别上）仅通过点击事件（点击）生成，这将导致这些后续页面不会被抓取，因为搜索引擎不会点击按钮。请务必使用静态链接来帮助 Googlebot 发现您网站的网页。
使用 JavaScript 延迟加载页面时，请确保不要延迟加载应编入索引的内容。这通常应该用于图像而不是文本内容。
客户端呈现的 JavaScript 无法以与服务器端呈现的内容相同的方式返回服务器错误。例如，将错误重定向到返回 404 状态代码的页面。
确保为您网站的网页生成静态 URL，而不是使用 #。这样可以确保您的 URL 看起来像这样 (yourdomain.com/web-page) 而不是这样 (yourdomain.com/#/web-page) 或这样 (yourdomain.com#web-page)。使用静态 URL。否则，这些页面将不会被编入索引，因为 Google 通常会忽略哈希。

不可否认，JavaScript 会导致对您网站内容的抓取和索引问题。尽管如此，通过了解为什么会这样并了解处理以这种方式生成的内容的最佳方式，您可以大大减少这些问题。完全掌握 JavaScript 需要时间，但即使 Google 在索引它方面做得更好，也明显需要建立您的知识和专业知识，以克服您可能面临的问题。

数聚梨软件为您提供最专业的独立站建站，谷歌seo优化服务，1-3个月内网站权重以及关键词进入谷歌前10页数量显著增加。

立即点击淘宝咨询

立即扫描二维码微信咨询