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

SEO 技术 人员 可能 对 HTML 和 CSS 都 非常 熟悉 了 —— 这 是 我们 在 构建 网站 中 最常 用到 编程 语言。 但 近些年 来 JavaScript 逐渐 变得 流行。 大多数 网站 都会 使用 某些 JavaScript 来增加 交互 功能 和 改善 用户 体验。 有的 网站 使用 JavaScript 来 实现 菜单 功能 ， 有的 它 来 来 产品 或者 价格 信息 有的 使用 多个 渠道 获取 内容 ， 某些 情况 下 ， 网站 会 全站 使用 جافا سكريبت。

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

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

一 、 什么 是 جافا سكريبت？

جافا سكريبت 是 一种 脚本 ， 一 门 编程 语言 ， 它 可以 在 网页 上 实现 复杂 的 ， 网页 网页 的 不再 是 简单 的 信息 ， 而是 实时 的 内容 ， 交互式 的 地图 ， 2D / 3D 动画， 滚动 播放 的 视频 等等。

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

二 、 如何 检查 网站 是否 使用 جافا سكريبت 构建

那么 ， 您 可以 通过 哪些 方式 检查 网站 是否 使用 جافا سكريبت 构建 呢？ 在 此 ， 我们 介绍 三种 方法 以 供 参考。

1. 使用 诸如 WWJD 、 بنيت مع 或 Wappalyzer 之 类 的 工具 快速 检查 网站 是否 构建 在 JavaScript 框架 上。
2. 在 浏览 器 中 通过 “检查 元素” 或 “查看 源 代码” 来 检查 JS 代码。 您 可能 会 流行 的 JavaScript 框架 ， 例如 React.js ， jQuery ， Express 或 Angular 等。
3. 在 浏览 器 中 使用 插件 ， Chrome 上 的 Quick JavaScript Switcher 或 Firefox 上 的 Java Script Switch。 当 您 使用 这些 插件 时 您 当前 页面 将 在 禁用 JavaScript 的 情况 下 重新 加载。 如果 页面 上 的 某些元素 消失 了 ， 则 表示 它们 是 由 جافا سكريبت 生成 的。

三 、 什么 是 JavaScript SEO

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

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

四 、 谷 歌 可以 索引 جافا سكريبت 吗？

Google 是否 可以 正确 处理 JavaScript 内容 是 SEO 人员 最 关心 的 问题。 我们 首先 来 看看 Google 对 这个 问题 的 回答 ：处理JavaScript内容 比较 困难 ， 并非 所有 搜索 抓取 工具 都 能够 成功 处理 或 直接 处理此类 内容。 "

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

1.Google 如何 抓取 HTML 网站？

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

1. Googlebot 下载 HTML 文件。
2. Googlebot 从 源 代码 中 提取 链接 ， 并 可以 同时 访问 它们。
3. Googlebot 下载 CSS 文件。
4. Googlebot 将 所有 下载 的 资源 发送 Google 的 مفهرس (كافيين)。
5. 索引 器 （كافيين） 索引 页面。

2.Google 如何 抓取 JavaScript 网站？

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

困难 的 地方 在于 渲染 和 索引 جافا سكريبت可能 会 出现 很多 问题 ：

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

3. 向 جوجل 展示 جافا سكريبت 内容 的 不同 方式

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

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

برنامج Googlebot下载 内容 副本 并 更新 您 的 屏幕 显示 的 内容。

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

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

总结 ： جوجل 是 可以 索引 جافا سكريبت 内容 的 ， 只是 比起 HTML 可能 要 困难 一些。

五 、 JavaScript 如何 影响 SEO？

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

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

1 ） 渲染 内容

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

2 ） 链接

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

3 ） 延迟 加载 图像

جافا سكريبت像 人类 用户 那样 滚动。 因此 ， 永远 不会 被 ， 延迟 加载 内容 也 不会 渲染。 实际上 ， 任何 点击 、 滚动 或 从 菜单 选择 选项 等 页面 交互 内容 都 不会被 جوجل 编 入 索引。

4 ） 页面 加载 时间

. —— 这 会 损害 UX 和 أساسيات الويب الأساسية。

5 ） 元 数据

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

6 ） 内容 重复

