如何在Angular 2中实现SEO(元标记)(使用Angular Universal在服务器端进行渲染)? [英] How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

问题描述

我正在使用Angular Universal在Angular 2上搜索有关SEO或Metatags的完整示例，并在服务器端进行渲染(以被Facebook，twiter和其他metatag识别).

I'm searching a fully working example about SEO or Metatags with Angular 2 using Angular universal to render on server side (to be recognize by facebook, twiter, and other metatags) but I had not success..

我找到了多篇文章，但是不完整(没有所有源代码都可用)或最旧的(未使用最新版本进行编译):

I found multiple articles, but there are incomplete (no all source code is available) or oldest (not compile with the latest versions):

a)blog.devcross.net/2016/04/17/angular-2-universal-seo-friendly-website/ 注意:带有源代码的优秀帖子，但不起作用.

a) blog.devcross.net/2016/04/17/angular-2-universal-seo-friendly-website/ NOTE: Excelent post with source code, but It's not working.

b)Builtvisible.com/universal-angular-2-server-side-rendering-seo-crawl-friendliness/ 注意:非常有用，但是没有完整的源代码.

b) builtvisible.com/universal-angular-2-server-side-rendering-seo-crawl-friendliness/ NOTE: Very usefull but with no source complete source code..

c) https://gist.github.com/kaaboeld/851bc3190eec67f6723c6054751ee2dc

注意:不能完全正常工作的示例.可能是最好的方法.

NOTE: Not fully working example. May be the best approach..

d) https://github.com/angular/universal/issues/454 注意:这是c选项的变体，具有一些修复程序...

d) https://github.com/angular/universal/issues/454 NOTE: It's a variant of c option, with some fixes...

您有完整的示例吗?

预先感谢

推荐答案

看看这个 Universal-入门回购.在其他一些很棒的东西中，您可以找到 angular-meta .ts 服务，用于处理服务器端的所有元标记.您需要按照此问题中所述进行一些细微更改，以便使工作.我认为此解决方案仍需要一些改进(例如，在尝试更新时，它添加了另一个重复标签，但我认为它是可修复的)

Take a look at this Universal-starter repo. Among some other great stuff, you can find angular-meta.ts service that handles all the meta tags on the server side. You will need to follow some minor changes as described in this issue in order to make t work. I think this solution still need some improvements (for example it adds another duplicate tag when trying to update, but I believe that fixable)

类似的服务可以在避风港此处中找到还没有尝试过，但是看起来和以前的概念相同，并且还利用了angular的Title服务来设置页面标题.

Similar service can be found here, haven't tried it yet, but looks like its the same concept as the earlier, and also leveraged angular's Title Service to set the page title as well.

更新

还要检查此修复angular2-meta服务.

Also check This fix for the angular2-meta service.

这篇关于如何在Angular 2中实现SEO(元标记)(使用Angular Universal在服务器端进行渲染)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！