如何在Angular 2中实现SEO(元标记)(在服务器端使用Angular通用进行渲染)?

时间:2016-08-29 15:38:17

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

我正在搜索一个关于SEO或Metatags与Angular 2的完整工作示例,使用Angular universal在服务器端渲染(通过facebook,twiter和其他元标记识别)但我没有成功..

我发现了多篇文章,但有不完整的(没有所有源代码可用)或最旧的(不能使用最新版本编译):

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

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

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

注意:不完整的工作示例。可能是最好的方法..

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

你有完整的工作实例吗?

提前致谢

2 个答案:

答案 0 :(得分:0)

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

可以找到类似的服务here,还没有尝试过,但看起来与之前的概念相同,并且还利用了角度的Title服务来设置页面标题也是如此。

<强>更新

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

答案 1 :(得分:-1)

我遇到了同样的问题,我按照这些文章进行了操作。

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

n=1

第二,使用本教程可以更好地理解:

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

最后,应用此服务方法来保持所有结构:

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

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