جافا سكريبت.着 它 无法 找到 任何 独特 的 内容 来 对 页面 进行 排名。 这 对于 动态 更改 而 无需 重新 页面 的 单 页 应用 程序 (واس) 是 常见 问题。

六 、 JavaScript SEO 成功 的 最佳 实践

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

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

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

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

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

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

如果 جوجل 无法 正确 呈现 您 的 جافا سكريبت 页面 怎么 办？

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

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

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

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

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

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

• 使用 "موقع" 命令 —— 最快 的 方法。
• 检查 谷 歌 GoogleSearchConsole—— 最 准确 的 方法。

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

首先 ， 您 必须 确保 URL 本身 在 Google 的 索引 中。 为此 ， 你 可以 在 Google 中 输入 “الموقع: URL” （其中 URL 是 您 要 检查 的 页面 的 URL 地址）。

2).检查 谷 歌 是否 真的 索引 了 你 的 JavaScript内容

الموقع: {yourwebsite} “{fragment}”。 如果 出现 内容 带有 您 输入 的 片段则 表示 您 的 内容 已 在 جوجل 中 编 入 索引。

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

如果 جوجل 不 索引 我 的 جافا سكريبت 内容 怎么 办？

جوجل 未 收录 您 的 جافا سكريبت 内容 的 原因 有 很多 ， 在 此 仅 几 例 常见 的 ：

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

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

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

3. 避免 使用 JavaScript 设置 重要 的 元 数据

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

جوجل可能 因为 延迟 渲染 而 不能 立即 看到 这些 内容 ， 或者 由于 渲染 过程 出现 错误 ， 完全 不能 看到 这些 内容。

4. 确保 جوجل 可以 发现 您 的 内部 链接

内 链 可 帮助 Googlebot 更 有效 地 抓取 您 的 网站。 糟糕 的 内 链 结构 和 格式 对 ， 尤其 是 对于 جافا سكريبت 繁重 的 网站。

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

5. 缩小 JavaScript CSS

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

为了 保持 快速 ， 你 需要 优先 考虑 用户 需要 的 内容 ， 只 加载 当前 所需 的 جافا سكريبت ， 并 通过 代码 拆分 延迟 加载 其余 内容。

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

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

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

جافا سكريبت遵循 جوجل 的 延迟 加载 指南。

7. 慎用 جافا سكريبت 重定向

虽然 JavaScript 重定向 在 特定 情况 下 是 一种 方便 的 解决 方案 ， 但 它们 可能 会 多种 多种 方式 影响 您 的 网站 可见 性。

如果 您 只是 希望 将 用户 永久 重定向 到 页面 的 新 版本 ， 最好 使用 服务器 端 301 重定向。 改用 جافا سكريبت 方法 会使 您 面临 多种 风险。

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

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

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

因此 ， 当 您 拥有 一个 JavaScript 网站 并 关心 来自 社交 媒体 时 ， 检查 您 的 的 样子 （是否 有 自 描述）。 如果 ， 请 尽快 将 بطاقات تويتر 以及 Facebook Open Graph 标记 添加到 HTML 中。

9. 编写 兼容 的 代码

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

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

前面 9 个 最佳 实践 均 是 针对 JavaScript SEO 而 写 ， 但 JavaScript SEO 仅 是 Technical SEO 中 的 一个 分支。 为 最大 程度 地 取得 你 仍需 在 你 JavaScript 网站 中 使用 On-Page SEO ، خارج الصفحة SEO 及 Technical SEO 中 的 最佳 策略。

结语

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

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

• 当 开发 人员 和 SEO 高效 地 合作 时 ， 即使 是 依赖 JavaScript 的 网站 也 可以 在 搜索 中 表现 出色.
• جوجل 正在 迅速 提高 其 大规模 处理 和 索引 جافا سكريبت 的 能力 ， 但 仍有 许多 事项 需要 注意。 你 可以 参考 本 指南 的 最佳 实践 进行 确认。
• 在 JavaScript 的 处理 和 索引 方面 ， 其他 搜索 引擎 （和 社交 媒体） 可能 远远 落后 于 谷 歌 ， 因此 如果 您 的 用户 主要 Yandex و Bing و Naver و Baidu 等 时 ， 应 考虑 使用 JavaScript 构建 网站 的 风险。
• جافا سكريبت SEO 。