Post by account_disabled on Jan 28, 2024 9:43:31 GMT
Web 正处于前端开发的黄金时代，JavaScript 和技术 SEO 正在经历复兴。作为一家屡获殊荣的数字营销机构的技术 SEO 专家和网络开发爱好者，我想根据行业最佳实践和我自己的机构经验分享我对现代 JavaScript SEO 的看法。在本文中，您将了解如何在 2021 年优化 JS 支持的网站以进行搜索。 什么是 JavaScript SEO？ JavaScript SEO 是一门技术 SEO 学科，专注于优化使用 JavaScript 构建的网站，以提高搜索引擎的可见性。它主要涉及： 优化通过 JavaScript 注入的内容，以供搜索引擎抓取、渲染和索引。 预防、诊断和排除基于 JavaScript 框架（例如 React、Angular 和 Vue）构建的网站和 SPA（单页应用程序）的排名问题。 通过链接最佳实践确保网页可以被搜索引擎发现。 缩短页面解析和执行 JS 代码的页面加载时间，以简化用户体验 (UX)。
JavaScript 对 SEO 有利还是不利？ 这取决于！JavaScript 对于现代网络至关 目标电话号码或电话营销数据 重要，它使构建的网站可扩展且更易于维护。然而，JavaScript 的某些实现可能会损害搜索引擎的可见性。 JavaScript 如何影响 SEO？ JavaScript 可以影响以下对 SEO 很重要的页面元素和排名因素： 渲染内容 链接 延迟加载图像 页面加载时间 元数据 什么是 JavaScript 支持的网站？ 当我们谈论基于 JavaScript 构建的网站时，我们并不是指简单地向 HTML 文档添加一层 JS 交互性（例如，向静态网页添加 JS 动画时）。在这种情况下，JavaScript驱动的网站是指核心或主要内容通过JavaScript注入到DOM中。 应用程序外壳模型。 该模板称为应用程序外壳，是渐进式 Web 应用程序 (PWA) 的基础。接下来我们将探讨这一点。 如何检查网站是否是使用 JavaScript 构建的 您可以使用BuiltWith或Wappalyzer等技术查找工具快速检查网站是否基于JavaScript框架构建。您还可以在浏览器中“Inspect Element”或“View Source”来检查JS代码。您可能会发现的流行 JavaScript 框架包括： 谷歌的角度 通过 Facebook做出反应 Vue，作者：Evan You 针对核心内容的 JavaScript SEO 下面是一个示例：现代 Web 应用程序是基于 JavaScript 框架构建的，例如 Angular、React 和 Vue。
JavaScript 框架允许开发人员快速构建和扩展交互式 Web 应用程序。让我们看一下 Angular.js 的默认项目模板，Angular.js 是 Google 制作的流行框架。 在浏览器中查看时，这看起来像一个典型的网页。我们可以看到文本、图像和链接。然而，让我们更深入地研究一下代码： 现在我们可以看到这个 HTML 文档几乎完全没有任何内容。页面正文中只有 app-root 和一些脚本标签。这是因为这个单页应用程序的主要内容是通过 JavaScript 动态注入到 DOM 中的。换句话说，这个应用程序依赖JS来加载页面的关键内容！ 潜在的 SEO 问题：任何呈现给用户但不呈现给搜索引擎机器人的核心内容都可能存在严重问题！如果搜索引擎无法完全抓取您的所有内容，那么您的网站可能会被竞争对手忽视。我们稍后会更详细地讨论这个问题。 用于内部链接的 JavaScript SEO 除了动态地将内容注入 DOM 之外，JavaScript 还会影响链接的可抓取性。Google 通过抓取在页面上找到的链接来发现新页面。 作为最佳实践，Google 特别建议使用带有 href 属性的 HTML 锚标记链接页面，并为超链接包含描述性锚文本： 不过，Google 还建议开发人员不要依赖其他 HTML 元素（例如 div 或 span）或 JS 事件处理程序来获取链接。这些被称为“伪”链接，根据谷歌官方指南，它们通常不会被抓取： 尽管有这些准则，一项独立的第三方研究表明 Googlebot 可能能够抓取 JavaScript 链接。尽管如此，根据我的经验，我发现将链接保留为静态 HTML 元素是最佳实践。
JavaScript 对 SEO 有利还是不利？ 这取决于！JavaScript 对于现代网络至关 目标电话号码或电话营销数据 重要，它使构建的网站可扩展且更易于维护。然而，JavaScript 的某些实现可能会损害搜索引擎的可见性。 JavaScript 如何影响 SEO？ JavaScript 可以影响以下对 SEO 很重要的页面元素和排名因素： 渲染内容 链接 延迟加载图像 页面加载时间 元数据 什么是 JavaScript 支持的网站？ 当我们谈论基于 JavaScript 构建的网站时，我们并不是指简单地向 HTML 文档添加一层 JS 交互性（例如，向静态网页添加 JS 动画时）。在这种情况下，JavaScript驱动的网站是指核心或主要内容通过JavaScript注入到DOM中。 应用程序外壳模型。 该模板称为应用程序外壳，是渐进式 Web 应用程序 (PWA) 的基础。接下来我们将探讨这一点。 如何检查网站是否是使用 JavaScript 构建的 您可以使用BuiltWith或Wappalyzer等技术查找工具快速检查网站是否基于JavaScript框架构建。您还可以在浏览器中“Inspect Element”或“View Source”来检查JS代码。您可能会发现的流行 JavaScript 框架包括： 谷歌的角度 通过 Facebook做出反应 Vue，作者：Evan You 针对核心内容的 JavaScript SEO 下面是一个示例：现代 Web 应用程序是基于 JavaScript 框架构建的，例如 Angular、React 和 Vue。
JavaScript 框架允许开发人员快速构建和扩展交互式 Web 应用程序。让我们看一下 Angular.js 的默认项目模板，Angular.js 是 Google 制作的流行框架。 在浏览器中查看时，这看起来像一个典型的网页。我们可以看到文本、图像和链接。然而，让我们更深入地研究一下代码： 现在我们可以看到这个 HTML 文档几乎完全没有任何内容。页面正文中只有 app-root 和一些脚本标签。这是因为这个单页应用程序的主要内容是通过 JavaScript 动态注入到 DOM 中的。换句话说，这个应用程序依赖JS来加载页面的关键内容！ 潜在的 SEO 问题：任何呈现给用户但不呈现给搜索引擎机器人的核心内容都可能存在严重问题！如果搜索引擎无法完全抓取您的所有内容，那么您的网站可能会被竞争对手忽视。我们稍后会更详细地讨论这个问题。 用于内部链接的 JavaScript SEO 除了动态地将内容注入 DOM 之外，JavaScript 还会影响链接的可抓取性。Google 通过抓取在页面上找到的链接来发现新页面。 作为最佳实践，Google 特别建议使用带有 href 属性的 HTML 锚标记链接页面，并为超链接包含描述性锚文本： 不过，Google 还建议开发人员不要依赖其他 HTML 元素（例如 div 或 span）或 JS 事件处理程序来获取链接。这些被称为“伪”链接，根据谷歌官方指南，它们通常不会被抓取： 尽管有这些准则，一项独立的第三方研究表明 Googlebot 可能能够抓取 JavaScript 链接。尽管如此，根据我的经验，我发现将链接保留为静态 HTML 元素是最佳实践。