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

SEO 技术 人员 可能 对 Html 和 CSS 都 非常 了 了 —— 这 是 我们 在 构建 构建 网站 中 常 用到 的 2 种 编程 语言。 近 些 年 来 ， JavaScript 逐渐 变得 流行。 大多数 网站 都 会 会 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 但 但 近 近 年 来 it javascript 逐渐 变得 流行。 大多数 大多数 网站 都 会 ° ° 会 tivamente增加 交互 功能 和 改善 用户 体验。 有的 网站 使用 javascript 来 实现 功能 功能 ， 有的 使用 它 来 抓取 产品 或者 价格 信息 ， ， 使用 它 从 多 个 渠道 渠道 获取 内容 ， 在 某些 情况 下 ， ， 网站 会站使用JavaScript。

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

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

一、什么是JavaScript？

JavaScript 是 一 种 脚本 ， 一 门 编程 语言 ， 它 可以 在 上 上 实现 复杂 的 功能 ， 网页 展现 给 您 的 的 不 再 是 的 静态 信息 ， 而 而 是 实时 的 内容 更新 ， 交互式 的 地图 ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， tivamente ，滚动播放的视频等等。

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

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

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

1. 使用诸如WWJD、BuiltWith或Wappalyzer之类的工具快速检查网站是否构建在JavaScript框架上。
2. 在浏览器中通过“检查元素”或“查看源代码”来检查JS代码。您可能会发现流行的JavaScript框架，例如AngQueryExpress，ngjsReactular.
3. 在 浏览器 中 使用 插件 ， 例如 Chrome 上 的 Switcher javascript rapido 或 Firefox 上 的 Java Script Switch。 当 您 使用 这些 插件 时 ， 您 当前 的 页面 将 在 禁 用 javascript 的 情况 下 重新 加载。 如果 页面 上 的 的 的元素消失了，则表示它们是由JavaScript生成的。

三、什么是JavaScript SEO？

JavaScript SEO是Technical SEO的一个分支。它主要关注：

• 优化由JavaScript构建的内容，以供搜索引擎抓取、呈现和索引。
• 预防、诊断和解决基于JavaScript框架（如React、Angular和jQuery）构建的网站和SPA（单页应用程序）的排名问题。
• 通过采用最佳实践确保网页可被搜索引擎发现及解读。
• 改进页面解析和执行JS代码的页面加载时间，以优化用户体验(UX)。

四、谷歌可以索引JavaScript吗？

Google 是否 可以 正确 处理 javascript 内容 是 seo 人员 最 关心 的 问题 我们 我们 首先 来 看看 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(Caffeine)。
5. 索引器（Caffeina）索引页面。

2.JavaScript di Google con Google

1. Googlebot会下载HTML文件。
2. Googlebot在源代码中找不到链接，因为它们仅在执行JavaScript后才被注入。
3. Googlebot会下载CSS和JS文件。
4. Googlebot必须使用Servizio di rendering Web di Google（Caffeine Indexer的一部分）来解析、编译和执行JavaScript。
5. WRS从外部API、数据库等获取数据。
6. 索引器可以索引内容。
7. Google可以发现新链接并将它们添加到Googlebot的抓取队列中。对于HTML网站，这是第二步。

困难的地方在于渲染和索引JavaScript可能会出现很多问题：

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

3. 向 Google 展 示 JavaScript 内 容 的 不 同 方 式

当 我们 讨论 Google 是否 可以 抓取 、 渲染 和 索引 javascript 时 ， 我们 需要 解决 两 个 非常 非常 重要 概念 ：服务器 服务器 端 渲染(ssr)和 客户 端 渲染 (csr) 。。每 个 javascript 的 seoer 都 必须 了解 了解 它们。。。。。 了解 了解 了解 了解 了解 了解 了解 了解 了解 了解 了解

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

客户 端 渲染 方法有点 不同 ， 搜索 引擎 有时 会 为 此 苦苦 挣扎。 使用 这 种 方法 ， 浏览器 或 Googlebot 在 初始 加载 时 获得 空白 Html 页面 （几乎 没有 内容 副 副 本） 是 很 常见 的。 随后 随后 随后 随后 随后 随后 随后 随后 随后 随后。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 tivamente下载内容副本并更新您的屏幕显示的内容。

当 由于 某 种 原因 ， Google无法 抓取 或 索引 您 的 JavaScript内容 时 ， 其中 一 一 种 解决 方案 是 实现 服务器 端 呈现Netflix 、 Marvel 、 Staples 、 Nike 、 Hulu 、 Expedia 、 Argos 和 Booking.com 等 网站 网站 都 都了服务器端渲染。

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

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

