JavaScript SEO终极指南-问题与解决方案

Seo 技术 人员 技术 对 对 html 和 css 都 非常 熟悉 了 —— 这 是 是 我们 我们 在 构建 网站 中 最 常 常 用到 的 的 的 2 种 编程 编程 语言。 但 但 近 些 年 年 年 年 年 年 来 来 逐渐 逐渐 逐渐 变得 变得 流行。。 大多数 网站 网站 都 都 使用 某些 某些 某些 某些 来 来 来 来 来 来 来增加 增加 功能 交互 交互 改善 用户 体验。 有的 有的 网站 网站 使用 使用 JavaScript 来 实现 菜单 功能 功能, 有的 使用 它 来 来 抓取 抓取 或者 或者 价格 价格 信息 信息 信息 信息 信息 信息 信息 它 它 从 从 多 个 获取 内容 内容 在 某些 情况 情况 下 下 网站 网站 全 全 全 全站使用자바스크립트。

据 据 的 我 我 我 我 达 达 80%的 知名 电子 商务 商务 商务 商店 商店 商店 商店 使用 使用 使用 使用 使用 来 来 来 生成 生成 主要 内容 或 类似 产品 的 链接 链接 链接 链接 链接 链接 链接 链接 链接 然而 然而 然而 然而 然而 然而 然而 网站 —— 尽管 它 它 很 受 受 欢迎 —— 谷歌 中 表现 表现 表现 不 不 表现 表现 表现 表现 表现 表现 网站 网站 网站 网站 网站 ——佳，因为它们没有正确地进行JavaScript SEO。

作为 作为 名 seo 爱好者 爱好者 爱好者 爱好者 想 行业 行业 最 最 佳 实践 实践 及 及 我 我 自身 的 的 经验 经验 分享 对 对 JavaScript seo 的 看法。。 希望 帮助 帮助 帮助 从业 人员 人员 理解 是 如何 处理 处理 处理 javascript 的, 以及 相关 相关 问题 问题 时 如何 解决。。。。 最 是 如何 如何重要的是，如何在使用JavaScript的同时确保您的网站排名不受影响。

一、什么是자바스크립트?

JavaScript 是 cript 种 脚本 脚本 脚本 脚本 语言 语言 语言 语言 语言 语言 语言 语言 语言 语言 语言 语言 语言 语言 语言 功能 功能 功能 功能 功能 功能 网页 展现 给 给 给 您 您 的 的 不 再 是 简单 简单 的 静态 信息 而 是 实时 的 的 内容 内容 内容 内容 更新 更新 更新 交互式 交互式 的 地图 地图 地图 地图 地图 地图 地图 地图 动画 动画 动画 动画，滚动播放的视频等。

当我们谈论基于JavaScript构建的网站时，我们并不是指简单地向HTML文档添加一层JS交互性（例如，将JS动画添加到静态网页）。在这种情况下，基于JavaScript的网站指的是核心或主要内容是通过JavaScript实现的。

二、如何检查网站是否使用JavaScript构建

那么，您可以通过哪些方式检查网站是否使用JavaScript构建呢?在此，我们介绍三种方法以供参考。

1. WWJD는 WWappalyzer之类로 제작되었습니다.
2. 在浏览器中通过“检查元素”或“查看源代码”来检查JS代码。您可能会发现流行的JavaScript框架，例
3. Chrome上의 Quick JavaScript Switcher는 Java Script Switch입니다.元素消失了，则表示它们是由JavaScript 생성.

三、什么是JavaScript SEO?

JavaScript SEO是기술적 SEO的一个分支。它主要关注：

• 优化由JavaScript构建的内容，以供搜索引擎抓取、呈现和索引。
• JavaScript와 Angular和jQuery를 함께 사용할 수 있습니다.
• 通过采用最佳实践确保网页可被搜索引擎发现及解读。
• 改进页面解析和执行JS代码的页面加载时间，以优化用户体验(UX)。

四、谷歌可以索引JavaScript吗?

