How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

Question

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

Procure

Do you have a working solution yet? – Mosemoseley

@Mosemoseley Yes, I have. – Patterson

could you please provide any working solution. I cannot find anything – Snooze

Answer 1

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.

Fungiform

Answer 2

I was having the same issue, I followed these articles to get it working.

First, using the documentation in angular.io: https://angular.io/guide/universal

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

Second, using this tutorial to understand a bit better:

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

And finally, applying this service method to keep it all structured:

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

Hope this might help others.

Pillbox