深圳网站建设丨深圳seo
深圳推广公司丨品牌设计

seo怎么对AngularJS优化进行抓取和索引?

众人帮

正版黑马计划 www.feedji.com 使用AngularJS构建的网站将所有内容加载到单个页面上。其模板保持不变,只有副本重新加载才能显示访问者请求的信息。

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

但是有一个问题 – 为SEO优化AngularJS。

Angular应用程序在客户端提供内容。因此,他们从Google需要抓取的所有元素中删除了一个页面,并对页面进行排名。

SEO可以做任何事情,或者他们应该放弃并保留未经优化的网站上的任何AngularJS页面?

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

在我告诉你更多相关信息之前,我们先来看一下基础知识。

什么是AngularJS?

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

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

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

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

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

为什么要使用AngularJS
为什么要使用AngularJS?

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

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

2.使用AngularJS也可以加速开发过程??⑷嗽北匦胫还菇ㄒ桓鲆趁?,但之后用JavaScript控制其余页面。

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

然而不幸的是,Angular只是SEO的主要挑战。

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

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

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

对于SEO,上述意味着页面中不包含源代码中的实际HTML。因此,Google会抓取的所有元素都不存在。

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

用户看到的内容:

Google缓存的内容
Google缓存的内容:

AngularJS
一个鲜明的区别,不是吗?

对于用户而言,该页面与其他页面一样。他们可以轻松浏览网站。他们可以访问,阅读和交互信息。

另一方面,谷歌几乎看不到网页上的任何内容。当然,还不足以甚至正确索引它。

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

幸运的是,也有好消息。

如何为Google Crawling优化AngularJS应用程序

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

第一个是使用预渲染平台。例如Prerender.io。这样的服务将创建内容的缓存版本,并以Googlebot可以抓取和索引的形式呈现它。

不幸的是,它可能是一个短暂的解决方案。Google可以轻松地对其进行折旧,从而使网站无法再获得可转换的解决方案。

第二种解决方案是修改SPA元素,使其成为客户端和服务器端之间的混合体??⑷嗽苯朔椒ǔ莆跏季蔡秩?。

在这种方法中,您可以在服务器端保留某些元素,这些元素对SEO – 标题,元描述,标题,某人副本等至关重要。因此,这些元素会显示在源代码中,Google可以抓取它们。

不幸的是,再一次,解决方案有时可能证明不足。

但是,有一个可行的选择。它涉及使用Angular Universal扩展来创建要呈现服务器端的页面的静态版本不用说,这些可以完全由Google编制索引,并且很快就可以对该技术进行折旧。

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

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

过程:

1.安装依赖项。

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

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

4.设置服务器以运行Universal捆绑包。

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

结果?一个看起来像这样的缓存页面:

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

关键要点

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

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

幸运的是,SEO可以通过三种选择来克服它:

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

2.创建一个名为Initial Static Rendering的AngularJS和HTML混合。

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

微多猫

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

深圳网站建设/深圳seo外包服务

关于千贝网千贝网合作
  • 安徽淮南市政协原副主席姚辉涉嫌受贿459万余元受审 2019-04-19
  • 安徽打造统一规范平台 让公共资源交易“晒”在阳光下 2019-04-19
  • 安徽各地大力发展专用粮 打造1400万亩专用粮基地 2019-04-19
  • 安庆扫黑先锋周世成:12年打掉452个恶势力团伙 2019-04-19
  • 一张“绿色发展”蓝图绘到底 2019-04-13
  • 一年内调价6次,特斯拉玩的什么套路? 2019-04-13
  • 二三十岁白领猝死频发 30摄氏度4月天血压管理需重视 2019-04-08
  • 买车别乱选,15万预算最值得入手的4款合资SUV,三大件稳定可靠! 2019-04-08
  • 买房群体迭代, 我们需要怎样的居住? 2019-04-08
  • 医药双创小镇:在诚挚友爱的政商环境中携手创新 2019-04-06
  • 医生用大爱进行救治 患者捐300万回馈社会 2019-04-06
  • 北约70周年特朗普送尴尬“礼物” 要求盟友再加“份子钱” 2019-04-06
  • 学子被APP搞得手忙脚乱 2019-04-05
  • 学前教育如何跑出“加速度” 2019-04-05
  • 境外媒体:习近平访问促中意加强战略对接 2019-03-30