标签: 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选项的变体,有一些修复......

你有完整的工作实例吗？

提前致谢

我已经在前端使用Angular 6开发了一个网站。默认情况下，Angular不是SEO友好的，因此，为了做到这一点，我以Angular-Universal或Angular SSR（服务器端渲染）的方式实现了它。我更新了代码并比较了以前和现在的页面源，我可以在标记<app-root>和中看到我的应用程序</app-root>，然后才出现“正在加载...”。

我现在用的是MetaService和TitleService从@angular/platform-browser更新所需<meta>的Facebook和Twitter和标签<title>分别标记。

问题是当我在本地系统中运行节点服务器时，view-source向我显示了渲染的meta标签，但是当我在AWS VM上的节点服务器中运行相同的代码时，我没有得到渲染的meta标签，但获得了其他应用程序代码可用。

更新： 添加meta标签的功能

updateMetaTags(egElement: Elements[]) {
    this.url = 'https://example.com/eg/' + this.id;
    const title = egElement[1].innerHTML;
    this.tweetText = 'Check the latest blog on \"' + title + '\"';
    this.meta.addTags([
      { property: 'og:url', content: this.url },
      { property: 'og:type', content: 'website' },
      { property: 'og:title', content: title },
      { property: 'og:description', content: 'Author: ' + egElement[2].innerHTML }, …

我已将我的应用程序从 angular 版本 5 更新到最新版本。这是详细信息：

  Angular CLI: 6.2.1
  Node: 8.12.0
  OS: win32 x64
  Angular: 6.1.6

我也使用 这个：ng-toolkit-universal 来实现服务器端渲染。我能够使用命令“ npm run build:prod ”构建应用程序，但在运行命令时面临以下问题：“n pm run server ”：

任何人都可以请帮助或建议一些相同的解决方案。

提前致谢！