Google 正确 正确 可以 处理 处理 javaScript 内容 是 是 是 是 人员 人员 最 关心 的 的 问题 问题。 我们 我们 首先 来 看看 看看 Google 对 这个 问题 回答 ： ： “目前 目前, 处理javascript内容 比较 困难 困难 困难 并 非 所有 搜索 搜索 搜索 引擎 引擎 抓取 工具 能够 能够 成功 处理 或 直接 直接 直接 直接 直接 直接 直接 处理 并 并 并 非 非 非 非 非 非 非 非 非 非 非 非 非 非 非 非 所有 所有 所有 目前 内容 ： ： ： ： 这个 这个 对 这个 这个 这个 这个 这个 这个 这个 这个 这个 这个인지 的 这个 这个 这个 这个 这个 这个 这个 这个 这个 这个 这个 这个 这个 효과가 있습니다.此类内容。」

SEO行业内也普遍认同比起HTML，Google处理JavaScript显得有些困难。那么为什么谷歌（和其他搜索引擎）可能在处理JavaScript时遇到困难？为了解答这个问题，我们可能需要对Google处理网页的流程有一个清晰的认知。

1.Google如何抓取HTML网站?

在传统HTML网站，Google爬取网页的过程简单明了：

1. Googlebot下载HTML文件。
2. Googlebot从源代码中提取链接，并可以同时访问它们。
3. Googlebot下载CSS文件。
4. Googlebot将所有下载的资源发送到Google的Indexer(카페인)。
5. 索引器（카페인）索引页面。

2.Google如何抓取JavaScript网站?

1. Googlebot会下载HTML文件。
2. Googlebot은 현재 사용 중입니다.
3. Googlebot会下载CSS와 JS文件。
4. Googlebot必须使用Google Web Rendering Service（Caffeine Indexer的一部分）来解析、编译和执行JavaScript。
5. WRS从外部API、数据库等获取数据。
6. 索引器可以索引内容。
7. Google 可以发现新链接并将它们添加到Googlebot의抓取队列中。对于HTML网站，这是第二步。

JavaScript 에 대한 자세한 내용은 다음과 같습니다.

• 解析、编译和运行JavaScript文件非常耗时——对于用户和 Google来说都是如此。
• 对于JavaScript内容为主的网站，在网站完全呈现之前，Google通常无法索引内容。
• 渲染过程并不是唯一较慢的事情。它也指发现新链接的过程。对于JavaScript构建网站，Google通法在
• Googlebot 不 有时 会 从 从 服务器 加载 所有 资源 的 的 的 的 的 的 的, 因此 Google 可能 不 不 会 选择 选择 您 的 某些 JavaScript 文件。。 原因 可能 可能 是 是 它 的 算法 从 从 渲染 的 角度 角度 必要 必要 必要 或者 是 是 由于 由于 性能 问题 问题 问题 了 了 花费 花费 花费 花费 花费 花费 花费 花费 角度 角度 认为 认为太长时间).

3.구글과 자바스크립트

当 当 讨论 讨论 讨论 讨论 讨论 是否 是否 可以 抓取 、 渲染 和 索引 索引 索引 JavaScript 时 时 时 时 时 时 时 我们 我们 需要 需要 解决 解决 两 个 非常 重要 概念 ：服务器 端 端 渲染(SSR)和 客户 客户 端 渲染 (CSR )

在传统方法（服务器端呈现）中，浏览器或 Googlebot 会收到一个完整描述页面的 HTML 文件。内容副本已经存在。通常，搜索引擎对服务器端呈现的JavaScript内容没有任何问题。

客户 客户 渲染渲染 有点 不同 不同 不同 不同 不同 有时 有时 会 会 为 此 此 苦苦 苦苦 挣扎 挣扎。 使用 使用 这 种 方法 方法 或 或 或 或 或 或 或 或 或 在 副 副 副 副 本 本 很 常见 常见 常见 的 的 的。。 随后 随后 随后 服务器 异步 异步 异步 没有 没有 没有 没有 没有 没有 没有 内容 内容 内容 内容 内容 内容 内容 内容 副 副 副 副 在 初始 初始 加载 时 获得 获得 空白 Html.下载内容副本并更新您的屏幕显示的内容。

当由于某种原因，Google无法抓取或索引您的 JavaScript内容时，其中一种解决方案是实现服、Marine。了服务器端渲染。

