7 个常见的 JavaScript SEO 问题以及如何处理它们

JavaScript 对 SEO 不利吗？当然不！然而，在使 JavaScript SEO 友好时，您可能会遇到一些最常见的问题：

1.Robot.txt阻塞资源

请记住，渲染器的工作原理是缓存站点的所有构建块。如果 Google 无法访问它们，那么渲染器将无法使用它们，因此您的页面将无法正确索引。

要解决此问题，请将此代码段添加到您的 robots.txt 文件中：

User-Agent: GooglebotAllow: .jsAllow: .css

2. Google 看不到内部链接

Google 不会像普通用户那样从一个页面导航到另一个页面。相反，它会下载页面的无状态版本。

这意味着它不会捕获依赖于前一页上发生的情况的页面上的任何更改。

这和链接有什么关系？那么，如果您的链接依赖于某个操作，Google 将无法找到该链接，也无法找到您网站上的所有页面。

像：

<a onclick=”goTo(‘page’)”>Anchor</a>
<a href=”javascript:goTo(‘page’)”>Anchor</a>
<span onclick=”goTo(‘page’)”>Anchor</span>

行不通。

所有链接都需要位于 <a></a> 标记之间，并在 href 属性中定义目标 URL，以便 Google 能够找到并跟踪它。

如果这听起来像您的页面，那么是时候将您的所有链接更改为更适合 SEO 的格式了。

如果您出于某种原因需要为链接声明操作，则可以结合使用这两种语法：

<a href=”https://www.web176.com.com” onclick=”goTo(‘www.web176.com.com’)”>Anchor</a>

注意：此规则也适用于分页。将相应的标签和属性添加到分页菜单中。

3. 过时的站点地图

Google 喜欢站点地图，因为它们可以帮助 Googlebot 更快地抓取网站并找到新页面。然而，手动保持它们最新可能会成为一项耗时的挑战。

幸运的是，大多数 JavaScript 框架都有路由器来帮助您清理 URL 并生成站点地图。

只需在 Google 中搜索您正在使用的框架以及短语“路由器站点地图”即可。这是React 的站点地图路由器的示例。

注意：我们不一定推荐这款路由器 – 在购买一款路由器之前一定要先进行研究。

4. 客户端渲染

使用React、Angular、Vue和其他 JavaScript 框架构建的站点都默认设置为客户端渲染 (CSR)。

这样做的问题是 Google 抓取工具实际上无法看到页面上的内容。他们看到的只是一张空白页。

一种可能的解决方案是使用更传统的选择：服务器端渲染（SSR）。

注意：这是服务器端和客户端渲染之间的完整比较以及它们如何影响您的 SEO。

然而，如果您选择 SSR，您将失去只能通过 CSR 才能获得的用户体验优势。

为了获得两全其美的效果，我们建议您使用预渲染。

只需安装 Prerender 的中间件，它就会验证请求您页面的每个用户代理。如果它是搜索引擎爬虫（例如 Googlebot），它将发送您页面的渲染 HTML 版本。如果是人，它将通过正常的服务器路由重定向用户。

注意：如果您想为站点启用 SSR，请参阅以下指南，了解如何为 Angular 和 React 启用服务器端渲染。

5.无限滚动屏蔽内容

与传统分页相比，无限滚动有很多优点。然而，搜索引擎爬虫几乎不可能以这种方式访问​​您的所有内容。

请记住，Googlebot 不会与页面交互，因此无需向下滚动即可查找新链接/页面。

为了解决这个问题，您可以并行生成分页。

Delante 团队在其无限滚动 SEO文章中详细解释了如何实施此解决方案。如果您现在正在为此苦苦挣扎，那么确实值得一看。

6. 大且未优化的JS文件

虽然这在技术上不是问题，但您的 JavaScript 代码可能会通过阻止关键资源来阻止您的网站快速加载。

在浏览器向用户显示网站之前，需要渲染所有必要的 JS。这会对您的用户体验产生负面影响，从而影响您的搜索引擎优化。

您可以采取以下几项措施来改善网站的 JavaScript SEO：

• 使用https://javascript-minifier.com/等工具缩小 JS 文件
• 延迟 JavaScript 加载，以便浏览器可以首先渲染 HTML 和 CSS 文件。
• 不要将 JavaScript 用于不需要的事情。例如，您可以使用 CSS 来延迟加载图像而不是 JS。

7. 正确设置 Head 标签

SEO 喜欢头标签，但对于开发人员来说，管理项目中每个页面的所有标签可能会变得很烦人，这可能会导致错误。

要管理所有这些 SEO 标签，您可以使用React Helmet等模块来添加标签并管理一个组件的所有更改。

您可以找到适用于所有主要 JavaScript 框架的类似解决方案。

8. Google 的缓存问题（奖励）

有一个问题可能与 Google 的缓存过程有关。

因为 Google 在抓取您的网站时会缓存几乎所有资源（从 HTML 到 API 请求），然后使用这些信息进行渲染，所以当它使用旧文件来尝试理解更新的页面时，可能会导致严重的问题。

对于这些情况，最好的解决方案是为发生重大更改的文件生成新的文件名，以强制 Google 下载更新的资源并正确抓取页面。

我们希望您已经找到问题的解决方案，或者至少学会了如何更有效地检测问题。使用像Prerender这样的 SEO 渲染器可能有助于解决其中一些 JavaScript 问题，但 JavaScript 的 SEO 根据您网站的需求而有很大差异。

JavaScript 的使用只会不断增长，我们的工作就是不断为我们的项目和业务寻找解决方案。