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

问题描述

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

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

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

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

c) https://gist.github.com/kaaboeld/851bc3190eec67f6723c605c605>

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

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

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

提前致谢

解决方案

看看这个 Universal-启动器 回购.在其他一些很棒的东西中，你可以找到 angular-meta.ts 服务处理服务器端的所有元标记.为了让你工作.我认为这个解决方案仍然需要一些改进(例如它在尝试更新时添加了另一个重复标签，但我相信可以修复)

可以在这里找到类似的服务，haven还没试过，不过貌似和之前的概念一样，也是利用angular的TitleService来设置页面标题的.

更新

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

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/ NOTE: Excelent post with source code, but It's not working.

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 NOTE: It's a variant of c option, with some fixes...

Did you have any full working example??

Thanks in advance

解决方案

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)

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.

Update

Also check This fix for the angular2-meta service.

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