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
2
Answers
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.
I was having the same issue, I followed these articles to get it working.
Second, using this tutorial to understand a bit better:
And finally, applying this service method to keep it all structured:
Hope this might help others.