node.js Angular2 SEO - 如何使 Angular 2 应用程序可抓取
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33914371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 SEO - How to make an angular 2 app crawlable
提问by Rayjax
I am building an Angular 2 app using the Angular-Meteor framework.
我正在使用Angular-Meteor 框架构建一个 Angular 2 应用程序。
I would like to achieve fast and consistent indexingby google and other search engines, and allow Facebook sharer and other scrapersto generate previews of my JS-generated content.
我想实现快速和一致的索引谷歌和其他搜索引擎，让Facebook的分享者和其他刮削器生成我的JS生成内容的预览。
Usually SPAs use the PhantomJS to render the page server-side and send the static HTML to the client.
通常 SPA 使用 PhantomJS 来呈现页面服务器端并将静态 HTML 发送到客户端。
Of course I can spawn PhantomJS myself when I intercept an _escaped_fragment_ or when I see the google or scraper user agent, but I always experienced memory leaks and orphan Phantom instances when spawning PhantomJS directly on websites with a big traffic (I used NodeJS and this module).
当然我可以在拦截_escaped_fragment_或者看到google或scraper用户代理时自己生成PhantomJS，但是在流量大的网站上直接生成PhantomJS时，我总是遇到内存泄漏和孤立的Phantom实例（我使用了NodeJS和这个模块）。
For Angular 1 apps, I used to solve this with angular modules like Angular-SEO, but it seems hard to convert such module to angular 2.
对于 Angular 1 应用程序，我曾经使用Angular-SEO 之类的Angular模块解决这个问题，但似乎很难将此类模块转换为 angular 2。
I did not find any appropriate Angular 2module for this yet. Should I build it myself, or is there any other good way to achieve this as of today ?
我还没有找到任何合适的Angular 2模块。我应该自己构建它，还是有任何其他的好方法来实现这一目标？
采纳答案by jornare
The great thing about Angular2 is that when fired up, all content inside your root app-element goes away. This means that you can put whatever you want in there from the server which you want to be picked up by crawlers.
Angular2 的伟大之处在于，当它启动时，根应用程序元素中的所有内容都会消失。这意味着您可以从服务器中放入您想要被爬虫抓取的任何内容。
You can generate this content by using a server-rendered version of the content in your app, or have custom logic.
您可以使用应用程序中内容的服务器呈现版本来生成此内容，也可以使用自定义逻辑。
You can find some more information here: https://angularu.com/VideoSession/2015sf/angular-2-server-renderingand here: https://github.com/angular/universal
您可以在此处找到更多信息：https: //angularu.com/VideoSession/2015sf/angular-2-server-rendering和此处：https: //github.com/angular/universal
回答by WeNeigh
I just created ng2-meta, an Angular2 module that can change meta tags based on the current route.
我刚刚创建了ng2-meta，这是一个 Angular2 模块，可以根据当前路由更改元标记。
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
data: {
meta: {
title: 'Home page',
description: 'Description of the home page'
}
}
},
{
path: 'dashboard',
component: DashboardComponent,
data: {
meta: {
title: 'Dashboard',
description: 'Description of the dashboard page',
'og:image': 'http://example.com/dashboard-image.png'
}
}
}
];
You can update meta tags from components, services etc as well.
您也可以从组件、服务等更新元标记。
class ProductComponent {
...
constructor(private metaService: MetaService) {}
ngOnInit() {
this.product = //HTTP GET for product in catalogue
metaService.setTitle('Product page for '+this.product.name);
metaService.setTag('og:image',this.product.imageURL);
}
}
While this caters to Javascript-enabled crawlers (like Google), you can set fallback meta tags for non-Javascript crawlers like Facebook and Twitter.
虽然这迎合了启用 Javascript 的爬虫（如 Google），但您可以为非 Javascript 爬虫（如 Facebook 和 Twitter）设置回退元标记。
<head>
<meta name="title" content="Website Name">
<meta name="og:title" content="Website Name">
<meta name="og:image" content="http://example.com/fallback-image.png">
...
</head>
Support for server-side rendering is in progress.
对服务器端渲染的支持正在进行中。
回答by Davy
Serverside rendering is not a requirement for a decent google ranking ...
服务器端渲染不是一个像样的谷歌排名的要求......
I had a forum with about 33.000 entries in its google sitemap files. This website was written using asp.net webforms, and had a decent stream of incoming requests from google. This website did have very bad mobile readability (something that is penalized by google, it actually mentioned this in my google "search console")
我有一个论坛，其 google 站点地图文件中有大约 33.000 个条目。该网站是使用 asp.net 网络表单编写的，并且有大量来自 google 的传入请求流。这个网站的移动可读性确实很差（被谷歌惩罚的东西，它实际上在我的谷歌“搜索控制台”中提到了这一点）
I rewrote everything with angular (deployed version is angular5). I am using the Title and Meta services to set my title and meta tags. All routes contain keywords extracted from the actual content. I also made sure that every element with a [routeLink] attribute was an A tag on which i also specified the href element (that is what a crawler looks for ...) And of course i paid a lot of attention to mobile readability.
我用 angular 重写了所有内容（部署版本是 angular5）。我正在使用 Title 和 Meta 服务来设置我的标题和元标记。所有路由都包含从实际内容中提取的关键字。我还确保每个具有 [routeLink] 属性的元素都是一个 A 标记，我还在该标记上指定了 href 元素（这是爬虫寻找的内容……）当然，我非常关注移动设备的可读性。
Result: i actually get more incoming traffic than before, and in the search console i clearly see that my indexed pages went up: of the 30k+ pages, only about 10K were included in the index. Now i have almost 25k pages in the index.
结果：我实际上获得了比以前更多的传入流量，并且在搜索控制台中我清楚地看到我的索引页面上升了：在 30k+ 个页面中，只有大约 10K 被包含在索引中。现在我在索引中有将近 25k 页。
I am not saying that serverside rendering is irrelevant. Using universal or other methods will result in faster download times, which will probably lead to a higher score. But google is definitely able to properly index an angular SPA.
我并不是说服务器端渲染无关紧要。使用通用或其他方法将导致更快的下载时间，这可能会导致更高的分数。但是谷歌绝对能够正确索引一个有角度的SPA。
edit: some proof: if you google "3ds max threadripper", you'll see that it actually outranks one of the biggest hardware sites on the internet.
编辑：一些证据：如果你用谷歌搜索“3ds max threadripper”，你会发现它实际上超过了互联网上最大的硬件网站之一。
