skip to Main Content

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


  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.

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search