如何在 Angular 2 中实现 SEO（元标记）（在服务器端使用 Angular 通用渲染）？答案

【问题标题】：How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?如何在 Angular 2 中实现 SEO（元标记）（在服务器端使用 Angular 通用渲染）？
【发布时间】：2017-01-05 17:05:03
【问题描述】：

我正在搜索一个关于 Angular 2 的 SEO 或 Metatags 的完整工作示例，使用 Angular Universal 在服务器端呈现（被 facebook、twiter 和其他 metatags 识别），但我没有成功..

我找到了多篇文章，但有不完整（没有所有源代码可用）或最旧（未使用最新版本编译）：

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

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

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

注意：不完全有效的示例。可能是最好的方法..

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

你有任何完整的工作示例吗？

提前致谢

【问题讨论】：

您有可行的解决方案吗？
@Gerardlamo 是的，我有。
您能否提供任何可行的解决方案。我找不到任何东西

标签： angular seo meta-tags angular-universal angular-seo

【解决方案1】：

看看这个Universal-starter repo。在其他一些很棒的东西中，您可以找到处理服务器端所有元标记的angular-meta.ts 服务。您需要按照this issue 中的说明进行一些小的更改才能使其正常工作。我认为这个解决方案仍然需要一些改进（例如它在尝试更新时添加了另一个重复的标签，但我相信可以修复）

类似的服务可以找到here，还没试过，不过看起来和之前的概念一样，也利用了angular的Title服务来设置页面标题。

更新

同时检查 This 修复 angular2-meta 服务。

【讨论】：

【解决方案2】：

我遇到了同样的问题，我按照这些文章来解决问题。

首先，使用 angular.io 中的文档：https://angular.io/guide/universal

- ng add @nguniversal/express-engine
- npm run dev:ssr (and inspect page to view the result)

第二，用这个教程更好理解一点：

https://www.youtube.com/watch?v=In59ucLNr0s&t=1097s

最后，应用这个服务方法来保持它的结构：

https://ultimatecourses.com/blog/dynamic-page-titles-angular-2-router-events

希望这可能对其他人有所帮助。

【讨论】：