使用这些解决方案使你的JavaScript网站对搜索引擎优化友好。

现代大多数网站都包含JavaScript，使其具有动态和交互性。尽管搜索引擎机器人非常智能，但它们仍然可能无法渲染很多JavaScript内容，影响页面排名。

JavaScript内容很大程度上取决于您的网站如何渲染代码。

例如，在服务器端渲染中，服务器包含网站的内容。在请求之后，浏览器接收到完全渲染的HTML。

然而，在客户端渲染中，JavaScript是通过浏览器使用DOM进行渲染的。

渲染的第三种选项是动态渲染，其中在客户端渲染的内容发送到浏览器，而在服务器端渲染的内容发送到搜索引擎。

渲染技术会影响JS的渲染方式，从而影响页面排名。

要确保您的网站所有的JS代码都得到渲染，您应该遵循正确的JavaScript SEO实践。但首先，让我们了解一下什么是JavaScript SEO。

什么是JavaScript SEO？

JavaScript SEO使搜索引擎能够爬取和索引网站（或网页）的JavaScript代码（动态内容）。Google或任何其他搜索引擎在处理JavaScript时会经过三个阶段，即爬取、渲染和索引。为了让Google完成所有这些工作，JavaScript内容应该是SEO友好的，即可见且可用。

以下是Googlebot处理JavaScript的步骤：

如果正确实现，Google可以索引JavaScript。例如，如果您的一些JS和CSS文件被隐藏，Google可能无法正确爬取网站。同样，如果原始HTML中存在的链接在渲染的HTML中不存在，Google可能会跳过这些链接的爬取或索引。

此外，如果JavaScript不直接嵌入HTML中，Google必须下载该文件进行执行。此外，搜索引擎可能会对网页进行缓存（以提高性能），而页面上的JavaScript可能与缓存的版本不同步。

由于每一行JavaScript代码都应该被读取，过度使用JavaScript可能会降低页面速度或导致超时错误。

JavaScript SEO很重要，因为它会影响许多页面元素和排名因素，这些因素是Google（或搜索引擎）用于进行SEO扫描的：

页面元素	潜在的SEO问题	可能的SEO解决方案
渲染内容	如果网站的资源在网站的robots.txt文件中被阻止，搜索引擎（如Google）无法渲染您的页面。另外，Google无法索引或渲染被阻止或隐藏的JS和CSS文件。	减少页面核心内容上的JavaScript，采用其他方法进行客户端渲染，如服务器端渲染、动态渲染、混合渲染（客户端和服务器端的结合）
链接	如果一些链接是内部链接或JavaScript在用户点击链接时生成链接到URL，Google无法发现这些链接。	使用带有href属性的锚链接，为链接使用描述性的锚文本。伪链接如和标签不会被抓取
元数据	除非网站使用vue-meta等类似的Node.js packages，否则搜索引擎可能会为每个视图或页面抓取相同或更糟糕的元数据。	使用Node.js包如react-helmet、vue-meta、react-meta-tags
延迟加载的图片	搜索引擎爬虫不会选择任何标记为延迟加载的内容。搜索引擎无法滚动内容，因此某些内容可能永远不会被渲染。	使用IntersectionObserver API，该API在DOM元素可用后可以理解DOM元素的可见性和位置。您还可以使用浏览器（Chrome）的原生延迟加载功能。
页面加载时间	具有大量JavaScript内容的页面可能加载缓慢，这可能会影响其搜索排名。	将关键的JS代码内联并将非关键的JS代码推迟到主要内容被渲染后，减少总体JS代码。

通过遵循一些最佳实践，我们可以使搜索引擎更好地抓取和渲染页面：

使用ahref标签添加所有链接，而不是onclick，#pageurl或window.location.href='/page-url。Google可以轻松抓取并跟踪这些链接。

欢迎来到Geek世界

同样，使用img src标签添加图片，而不是img data-src标签：

确保您的网站内容在服务器上可用，而不仅仅是用户浏览器上。

渲染的HTML应包含正确的标题、元数据、图像、结构化数据和规范标签。

要测试您网页上的JavaScript SEO实现，可以按照以下步骤进行：

了解您的网站使用了多少JavaScript：为此，您可以简单地在浏览器中禁用JavaScript。如果您没有看到太多内容，这意味着您的网站在很大程度上依赖JavaScript。
检查Googlebot是否获取了所有重要的内容和标签：您可以使用Google mobile-friendly test tool或富结果测试工具来检查Googlebot如何使用原始HTML来渲染内容。
您还可以使用像View Rendered Source这样的Chrome扩展程序，了解JavaScript如何改变页面并比较源HTML和渲染后的HTML。
您可以使用SEO Pro Chrome extension在渲染后的HTML上检查重要的标签（标题、元描述等）。

在本文中，我们了解了JavaScript如何使SEO处理变得有些复杂以及解决由于在代码中添加大量JavaScript而引起的潜在问题的方法。

我们还介绍了一些最佳实践和工具，以使您的JavaScript网站对SEO友好。帮助Google识别和抓取您的动态内容的其他很棒的工具包括Prerender、AngularJS和Huckabuy。