如果 如果 发现 发现 发现 设置 设置 无法 正确 正确 处理 您 的 的 客户 端渲染 网站 网站 网站 网站 网站 网站 为 为 为 为 Googlebot 提供 预渲染 版本。 这 这 是 爬虫 的 的 一 一 种 解决 方法 方法 方法 被 和 和 和 正式 接受 支持。。。 它 通常 通常 被 称为动态 渲染 渲染。。正式 正式 正式 正式 正式 正式 正式 正式 正式

总结： Google是可以索引JavaScript 内容的，只是比起HTML可能要困难一些。

五、JavaScript如何影响SEO?

至此，您应该对 Google 和其他搜索引擎如何处理 JavaScript 有一个不错的了解。那么，我们继续来了解

综合看，JavaScript会影响以下对SEO重要的页面元素和排名因素：

1 ) 渲染内容

如果 Google 能 不 有效 有效 地 您 您 的 的 javaScript 内容 内容 内容 内容 内容 您 您 的 内容 内容 很 可能 不 能 被 抓取 、 呈现 呈现 及 及 索引 索引 索引 索引 的 的 内容 内容 也 就 失去 了 在 引擎 中 中 中 进行 进行 排名 的 机会。。 失去 失去

2 ) 链接

如果某些链接是内部链接，或者当用户单击某个 URL 时 JavaScript 会生成链接，Google 将无法发现此类

3 ) 延迟加载图像

图像 图像 对 会 会 性能 产生 巨大 影响。。 为了 为了 提高 网页 加载 加载 速度 速度 速度 速度 速度 速度 速度 速度 速度 速度 开发 人员 人员 也 会 使用 JavaScript 对 对 图像 延迟 延迟 延迟 加载。。 但是 也 也 也 影响 影响 延迟 图像 的 的 可 可 抓取性 抓取性。。。 GoogleBot 支持 加载 加载 加载 不 不 不 不 不 加载 延迟 延迟 延迟 延迟 延迟 延迟 延迟.像 像 用户 用户 人类 滚动。 因此,“滚动”滚动 永远 永远 不 会 会 被 触发 触发 触发 触发 触发 触发 触发 的 内容 也 也 不 不 会 被 被 爬虫 爬虫 渲染。 实际上 实际上 实际上 需要 、 滚动 或 从 菜单 中 选择 选择 选项 等 页面 交 交 互 内容 都 不 不 不 不 或 或 或 或 滚动 滚动 滚动 滚动 滚动 滚动 滚动 或 或 或 或 或 从 从 从 菜单 菜单 菜单 菜单 中 中 选择 选择 选择 选项 选项 等 页面 页面 交 交 互 都 都 不 不 不 不 菜单 菜单 从 或 或.被Google编入索引。

4 ) 页面加载时间

如果有很多动态内容（例如延迟加载的图片、产品评论、实时聊天等）、臃肿的主题代码和额外的服务器请求，JS 渲染可能会增加几秒钟的时间使页面变得对访问者具有交互性——这会损害 UX 和Core Web Vitals。

5 )원(元数)

vue-meta 这样的 Node.js 包，否则搜索引擎可能会抓取相同的内容，或者更糟

6 ) 内容重复

JavaScript 在 cript 提供 提供 内容 时 可能 会 会 导致 导致 重复 和 规范化 问题 问题。。 这 是 是 因为 如果 如果 脚本 处理 时间 过 长 长 长 长 长 长 长 长 那么 那么 它们 只 只 只 能 能 看到 样板 样板 样板 这 看到 看到 看到 看到 看到 看到 看到 看到 看到 看到 看到 看到 看到 看到。。。。。 这 这 这 可能 可能 可能 导致 导致 谷歌 谷歌 谷歌 只 只 能 能 将 不 不 会 会 被 被 看到 看到 看到 看到。 인 (着它无法找到任何独特的内容来对页面进行排名。这对于容动态更改而无需重新)

六、JavaScript SEO成功的最佳实践

1.구글은 구글을 ​​이용하고 있다.

SEO 에 대해 자세히 알아 보십시오 .

Googlebot에 대해 자세히 알아보십시오.

在检查屏幕截图时，你可以问自己以下问题：

• 主要内容是否可见?
• Google可以访问类似文章和产品之类的区域吗?
• Google可以看到页面的其他关键元素吗?

如果您想深入了解,还可以查看生成的报告中的HTML选项卡.

如果Google无法正确呈现您的JavaScript页面怎么办?

