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

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

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

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

一、什么是JavaScript？

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

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

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

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

1. 使用诸如WWJD、BuiltWith或Wappalyzer之类的工具快速检查网站是否构建在JavaScript框架上。
2. React.js AngularExpress.js
3. 在 浏览器 中 使用 插件 ， 例如 Chrome 上 的 Switcher JavaScript rapide 或 Firefox 上 的 commutateur de script Java。 当 您 使用 这些 插件 时 ， 您 当前 所在 的 页面 将 在 禁 用 Javascript 的 情况 下 重新 加载 如果 页面 上 上 的 的 某些 的 情况 下 重新。 如果 页面 上 上 的 的元素消失了，则表示它们是由JavaScript生成的。

三、什么是SEO JavaScript？

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

• 优化由JavaScript构建的内容，以供搜索引擎抓取、呈现和索引。
• 预防、诊断和解决基于JavaScript框架（如React、Angular和jQuery）构建的网站和SPA（单页应用程序）的排名问题。
• 通过采用最佳实践确保网页可被搜索引擎发现及解读。
• 。

四、谷歌可以索引JavaScript吗？

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

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

1.Google 如何抓取HTML网站 ?

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

1. Googlebot est basé sur HTML et
2. Googlebot ?
3. Googlebot est basé sur CSS et
4. Googlebot将所有下载的资源发送到Google的Indexer(Caffeine)。
5. 索引器（Caféine）索引页面。

2. Google 如何抓取JavaScript网站 ?

1. Googlebot est basé sur HTML et sur HTML.
2. Googlebot est compatible avec JavaScript et JavaScript.
3. Googlebot est basé sur CSS et JS et sur JS.
4. Googlebot et Google Web Rendering Service（Caffeine Indexer）来解析、编译和执行JavaScript。
5. WRS sous forme d'API, et plus encore.
6. 索引器可以索引内容。
7. Google 可以发现新链接并将它们添加到Googlebot的抓取队列中。对于HTML网站，这是第二步。

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

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

3. Google JavaScript 内容的不同方式

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

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

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

当 由于 某 种 原因 ， Google无法 抓取 或 索引 您 的 Javascript内容 时 ， 其中 一 种 解决 方案 是 实现 服务器 端 呈现。 Netflix 、 Marvel 、 agrafes 、 nike 、 Hulu 、 ENTRETIA 、 Argos 和 booking.com 等 都 都 利用 利用了服务器端渲染。

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

Mot de passe : Google ?

五、JavaScript如何影响SEO？

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

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

1 ）渲染内容

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

2 ）链接

URL et JavaScript pour Google

3 ）延迟加载图像

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

4 ）页面加载时间

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

5 ）元数据

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

6 ）内容重复

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

六、JavaScript SEO成功的最佳实践

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

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

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

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

• 主要内容是否可见？
• Google ?
• Google可以看到页面的其他关键元素吗？

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

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

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

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

Google 尝试呈现您的内容时是否发生 avec JavaScript.

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

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

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

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

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

首先，您必须确保URL本身在Google的索引中。为此，你可以在Google中输入« site:URL »

2) .JavaScript内容

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

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

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

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

• Google ?
• Google有渲染问题。您是否检查过URL检查工具以查看Google是否可以呈现它？
• Google 定跳过一些资源（即JavaScript文件）。
• Google 认为内容质量低下。
• Google 可能会延迟索引JavaScript内容。
• 谷歌根本无法发现这个页面。您确定可以通过站点地图和内部结构访问它吗？

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

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

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

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

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

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

JavaScript 繁金

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

5. 缩小JavaScript 和 CSS 文件

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

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

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

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

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

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

7. 慎用JavaScript重定向

Javascript

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

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

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

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

因此 ， 当 您 拥有 一 个 Javascript 网站 并 关心 来自 社交 媒体 的 流量 时 ， 请 检查 您 的 社交 分享 的 样子 （是否 有 图片 和 自 定义 描述）。 如果 出现 异常 ， 请 尽快 将 自 自 定义 描述）。 如果 出现 异常 ， 请 尽快 将 CARTES TWITT到HTML中。

9. 编写兼容的代码

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

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

前面9个最佳实践均是针对JavaScript SEO而写，但JavaScript SEO仅是Technical SEO中的一个分支。为最大程度地取得SEO的成功，你仍需在你的JavaScript网站中使用On-Page SEO, Off-Page SEO及Technical SEO中的最佳策略。

结语

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

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

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