150-1924-0507

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

2019年12月22日 23:12  千赋科技 

  使用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扩展来创建站点的静态版本以进行爬网和索引 – 这是我推荐的选项。


标签 :AngularJS
上一篇 seo优化语义搜索的现状及5种优化方法
下一篇 AMP更新:最新的加速移动页面

声明:本文内容由深圳市千赋科技有限公司原创或者通过网络收集编辑所得,所有资料仅供用户参考;对收集的资料本站不拥有所有权,也不承担相关法律责任。如您认为本网页中有涉嫌侵权的内容,请及时与我们联系,并提供相关证据,工作人员会在5个工作日内联系您,一经查实,本站将立刻删除涉嫌侵权内容。

相关文章 Related articles
服务热线

150-1924-0507

网站建设公司 www.me345.com 粤ICP备15080528号-1

Copyright© 2008-2019 深圳市千赋科技有限公司 版权所有