Google에 대한 정보는 포함되어 있지 않습니다.

• Google在呈现时遇到超时。
• 渲染时出现一些错误。
• 您在robots.txt 文件中阻止Googlebot访问.js文件。

通过单击更多信息选项卡，您可以轻松检查在Google尝试呈现您的内容时是否发生。

2. Google 검색

确保 Google 正确 能够 呈现 呈现 您 的 网站 是 必要 必要 的 的 的 的 的 的 的 但是 它 不 不 不 能 保证 您 的 内容 会 被 编入 编入 索引 索引。 因此 您 您 仍 仍 需要 检查 您 您 的 网页 是否 被 被 索引 索引 收录 确保 确保 您 您 的 网页 用户 用户 用户 搜索 时 可 见 见 见 见 见 见 见 见 收录 收录 收录 索引 索引 索引 索引 索引 索引 被

자바스크립트에 대한 방법이 있습니다.

• 使用“사이트”命令——最快的方法。
• 检查谷歌GoogleSearchConsole——最准确的方法。

1).检查页面本身是否在谷歌的索引中

首先，您必须确保URL本的身在Google的索引中。为此，你可以在Google中输入"site:URL"(其中URL是您要检查的URL地此)

2) .JavaScript를 사용하고 있습니다 .

这也很容易.您只需从您的页面复制一个依赖于.则表示您的内容已在Google中编入索引。

如果 如果 使用 使用 googlesearchConsole, 您 只 需 需 在 在 URL 检查 工具 工具 中 输入 要 要 检查 url, 然后 点击 查看 查看 抓取 页面 页面 页面 页面 页面 页面 页面 页面 中编入 中编入 中编入 中编入 索引 索引 的 代码 随后 随后 随后 您 可以 ctrl+f 确定 javascript 生成 的 内容 内容 内容 代码的关键片段是否在此处。

如果Google不索引我的JavaScript内容怎么办?

Google에 대한 자세한 내용은 JavaScript에 대한 내용입니다.

• Google 遇到超时。您确定没有“强迫”Googlebot和用户等待几秒钟才能看到内容吗?
• Google有渲染问题。您是否检查过URL检查工具以查看Google是否可以呈现它?
• Google决定跳过一些资源（即JavaScript文件）。
• 구글认为内容质量低下。
• Google也可能会延迟索引JavaScript内容。
• 谷歌根本无法发现这个页面。您确定可以通过站点地图和内部结构访问它吗?

JavaScript에 대한 자세한 내용은 SEO를 참조하십시오.

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

3. JavaScript 设置重要的元数据

出于页面排名目的，用户需要为每个页面提供唯一元数据（标题、元描述等）。

你需要把您的社交标签、元信息和标题放入您的 HTML 代码中，以便所有搜索引擎（不仅仅是 Google）都可以访问您的页面。我们建议不要使用 JavaScript 添加重要的元标记，因为Google可能因为延迟渲染而不能立即看到这些内容,或者由于渲染过程出现错误,完全不过

4. Google 确保 可以发现您的内部链接

JavaScript에 대한 자세한 내용은 Googlebot을 참조하십시오.

Google은 Google에 추가 할 수 있습니다.

5. 缩小자바스크립트와 CSS 文件

如 如 述 述, JavaScript 会 影响 影响 您 网站 网站 的 性能 和 页面 页面 加载 时间 —— 这 是 谷歌 谷歌 的 一 个 个 关键 排名 排名 因素。。 因此 因此 使用 使用 使用 使用 使用 JavaScript 的 网站 网站 您 还 需要 需要 需要 压缩 压缩 Javascript… JS 推迟到主要内容在 DOM 中呈现后。

为了保持快速，你需要优先考虑用户需要的内容，只加载当前页面所需

6. 慎用延迟加载或瀑布流

网站 网站 对 seo 至关 重要 重要 延迟 延迟 加载 加载 是 一 一 种 有效 提高 提高 用户 用户 体验 的 的 方法 方法。 它 可以 延迟 延迟 加载 加载 非 关键 或 或 不 不 可见 的 内容 内容 内容 减少 初始 页面 加载 时间。 但 除了 除了 使 页面 加载 加载 更 快 之外 之外 之外 您 页面 页面 页面 页面还需要确保搜索引擎爬虫可以访问您的内容。

