使用这些解决方案使你的JavaScript网站对搜索引擎优化友好。
现代大多数网站都包含JavaScript，使其具有动态和交互性。尽管搜索引擎机器人非常智能，但它们仍然可能无法渲染很多JavaScript内容，影响页面排名。
JavaScript内容很大程度上取决于您的网站如何渲染代码。
例如，在服务器端渲染中，服务器包含网站的内容。在请求之后，浏览器接收到完全渲染的HTML。
然而，在客户端渲染中，JavaScript是通过浏览器使用DOM进行渲染的。
渲染的第三种选项是动态渲染，其中在客户端渲染的内容发送到浏览器，而在服务器端渲染的内容发送到搜索引擎。
渲染技术会影响JS的渲染方式，从而影响页面排名。
要确保您的网站所有的JS代码都得到渲染，您应该遵循正确的JavaScript SEO实践。但首先，让我们了解一下什么是JavaScript SEO。
什么是JavaScript SEO？
JavaScript SEO使搜索引擎能够爬取和索引网站（或网页）的JavaScript代码（动态内容）。Google或任何其他搜索引擎在处理JavaScript时会经过三个阶段，即爬取、渲染和索引。为了让Google完成所有这些工作，JavaScript内容应该是SEO友好的，即可见且可用。
Google如何处理页面上的JavaScript内容
以下是Googlebot处理JavaScript的步骤：
- 通过HTTP请求从爬取队列中获取URL
- 检查robots.txt文件，查找站点不允许爬取的URL
- 跳过“disallowed”URL，解析响应中的其他URL，并将它们添加到爬取队列中
- 排队渲染页面，但不对标记为不索引的页面进行渲染
- Chromium渲染页面，执行JavaScript，然后索引页面
- 再次解析渲染的HTML以获取链接
- 将URL排队进行爬取
何时Google不索引JavaScript内容？
如果正确实现，Google可以索引JavaScript。例如，如果您的一些JS和CSS文件被隐藏，Google可能无法正确爬取网站。同样，如果原始HTML中存在的链接在渲染的HTML中不存在，Google可能会跳过这些链接的爬取或索引。
此外，如果JavaScript不直接嵌入HTML中，Google必须下载该文件进行执行。此外，搜索引擎可能会对网页进行缓存（以提高性能），而页面上的JavaScript可能与缓存的版本不同步。
由于每一行JavaScript代码都应该被读取，过度使用JavaScript可能会降低页面速度或导致超时错误。
为什么JavaScript SEO很重要？
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代码。 |
JavaScript SEO的最佳实践
通过遵循一些最佳实践，我们可以使搜索引擎更好地抓取和渲染页面：
按照定义的Web标准添加链接和图片
使用ahref标签添加所有链接，而不是onclick，#pageurl或window.location.href='/page-url。Google可以轻松抓取并跟踪这些链接。
欢迎来到Geek世界同样，使用img src标签添加图片，而不是img data-src标签：
首选服务器端渲染
确保您的网站内容在服务器上可用，而不仅仅是用户浏览器上。
确保渲染的HTML包含所需显示的所有重要内容
渲染的HTML应包含正确的标题、元数据、图像、结构化数据和规范标签。
使您的JavaScript网站对SEO友好
要测试您网页上的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。