五、JavaScript如何影响SEO？

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

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

1 ）渲染内容

如果 Google 不 能 有效 地 渲染 您 的 JavaScript 内容 ， 那么 您 的 内容 很 可能 不 能 能 被 、 呈现 及 索引 ， ， 那么 的 内容 也 就 失去 了 在 搜索 引擎 引擎 中 进行 的 的 机会 机会

2 ）链接

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

3 ）延迟加载图像

图像 会 对 页面 性能 产生 巨大 影响。 为了 提高 网页 加载 速度 ， 很多 开发 人员 也 会 使用 javascript 对 图像 延迟 加载。 但是 ， javascript 也 会 影响 延迟 加载 图像 图像 的 可 抓取性。 。googlebot 支持 延迟 加载 ， 但 它 不 不 不 它 它 它 它 它 它 它 它 它 它 它 它 它 它 它 它 但 但 但 但 但 但 但 但 但 但 但 加载 tivamente像 人类 用户 那样 滚动。 因此 ， “滚动” 事件 永远 不 会 触发 ， ， 延迟 加载 的 内容 也 不 会 被 爬虫 渲染。 实际上 ， 任何 点击 、 滚动 或 或 从 菜单 中 选择 选项 等 页面 页面 交 互 内容 都 都被Google编入索引。

4 ）页面加载时间

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

5 ）元数据

除非 该 站点 使用 像 vue-meta 这样 的 node.js 包 ， 否则 搜索 引擎 可能 会 抓取 相同 的 内容 ， 或者 更 糟糕 的 是 ， 每 个 或 页面 都 都 没有 元 数据 数据。。

6 ）内容重复

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

六、JavaScript SEO成功的最佳实践

1.检查Google是否可以在技术上呈现您的网站。

作为 开发 人员 、 网站 所有者 或 seo ，您 应该 始终Google可以 在 技术 上 呈现 您 的 JavaScript内容。 仅仅 Chrome 看看 是否 正常 不 够 的 的。

相反 ， 请 使用 Google 网址 检查 工具 中 的 实时 测试 ， 该 工具 可 通过 SearchConsole 获得。 它 允许 您 查看 GoogleBot 将 如何 在 您 页面 上 呈现 JavaScript 内容 的 屏幕 屏幕 截图。。。。。。。。。。。。。。。。。。。。。。。。。 °。 tivamente

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

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

如果 您 想 深入 了解 ， 还 可以 查看 生成 的 报告 中 的 html 选项 卡。 在 这里 ， 您 可以 看到 Dom- 渲染代码 ， 它 渲染 后 页面 的 状态 状态 状态 状态 状态 状态 状态 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的

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

Google可能会以意想不到的方式呈现您的页面。如果您的页面呈现不如预期，可能的原因有：

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

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

2.检查您的内容是否已被Google编入索引

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

有两种方法可以检查您的JavaScript内容是否真的在Google中被编入索引。

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

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

首先，您必须确保URL本身在Google的索引中。为此，你可以在Google中输入“site:URL”（其中URL是您要检查的顀圢的URL

2 ) .

这也很容易。您只需从您的页面复制一个依赖于JavaScript的文本片段并在Google中键入以下命令：site:{yourwebsite}“{fragment}”。如果出现的内容带有您输入的片段，则表示您的内容已在Google中编入索引。

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

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

Google未收录您的JavaScript内容的原因有很多，在此仅几例常见的：

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

在确保您网站的 JavaScript 对 SEO 友好时，您可以遵循几个步骤来确保您的内容被呈现和索引。

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

3. JavaScript 设置重要的元数据

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

你 需要 把 您 的 社交 标签 、 元 信息 和 标题 放入 您 的 html 代码 中 ， 以便 所有 搜索 引擎 （不仅仅 是 google） 都 可以 您 的 页面。 我们 建议 建议 不 要 使用 javascript 添加 重要 的 元 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 标记 tivamente Ulteriori informazioni

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

JavaScript

具体 来说 ， google 建议 使用 带有 href 属性 的 html 锚标记 而 不 是 使用 js 来 构建 内部 链接。如果 您 的 链接 仅 仅 有 人 单击 按钮 时 才 添加 Dom ， Google将 看 不 到 它 它

5. 缩小JavaScript e CSS 文件

