使用AngularJS构建的网站在单个页面上加载其所有内容。其模板保持不变，只有复制重新加载，以显示所要求的访问者的信息。
我承认这个概念很棒。有一个单页应用意味着几乎瞬时加载时间 - 更不用说，更容易开发，更少的代码错误来修复。
但有一个问题:为搜索引擎优化优化AngularJS。
Angular Apps默认提供客户端的内容。因此，它们从Google的所有元素中剥离了一个页面需要爬网和索引排名一页。
可以对此进行任何事情，还是应该在网站上留下angularjs页面未优化？
不,绝对不是!对于初学者来说，你可以优化AngularJS。当然，这需要一些技术SEO知道怎么做，但是可以做的事情。
在本文中，我们将解决以下问题:
在我告诉你更多关于它之前，让我们先看看基本的。
AngularJS是什么?
AngularJS是一种基于JavaScript的平台，从Google可以从单个页面加载内容。
定义对任何不习惯编码和网络技术的人听起来有点密码，所以让我们打破它更好地理解它。
- 基于javascript的平台——网站是用代码构建的。通常，在这个过程中使用的三种关键语言是:
- HTML定义页面上的内容，
- CSS用于样式和定位内容和其他页面元素，以及
- JavaScript（通常缩写为JS），用于个性化网站上的交互式体验的编程语言。
网站使用JS的一个主要原因是代码比标准的HTML / CSS页面更容易包或重新使用。随着多年来的用户体验的关注，添加了JavaScript功能可以将您的网站与令人兴奋的网站以令人兴奋的方式兴奋，包括显示映像转盘的机会，交互式横幅，产品视觉效果或其他元素用户的缩放选项成长如此习惯于现代网站。
JavaScript是也更容易扩展并允许网站管理员以更快的步伐增添改进的体验。
进入AngularJS，一个Google供电的JavaScript框架，它将交互性与Web页面添加到Web页面。
基于角度的网站不会将单个页面存储为单独的文件。相反，它通过单个应用程序加载客户端上的内容用户请求。这意味着它不是加载一个新页面来显示不同的内容，而是在同一页面上替换它。
这就是为什么这些web属性通常被称为单页应用程序(spa)。
在实际术语中，差异意味着，每次用户请求信息时，而不是渲染新页面，而是通过Ajax调用在同一页面上发生与内容的所有交互。
这是A.来自微软的视觉表示差异。说明如何在传统页面周期中加载具有每个请求的新的HTML页面。但是，在SPA生命周期中，页面只加载一次。然后，JavaScript使用页面作为框架加载相关内容。
（图像源码）
为什么要使用AngularJS？
建立角框架的网站有三个主要优点：
- 在单个页面应用程序上加载内容要快得多，因为不需要每次都加载新的HTML代码。这将带来更好的用户体验。
- 它还加快了开发过程。开发人员必须仅构建一个页面，但后来他们将使用JS控制其余部分。
- 由于以上，开发人员造成较少的错误，这导致更少的用户在浏览网站时遇到问题。技术团队不必花费时间重新审视其代码来解决错误。适合每个人的双赢场景。
然而，不幸的是，角度对SEO具有一些重大挑战。
希望执行完整的技术网站审计？用这个免费网站审计清单来指导你完成这个过程的每一步，包括这篇文章所涵盖的信息。
有角度搜索发动机友好吗？
要回答这个问题，我们必须首先讨论谷歌如何渲染JS。这个过程主要有两个步骤:
- 首先，搜索引擎按原样索引页面上的HTML内容，不包含JavaScript元素。
- 然后，它呈现页面上的任何JS内容，并相应地对其进行索引。
为了实现这一目标，标准的GoogleBot将访问URL。然后它必须将URL添加到队列中可能需要2-4周的队列才能返回该URL，然后 - 利用Chrome浏览器爬虫 - 访问页面并使用JavaScript渲染页面。
虽然这种方法对于谷歌能够抓取您站点的内容是有效的，但该过程会延长，并且可能在几周到一个月的时间内无法检测到更改。这一点再加上AngularJS的特性，带来了一些挑战。
首先，通过API连接调用内容，单页面技术从页面的实际代码中删除了所有可抓取的内容。API连接在DOM中填充内容的时间框架变得很重要，因为您希望确保这是谷歌查看内容的阈值。
与包含所有网站内容的传统HTML页面不同，SPA仅包含基本页面结构。但是，通过动态API调用出现实际措辞。
对于SEO，以上意味着页面在源代码中不包含实际的HTML。因此，谷歌的所有元素都不存在。如果在此时间段查看源代码或查看谷歌缓存，您将看到一个空白页。
此外，搜索引擎也不能缓存spa。下面的两幅图很好地说明了这个问题。顶部显示了用户在访问Angular页面时看到的内容。另一个是谷歌可以访问和抓取的实际内容。
用户看到的是:
谷歌缓存是什么：
一个缺点，不是吗？
对于用户，页面就像任何其他一样。它们可以轻松导航网站。他们可以访问，阅读和互动。另一方面，谷歌几乎可以在页面上看到任何东西。当然，甚至不足以正确指定它。
小费：使用Google Search控制台查看您的网页，如GoogleBot看到它们。
这是Seos面对角度的挑战。这些应用程序缺乏对其进行排名所需的一切。
幸运的是，还有好消息。
优化AngularJS应用Google Crawling
有几种方法可以确保你的网站可以被干净地抓取。
使用Google Codelab并使用#pushstate来更改URL
谷歌的Codelab通过最重要的SEO元素散步开发人员，这些元素将需要在页面上呈现。这包括利用#pushstate和历史的API要更改URL，请在页面上或通过DOM（Meta标题，说明，规范标记等）中添加重要元素，确保在代码库（而不是单击事件中）显示所有内部链接，并在内容中动态加载。
这种方法的最大问题是，呈现内容的时间可能会更高。虽然这将加载一些必要的元素，但并不总是容易确保内容也出现在网站上，以其最大的能力。
此外，如果您使用此方法，则还需要自定义您的分析指标，以确保它还录制每个访问作为唯一访问和页面视图。
服务器端呈现与角环宇艾尔
但是，可行的选择涉及使用角普遍扩展，以创建页面的静态版本，以呈现服务器端。不用说，这些都是谷歌完全可索引的。
动态渲染
动态呈现是一个首选选项，可以创建一个平面HTML版本的站点，并使用该版本提交给谷歌进行爬行和呈现。根据谷歌自己的网站，“Googlebot通常不认为动态渲染是隐形的。只要你的动态渲染产生类似的内容，Googlebot就不会将动态渲染视为隐形的。”
这让网站有机会创建一个非常快速的版本，用于抓取和索引，同时允许前端设计师添加任何他们想要改善用户体验的元素。
根据网站使用的技术堆栈，创建独立版本的想法可以节省生产时间，并允许内部团队专注于开发前端解决方案，而技术团队可以将创建的渲染外包。
服务包括prerender.io.，这将创建内容的缓存版本，并以GoogleBot可以爬网和索引的形式渲染。利用prerender.io的侧面是增加了成本，以创建渲染，然后还基于您网站上的页数，成本可以很快升级。
较新的服务，如huckabuy.com提供创建静态预渲染你的网站，已经增强模式标记．谷歌还提供了一个解决方案使用莱德顿这是一个基于无头Chromium的开源代码实验室。
预渲染为搜索引擎提供了一个HTML快照，以便它们能够理解您的页面。然而，预渲染站点的一个问题是谷歌可以很容易地弃用它，使站点再次没有可索引的解决方案。
然而，大多数业内专家认为谷歌将继续支持该选项，实际上可能会将其列为首选方法，因为这将允许他们加快爬行和渲染网站内容的过程。在谷歌的文档中，他们更新了他们的建议，包括动态渲染作为解决方案。
初始静态渲染
在此方法中，您可以留下某些关键元素 -标题，元描述，标题，某人副本，依此类推- 在服务器端。结果，这些元素出现在源代码中，谷歌可以爬网。
动态渲染和初始静态渲染之间的真实差分是它将在后端呈现应用程序的第一个视图，并提供静态HTML，然后为每个后续访问提供它将使用JavaScript框架加载该版本。
这种方法的一个核心问题是Googlebot爬虫通常不止一次访问该网站，它可以陷入循环并占用爬网预算以继续重新审视该网站。来自此实现的希望是初始渲染在第一次爬网中捕获。
不幸的是，这个解决方案有时可能会被证明是不够的，这取决于加载的资源和速度，而且并不总是与Googlebot爬虫的行为一致。
如何使用Angular通用扩展为服务器端渲染做准备
下面是对该过程的简要概述角官方网站．但是，在进行该过程之前，我建议您移动到受控测试环境。
过程:
安装依赖关系。
通过修改应用程序代码及其配置来准备您的应用程序。
添加一个构建目标，并使用CLI使用@nguniversal/express-engine原理图构建一个Universal包。注意:CLI代表命令行界面。
设置服务器以运行通用捆绑包。
打包并在服务器上运行应用程序。
结果？一个如此如此如此的缓存页面：
当然，这在视觉上并不引人注目。但用户不会看到它。然而，搜索引擎会找到它需要的所有信息，并适当地索引页面，这正是你的目标。
客户结果
当客户端迁移到AngularJS时，就会在整体搜索可见性方面产生一个问题。我们的团队提供了一个补救策略，以确保该网站对搜索引擎可见。该团队仍然存在问题，需要采取措施提高竞争曝光度、流量和有机搜索的收益。
除了修复策略之外，我们的团队QA将由他们的内部团队执行静态站点渲染和客户端的执行第一名增长了54%，前三名增长了43%在发布后的第一个月内。
另一位客户刚刚实施了AngularJS，并开始看到他们的网站流量迅速下降25％同比。客户端实现了页面标题的动态渲染，元描述和H1标记，具有预渲染I / O缓存。
我们的团队提供了一个补救计划，并保证了执行。前三名增长了55%，前十名增长了29%发射后90天。游戏发行后90天的总流量同比增长了34%。
关键的外卖
AngularJS为改善用户体验和缩短开发时间提供了令人难以置信的机会。不幸的是，这也给SEO带来了严峻的挑战。
首先，单页应用程序不包含爬行内容和索引排名所需的代码元素。
幸运的是，SEO可以通过以下选项来克服它：
使用具有平台的动态渲染，如prerder.io或huckabuy。
创建一个名为初始静态渲染的AngularJS和HTML混合。
- 使用谷歌CodeLab添加索引所需的基本项。
使用Angular Universal扩展创建站点的静态版本，用于爬行和索引。
特别是对于Angular, Angular Universal可能会提供最优的解决方案。对于那些想要继续增强自己的站点，而不局限于Angular的站点，动态渲染提供了最好的解决方案。无论你选择哪种方法，你都希望与一个有经验的开发团队携手完成整个过程，与客户一起优化他们的网站。我们seoClarity的团队非常擅长为团队提供建议和QA测试，而不管解决方案是什么。
编辑注意：这篇文章最初发表于2019年3月，现已更新，以确保其准确性和全面性。
3评论
点击这里读/写评论