搜索引擎如何处理AngularJS应用程序?

html HTML

Mandy伽罗神无

2020-03-17

我看到了有关搜索引擎和SEO的AngularJS应用程序两个问题:

1)自定义标签会怎样?搜索引擎会忽略这些标签中的全部内容吗?即假设我有

<custom>
  <h1>Hey, this title is important</h1>
</custom>

<h1>尽管位于自定义标签中仍会被索引?


2)有没有一种方法可以避免搜索引擎将{{}}编入索引的字面绑定?

<h2>{{title}}</h2>

我知道我可以做类似的事情

<h2 ng-bind="title"></h2>

但是,如果我想让搜寻器“看到”标题怎么办?服务器端渲染是唯一的解决方案吗?

第1947篇《搜索引擎如何处理AngularJS应用程序?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
猪猪梅宝儿 2020.03.17

搜寻器不需要功能丰富且风格漂亮的gui,它们只想查看内容,因此您无需为它们提供为人类构建的页面的快照。

我的解决方案:为搜寻器提供所需的内容

您必须考虑爬虫想要什么,并且只给他。

提示不要弄乱背面。只需使用相同的API添加一点服务器端的前视图

宝儿LEY理查德 2020.03.17

爬网程序(或漫游器)旨在爬网网页的HTML内容,但是由于AJAX用于异步数据提取的操作,这成为一个问题,因为它需要一些时间来呈现页面并在其上显示动态内容。同样,AngularJS也请使用异步模型,这会对Google搜寻器造成问题。

一些开发人员使用实际数据创建基本的html页面,并在进行爬网时从服务器端提供这些页面。我们可以PhantomJS在服务端渲染具有相同页面的内容_escaped_fragment_(因为Google #!在我们的网站网址中查找,然后在后面获取所有内容#!并将其添加到_escaped_fragment_查询参数中)。有关更多详细信息,请阅读此博客

Mandy神乐 2020.03.17

使用Angular Universal,您可以为应用程序生成看上去像完整应用程序的登录页面,然后将Angular应用程序加载到其后。
Angular Universal生成纯HTML,意味着在服务器端没有JavaScript页面,并且无需延迟即可将其提供给用户。因此,您可以与任何爬虫,机器人和用户(已经具有较低的CPU和网络速度)打交道,然后可以通过链接/按钮将它们重定向到已在其后面加载的实际角度应用程序。该解决方案是官方网站推荐的。-有关SEO和Angular Universal的更多信息-

猿飞云斯丁 2020.03.17

使用类似PreRender之类的方法,它可以使您的站点成为静态页面,以便搜索引擎可以对其进行索引。

在这里您可以找到可用的平台:https : //prerender.io/documentation/install-middleware#asp-net

GreenItachi 2020.03.17

此处其他答案中所引用的Google的Crawlable Ajax Spec基本上就是答案。

如果您对其他搜索引擎和社交机器人如何处理相同的问题感兴趣,请在此处写下最新技术水平:http : //blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

我为https://ajaxsnapshots.com工作,该公司将Crawlable Ajax Spec作为服务实施-该报告中的信息基于我们日志中的观察结果。

村村宝儿Itachi 2020.03.17

截至目前,Google已更改了其AJAX抓取建议。

时代变了。今天,只要您不阻止Googlebot抓取JavaScript或CSS文件,我们通常就可以像现代浏览器一样呈现和理解您的网页。

tl; dr:[Google]不再推荐早在2009年提出的AJAX爬网建议[Google]。

Tony阿飞 2020.03.17
NearSamHarry 2020.03.17

Angular自己的网站为搜索引擎提供了简化的内容:http : //docs.angularjs.org/? _escaped_fragment_=/ tutorial/step_09

假设您的Angular应用正在使用Node.js / Express驱动的JSON api,例如/api/path/to/resource也许您可以将任何请求重定向?_escaped_fragment_/api/path/to/resource.html,并使用内容协商来呈现内容的HTML模板,而不是返回JSON数据。

唯一的是,您的Angular路由需要与REST API匹配1:1。

编辑:我意识到这有可能使您的REST api变得更加混乱,我不建议您在非常简单的用例之外自然地适应它。

相反,您可以对机器人友好的内容使用一组完全不同的路由和控制器。但是,然后您在Node / Express中复制了所有AngularJS路由和控制器。

我已经决定使用无头浏览器生成快照,尽管我觉得这比理想情况要差一些。

神无Tom 2020.03.17

自从提出这个问题以来,事情已经发生了很大的变化。现在有一些选项可以让Google为您的AngularJS网站建立索引。我发现最简单的选择是使用http://prerender.io免费服务,该服务将为您生成可破解的页面并将其提供给搜索引擎。几乎所有服务器端Web平台都支持它。我最近开始使用它们,并且支持也很棒。

我与他们没有任何从属关系,这来自一个愉快的用户。

斯丁宝儿 2020.03.17

您应该在moo博客这一年真正查看有关构建SEO友好的AngularJS网站的教程。他将带您完成Angular文档中概述的所有步骤。http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

使用此技术,搜索引擎将看到展开的HTML而不是自定义标签。

乐米亚 2020.03.17

这已经彻底改变了。

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

如果您使用:$ locationProvider.html5Mode(true); 你已经定了。

没有更多的渲染页面。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android