js抓取网页内容(使用AngularJS构建的网站有一个问题–为SEO优化AngularJS)

　　js抓取网页内容(使用AngularJS构建的网站有一个问题–为SEO优化AngularJS)

　　使用 AngularJS 内置的 网站 将所有内容加载到单个页面上。模板保持不变，仅重新加载副本以显示访问者请求的信息。

　　我承认这个概念很棒。拥有单页应用程序意味着几乎是即时加载时间——更不用说，更容易开发和更少的代码错误需要修复。

　　但是针对 SEO 优化 AngularJS 存在一个问题。

　　Angular 应用程序在客户端提供内容。因此，他们从谷歌抓取和排名页面所需的所有元素中删除了一个页面。

　　SEO 可以做任何事情，还是应该放弃并保留 网站 上的任何未优化的 AngularJS 页面？

　　不，绝对不是！首先，您实际上可以优化 AngularJS。当然，它需要一些技术 SEO 知道如何，但它可以做到。

　　在我告诉您更多相关信息之前，让我们先了解一下基础知识。

　　什么是 AngularJS？

　　AngularJS 是 Google 提供的基于 JavaScript 的平台，可以从单个页面加载内容。

　　例如，与 HTML 不同，基于 Angular 的 网站 不会将单个页面存储为单独的文件。相反，它在单个应用程序中加载内容用户请求。

　　因此，这些 Web 属性通常称为单页应用程序 (SPA)。

　　实际上，差异意味着用户每次点击请求信息时，并不是呈现一个新页面，所有与内容的交互都是通过 AJAX 调用在同一页面上进行的。

　　这是微软的视觉效果，说明了差异。请注意，在传统的页面循环中，服务器如何为每个请求加载一个新的 HTML 页面。但是，在 SPA 生命周期中，页面仅加载一次。然后，JavaScript 使用页面作为框架来加载相关内容。

　　为什么要使用 AngularJS？

　　使用 Angular 框架构建 网站 有三个主要好处。

　　1. 单页应用程序的内容加载速度要快得多，因为无需每次都加载新的 HTML 代码。这可以带来更好的用户体验。

　　2.使用AngularJS还可以加快开发进程。开发人员只需构建一个页面，然后使用 JavaScript 来控制其余页面。

　　3.由于上述原因，开发者可以减少错误，从而减少用户浏览网站时的问题。技术团队不必花时间重新访问他们的代码来修复错误。每个人都是一个双赢的场景。

　　不幸的是，Angular 只是 SEO 的主要挑战。

　　为什么 AngularJS 对搜索引擎优化具有挑战性？

　　例如，通过 API 连接调用内容，单页技术将从页面的实际代码中删除所有可抓取的内容。

　　与收录所有 网站 内容的传统 HTML 页面不同，SPA 仅收录基本页面结构。但是，实际的措辞是通过动态 API 调用显示的。

　　对于 SEO，以上意味着源代码中的实际 HTML 不收录在页面中。因此，Google 将抓取的所有元素都不存在。

　　此外，搜索引擎无法缓存 SPA。下面两个视觉效果很好地说明了这个问题。顶部显示用户在访问 Angular 页面时看到的内容。另一个介绍了Google可以访问和抓取的实际内容。

　　用户看到的：

　　谷歌缓存内容：

　　一个明显的区别，不是吗？

　　对于用户，此页面与其他页面相同。他们可以轻松浏览网站。他们可以访问、阅读信息并与之交互。

　　另一方面，谷歌几乎看不到页面上的任何内容。当然，仅仅正确地索引它是不够的。

　　这是 SEO 面对 Angular 应用程序所面临的挑战。这些应用程序缺乏对它们进行排名所需的一切。

　　幸运的是，也有好消息。

　　如何针对 Google Crawling 优化 AngularJS 应用程序

　　有三种方法可以做到这一点。

　　首先是使用预渲染平台。例如，Prerender.io。此类服务将创建内容的缓存版本，并以 Googlebot 可以抓取和索引的形式呈现。

　　不幸的是，这可能是一个短期解决方案。Google 可以轻松地将其贬值，这样 网站 就无法再获得可转换的解决方案。

　　第二种解决方案是修改 SPA 元素，使其成为客户端和服务器之间的混合体。开发人员将此方法称为初始静态渲染。

　　在这种方法中，您可以在服务器端保留某些对 SEO 必不可少的元素 - 标题、元描述、标题、某人的副本等。因此，这些元素将显示在源代码中，谷歌可以抓取它们。

　　不幸的是，该解决方案有时会再次证明是不够的。

　　但是，有一个可行的选择。它涉及使用 Angular Universal 扩展来创建要在服务器端呈现的页面的静态版本。不用说，这些可以被谷歌完全索引，而且这项技术很快就会贬值。

　　如何使用 Angular Universal Extension 准备服务器端渲染

　　以下是Angular官方网站流程的简要概述*。但是，在完成整个过程之前，我建议您转移到受控的测试环境。

　　过程：

　　1.安装依赖项。

　　2. 通过修改应用程序代码及其配置来准备您的应用程序。

　　3.添加构建目标并使用带有@ununiversal/express-engine 原理图的 CLI 构建通用包。

　　4.设置服务器以运行通用包。

　　5. 在服务器上打包并运行应用程序。

　　结果？缓存页面如下所示：

　　当然，它没有视觉冲击。但是，用户不会看到它。但是，搜索引擎会找到抓取所需的所有信息并正确索引页面，这是您的目标。

　　关键点

　　AngularJS 为改善用户体验和缩短开发时间提供了难以置信的机会。不幸的是，它也给SEO带来了严峻的挑战。

　　例如，单页应用程序不收录爬行和索引内容以进行排名所需的代码元素。

　　幸运的是，SEO 可以通过三个选项克服它：

　　1.使用预渲染平台，例如 Prerender.io。

　　2.创建一个名为初始静态渲染的 AngularJS 和 HTML 混合体。

　　3.使用 Angular Universal 扩展创建站点的静态版本以进行爬网和索引——这是我推荐的选项。