Googlebot이 不会通过点击、滚动、下拉等方式来发现延迟加载内容 —— 这意味着Google可能会发现这

此外，图片搜索也是一种额外的自然流量来源。如果您使用JavaScript延迟加载图像，Google将会忽略它们，而你也会失去一些流量机会。若要确保以方便用户搜索的方式实现延迟加载，请遵循Google的延迟加载指南。

7. 慎用JavaScript 중정

JavaScript에 대한 많은 정보를 얻을 수 있습니다.

JavaScript 사용 방법

• JavaScript에 대한 자세한 내용은 JavaScript에 있습니다.
• 使用JavaScript 重定向可能会减慢Google

8. 社交媒体不能渲染/处理JavaScript

一 一 容易 容易 个 忽略 的 问题 是 ： 트위터 ： 트위터 、 、 、 、和 和 其他 其他 社交 社交 媒体 并不 能 处理处理 javaScript。 这 意味 意味 着 您 您 必须 在 在 初始 初始 HTML 中 包含 트위터 카드 以及 페이스 북 열린 그래프 标记 否则 否则 否则 否则 在 在 社交 社交 媒体 媒体 上 分享 您 的 的 的 的 的 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容时，将无法正确显示。

因此 因此 因此 ， ， 拥有 一 个 个 javaScript 网站 网站 并 关心 来自 来自 来自 社交 社交 媒体 的 流量 流量 时 时 时 时 检查 您 您 的 的 的 分享 分享 的 样子 样子 样子 样子 样子 样子 样子 样子 样子 样子 样子 样子 样子 样子 异常 异常 异常 异常 异常 异常 异常 异常 异常 异常 尽快 将 将 将 트위터 카드 열린 그래프 标记 标记 添加 添加 添加 添加 标记 标记 定义 定义 定义 ➢到HTML中。

9. 编写兼容的代码

浏览器提供了很多 API，而 JavaScript 是一种快速演变的语言。Google 对所支持的 API 和 JavaScript 功能有一些限制。若要确保您的代码与 Google 兼容，请遵循Google的 JavaScript 问题排查指南。

10. 保持使用常规SEO的最佳策略

前面9个最佳实践均是针对JavaScript SEO而写，但JavaScript SEO仅是Technical SEO中的一个分支。为最大程度地取得SEO 오프 페이지 SEO及Technical SEO中的最佳策略。

结语

JavaScript 使 cript cript SEO 问题 变得 更加 ——— 您 无法 无法 保证 保证 保证 保证 保证 保证 保证 保证 保证 的 的 您 您 您 的 的 的 的 的 的 javaScript 代码。 但 但 这 这 并不 意味 着 JavaScript JavaScript 的网站都做得非常好。更重要的是，JavaScript 是现代 Web 的基本元素，就像 HTML 和 CSS 一样。它不会消失，所以

以下是我给您的关于JavaScript SEO的最终建议：

• 当开发人员和 SEO 高效地合作时,即使是依赖 JavaScript 的网站也可以在搜索中表现出色.
• Google 正在迅速提高其大规模处理和索引 JavaScript 的能力，但仍有许多事项需要注意。
• 在 JavaScript av 处理 处理 和 方面 方面 方面 方面 其他 引擎 引擎 引擎 引擎 引擎 引擎 引擎 引擎 引擎 引擎 引擎 引擎 引擎 引擎 용고 (和 社交 媒体） 远远 远远 远远 落后于 落后于 谷歌 谷歌 谷歌 谷歌 因此 如果 您 您 您 的 的 用户 主要 使用 Yandex, Bing, naver, Baidu 等 时 时 应 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 网站 网站 的 风险 风险 风险 风险 风险。。。。。。 时
• 本 本 本 提供 指南 一些 关于 关于 javaScript seo 的 一般 最 最 佳 佳 实践 和 和 见解。 然而 然而 然而 最 最 佳 一 一 一 个 个 复杂 复杂 而 而 微妙 的 的 研究 领域 领域。 我 建议 阅读 阅读 阅读 阅读 阅读 的 官方 官方 文档 文档 和 和 故障 排除 指南 指南 指南 多 多 多 多 多 更 更 更 更 基础 基础 基础 基础 基础 多 多 多 多 多 多 多 多 多 多 多 多 多。