如 前所 述 ， JavaScript 会 影响 您 网站 的 性能 页面 加载 时间 —— 这 是 谷歌 谷歌 的 个 关键 排名 排名 因素。 因此 ， 对于 大量 使用 javascript 的 网站 ， ， 您 还 需要 压缩 javascript （和 css） 代码 将 非 非 非 非 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 关键 tivamente JS 推迟到主要内容在 DOM 中呈现后。

为了 保持 快速 ， 你 需要 优先 考虑 用户 需要 的 内容 ， 只 加载 当前 页面 所 需 的 javascript ， 并 通过 代码 拆分 延迟 加载 其余 内容 内容

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

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

Googlebot 不 会 通过 点击 、 滚动 、 下拉 等 方式 来 发现 延迟 加载 的 内容 —— 这 这 意味 Google 可能 不 会 发现 这些 内容 ， 从而 seo 产生 负面 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 影响 负面 负面 负面 负面 负面 负面 负面

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

7. 慎用JavaScript重定向

Scarica JavaScript

如果 您 只 是 希望 将 用户 永久 重定 向 到 页面 的 新 版本 ， 最好 使用 服务器 端 301 重定 向。 改 javascript 方法会 使 您 多 种 风险 风险 风险 风险 风险 风险 风险 风险 风险 风险 风险 风险 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种 种

• 在 索引 过程 中 ， 如果 页面 没有 显著 的 变化 ， google 的 算法 可能 会 决定 不 呈现 javascript ， 这 意味 着 您 的 javascript 重定 向 可能 不 会 被 执行 执行 执行 执行
• 使用JavaScript 重定向可能会减慢Google 对您网站的抓取和索引 -呈现 JavaScript是索引过程中的一个额外步骤。

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

一 个 容易 被 忽略 的 问题 ： ： Twitter 、 Facebook和 其他 社交 媒体 并不 能 处理 JavaScript 。 这 意味 着 您 必须 在 初始 Html 中 包含 Schede Twitter 以及 Facebook Open Graph 标记。 否则 ， ， 人们 在 社交 社交 媒体 上 分享 您 内容 内容 内容时，将无法正确显示。

因此 ， 当 您 拥有 一 个 javascript 网站 并 关心 来自 社交 的 流量 时 ， ， 请 检查 您 的 社交 分享 的 样子 样子 （是否 有 图片 自 定义 描述 描述）。 如果 出现 异常 ， 请 请 尽快 Carte Twitter 以及 Facebook 标记 标记到HTML中。

9. 编写兼容的代码

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

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

前面 9 个 最 佳 实践 均 是 针对 javascript seo 而 写 ， 但 javascript seo 仅 是 tecnico seo 中 的 一 个 分支。。 最大 程度 取得 seo 的 成功 ， 你 你 仍 需 你 的 的 javascript 网站 中 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 使用 ° SEO off-page, SEO tecnico, 中的最佳策略。

结语

JavaScript 使 诊断 seo 问题 变得 更加 困难 —— 您 无法 保证 Google 会 在 您 网站 的 每 个 个 页面 上 您 的 javascript 代码。 但 并不 意味 着 javascript 对 seo 是 不利 的。 在 取得 流量 流量 方面 方面 方面 方面使用 javascript 的 网站 都 做 得 非常 好。 更 重要 的 是 ， JavaScript 是 现代 Web 的 基本 元素 ， 就 像 html 和 css 一样。 它 不 会 消失 ， ， 所以 你 应该 面对 挑战 而 不 是 是 逃避 逃避

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

• 的网站也可以在搜索中表现出色 的网站也可以在搜索中表现出色.
• Google 正 在 迅速 提高 其 大 规模 处理 和 索引 javascript 的 能力 ， 但 仍 有 许多 事项 需要 注意。 你 可以 参考 本 本 指南 最 佳 实践 进行 确认 确认
• 在 JavaScript 的 处理 和 索引 方面 ， 其他 搜索 （（和 社交 媒体） 可能 远远 落后于 谷歌 ， 因此 如果 您 的 的 用户 主要 yandex, bing, naver, baidu 等 时 ， 应 考虑 使用 javascript 构建 网站 的 风险 风险
• 本 指南 提供 了 一些 关于 javascript seo 的 一般 佳 实践 和 见解。 然而 ， javascript seo 是 一 个 复杂 而 微妙 微妙 的 领域。 我 建议 您 继续 阅读 google 的 官方 官方 和 故障 排除 指南 ， 了解 更 更 多 多 多 更 更 更 更 更 更 更 更 更 更 更 更 更 更 更 更 更 更 更 更 tivamente 。