什么是JavaScript SEO？
JavaScript SEO是技术SEO的一部分，其重点是使用JavaScript构建的网站更容易被搜索引擎抓取、呈现和索引。
常见的任务包括：
优化通过JavaScript注入的内容
正确实现延迟加载
遵循内部链接最佳实践
防止、发现和修复JavaScript问题
和其他人。
注意：如果你需要更新你的基本JS知识，请阅读我们的指南：什么是JavaScript和你用它做什么？
b谷歌如何抓取和索引JavaScript？
谷歌分三个阶段处理JS：
爬行
呈现
索引
图片来源：谷歌
b谷歌的网络爬虫（被称为Googlebot）对页面进行抓取和渲染。
它抓取队列中的每个URL。
Googlebot发出请求。然后服务器发送HTML文档。
接下来，Googlebot决定需要哪些资源来呈现页面内容。
这意味着它会抓取HTML。而不是JS或CSS文件，因为渲染JavaScript需要大量的资源。
试想一下，Googlebot需要多大的计算能力来下载、读取和运行近20亿个网站上数万亿页的JS。
因此，谷歌延迟呈现JavaScript。它将任何未执行的内容排在队列中，待资源可用时再处理。
一旦资源允许，无头Chrome（没有用户界面的Chrome浏览器）呈现页面并执行JavaScript。
Googlebot再次处理呈现的HTML中的链接。并将它找到的用于爬行的url排成队列。
在最后一步中，谷歌使用呈现的HTML对页面建立索引。
服务器端渲染vs客户端渲染vs动态渲染
JavaScript索引问题很大程度上取决于您的站点如何呈现这些代码：服务器端、客户端还是动态呈现。
服务器端呈现
服务器端呈现（SSR）是指在服务器上呈现JavaScript。然后将呈现的HTML页面提供给客户端（浏览器、Googlebot等）。
例如，当你访问一个网站时，你的浏览器会向保存网站内容的服务器发出请求。
处理请求后，浏览器返回呈现的HTML并将其显示在屏幕上。
SSR倾向于帮助网页的SEO性能，因为：
它可以减少加载页面主要内容所需的时间
它可以减少影响用户体验的布局变化
然而，SSR会增加页面允许用户输入所需的时间。
这就是为什么一些处理大量JS的网站选择对某些页面使用SSR而不是其他页面。
在这样的混合模型下，SSR通常用于对SEO有影响的页面。客户端呈现（CSR）通常是为需要大量用户交互和输入的页面保留的。
但是对于开发人员来说，实现SSR通常是复杂且具有挑战性的。
尽管如此，还是有一些工具可以帮助实现SSR：
用于React框架的Gatsby和Next.JS
用于Angular框架的Angular Universal
Vue.js框架的next .js
阅读本指南，了解有关设置服务器端呈现的更多信息。
客户端渲染
CSR是SSR的反义词。在这种情况下，JavaScript是使用文档对象模型（DOM）在客户端（在这种情况下是浏览器或Googlebot）呈现的。
与在服务器端呈现时从HTML文档接收内容不同，您将获得一个带有JavaScript文件的基本HTML，该JavaScript文件使用浏览器呈现站点的其余部分。
大多数使用CSR的网站都有复杂的用户界面或许多交互。
查看本指南，了解有关如何设置客户端呈现的更多信息。
动态呈现
动态呈现是服务器端呈现的替代方案。
它检测机器人在js生成的内容中可能存在问题，并提供不使用JavaScript的服务器呈现版本。
同时向用户显示客户端渲染版本。
动态渲染是一种变通方法，而不是谷歌推荐的解决方案。它为谷歌创建了额外的、不必要的复杂性和资源。
如果您的网站很大，内容变化很快，需要快速建立索引，那么您可以考虑使用动态呈现。
或者如果你的网站依赖于需要访问页面内容的社交媒体和聊天应用程序。
或者对您的站点很重要的爬虫不能支持您的JS的某些特性。
但实际上，动态渲染很少是一个长期的解决方案。您可以从谷歌的指南中了解有关设置动态呈现和一些替代方法的更多信息。
注意：谷歌一般不认为动态呈现是“伪装”（向搜索引擎和用户呈现不同内容的行为）。虽然由于其他原因，动态呈现并不理想，但它不太可能违反b谷歌垃圾邮件策略中概述的隐藏规则。
如何使您的网站的JavaScript内容seo友好
您可以遵循几个步骤来确保搜索引擎正确地抓取、呈现和索引您的JS内容。
使用谷歌搜索控制台查找错误
Googlebot基于Chrome的最新版本。但它的行为方式与浏览器不同。
这意味着启动您的网站并不能保证谷歌能够呈现其内容。
谷歌搜索控制台（GSC）中的URL检查工具可以检查谷歌是否可以渲染您的页面。
在最上面输入要测试的页面的URL。然后按回车键。
然后，点击最右边的“Test Live URL”按钮。
一两分钟后，该工具将显示一个“实时测试”选项卡。现在，点击“查看测试页面”，你会看到页面的代码和截图。
通过点击“更多信息”选项卡检查任何差异或缺失的内容。
谷歌无法呈现JS页面的一个常见原因是您站点的robots.txt文件阻止了呈现。经常不小心。
将以下代码添加到robot.txt文件中，以确保没有阻止抓取关键资源：
用户代理:广告
允许:. js
允许:. css
注意：谷歌不会在搜索结果中索引。js或。css文件。它们被用来渲染网页。
没有理由封锁这些关键资源。这样做会阻止您的内容被呈现，进而阻止您的内容被索引。
确保谷歌正在索引JavaScript内容
确认页面正确呈现后，确保它们已被编入索引。
你可以在GSC或搜索引擎上查看。
要查看谷歌，使用“site：”命令。例如，将下面的yourdomain.com替换为您要测试的页面的URL：
网站:yourdomain.com/page-URL/
如果页面被索引，您将看到它作为结果显示出来。像这样:
如果不这样做，页面就不在谷歌的索引中。
如果页面已被索引，请检查javascript生成的内容部分是否已被索引。
同样，使用“site：”命令并在页面上包含JS内容片段。
例如:
网站：yourdomain.com/page-URL/“JS内容片段”
您正在检查JS内容的这个特定部分是否已被索引。如果是，您将在代码片段中看到它。
是这样的:
您还可以使用GSC查看JavaScript内容是否被索引。同样，使用URL检查工具。
这一次，不是测试实时URL，而是点击“查看抓取页面”按钮。并检查页面的HTML源代码。
扫描HTML代码中的JavaScript内容片段。
如果你看不到JS内容，可能有以下几个原因：
无法呈现内容
这个URL无法被发现，因为JS会在点击事件中生成指向它的内部链接
当谷歌索引内容时，页面超时
进行站点审计
定期对您的站点进行审计是技术SEO的最佳实践。
Semrush的站点审计工具可以像谷歌一样抓取JS。即使它是在客户端呈现的。
首先，输入您的域，然后单击“创建项目”。
然后，在爬虫设置中为js渲染选择“启用”。
在抓取之后，你会在“问题”选项卡下发现任何问题。
常见的JavaScript SEO问题&如何避免它们
以下是一些最常见的问题，以及一些JavaScript SEO最佳实践：
阻止robots.txt文件中的.js文件可以防止Googlebot抓取这些资源。这意味着它不能渲染和索引它们。允许抓取这些文件以避免此问题。
谷歌不会等待很长时间来呈现JavaScript内容。由于超时错误，您的内容可能无法编入索引。
搜索引擎不会点击按钮。使用内部链接来帮助Googlebot发现你网站的页面。
当使用JavaScript延迟加载页面时，不要延迟加载应该被索引的内容。设置延迟加载时，主要关注图像和文本内容。
谷歌通常会忽略散列，因此请确保为您网站的网页生成静态url。确保您的url看起来像这样：（yourdomain.com/web-page）。而不是像这个（yourdomain.com/#/web-page）或这个（yourdomain.com#web-page）。
更进一步
如果你使用你所学到的关于JavaScript SEO的知识，你将很好地创建高效的网站，排名好，用户喜欢。
准备好深入探索了吗？
我们建议阅读以下内容，以了解更多关于JS和技术SEO的信息：
JavaScript命令备忘单
如何用JavaScript重定向URL
如何使用JS改变元标签
如何让谷歌索引你的网站
可抓取性、可索引性和SEO