Angular 2 – Seo Title, MetaDescription, MetaRobots

Angular 2 – Seo: Sometimes you need to optimize a webpage for search engines. One of the important things for search engines is the title, and some of the meta-tags.

Update 2016-08-17: Updated code to work with Angular RC.

Angular 2 – Seo: Today I would like to show how to manipulate the title, Meta-Description and Meta-Robots tags ofΒ a web page

To manipulate the Title of a web page, Angular 2 brings its own Title service inΒ angular2/platform/browser.

But this is not enough to optimize for search engines. So I need to build my own solution for this problem.

I create a file in ./app/common/seo.service.ts.

  • Line 3: import the DOM module from Angular 2, to manipulate the DOM
  • Line …: Just read the comments in the code to understand what the service does.


To use the service in my components, I need to bootstrap it in ./app/main.ts.

  • Line 1: import the Angular 2 Title service
  • Line 4: import the SeoService
  • Line 6: pass the two services into the bootstrap function

Now I can use the SeoService in every Component. For example in the ./app/app.component.ts.

Happy Angular 2 – Seo Optimization!

37 comments on “Angular 2 – Seo Title, MetaDescription, MetaRobotsAdd yours →

Comments are closed. You can not add new comments.

  1. Hi Johannes,

    thanks for this great solution. I posted this questions a few days ago at stackoverflow. The only answer was: “You have to write it on your own”.

    Is it ok if I post this sitelink as a solution for my question at stackoverflow?

    Kind regards,

  2. Hi, very useful service.
    Any idea why I get TypeError: Cannot read property ‘query’ of null on this:
    this.headElement = DOM.query(‘head’);
    I am using beta12

    1. This code was written with beta 12 too.

      Did you import the DOM at the top?

      import {DOM} from 'angular2/src/platform/dom/dom_adapter';

      maybe you can provide the full code!?

    2. Hey, had the same issue, solved it by making the service implement AfterViewInit and putting it in the ngAfterViewInit(), works like a charm πŸ™‚

  3. I have nothing different than you have. It may be the TypeScript conversion to JS. I am using gulp/gulp-typescript. I will look forward into that, if you say it is working fine for you. Thanks.

    1. Do you use angular 2 universal?

      In that case, this code will not work.
      Because there is no DOM on the server side. There are other ways to optimize for SEO.

      I will write an article soon πŸ™‚

      Have a nice day Claudiu!

  4. Hello Johannes,
    if i create a different component (and route) my “view source” still shows the home component source code. Does this mean my SEO friendly project does not work?

    1. Is it the wrong article? Because this article is just client side, so you would not see anything different in the “view source”

  5. Hello,

    I need help to make this code work.
    I’am using gulp for my app and create the dist directory (and i use modules like ng2-material, or ng2-translate or
    Can i use my build with gulp and get Angular 2 Universal, cause i need a server rendered but i don’t know how this work.

    Thx for the help, and sorry for my english

      1. Thanks a lot, i will do your turorial.
        Nevertheless, i spend time on Universal and i have issue with ng2-material and document.createElement.

        For Gulp how can i plug Universal and launch server.js plz ?

        Thanks for responding,

        1. Please don’t use DOM operations in a Universal application.
          You don’t have a DOM on the server side.
          Use the virtual DOM functions from Angular 2 (e.g. Core/Renderer).

          Normally the people from Angular 2 Material should follow this rule.

          You will follow the same approach in Gulp like I did with the NPM scripts in that tutorial.
          I think I don’t understand your problem :-/

          Maybe I should make an Example with Gulp and Webpack or something, would that help?

          1. Hello,
            Is that possible for you to make the same tutorial with Gulp plz ?
            I really need it to configure Angular Universal with it.

          2. Do you need the exact same build process in gulp like I did in npm?

            Try this:



  6. Okay i understand better.
    I will check my version of Material and encourage you to make an example with Gulp.
    I follow your tutorial and indeed it’s works πŸ™‚
    Now it the turn of my application

  7. Awesome Service ! but ….

    Any idea why I get TypeError: Cannot read property β€˜query’ of null on this:
    this.headElement = DOM.query(β€˜head’); ?

  8. Can you help please, how I can find the DOM file in the Angular 2 RC 1?

    1. this post is outdated

      I think they made it private in rc2. I have to find another way to do this in RC1,2,3. It has too much changed since my post.

  9. I’m thinking about extending what you have here for _many_ other meta tags, keywords, image, etc.. but those may or may not all be relevant to every page of the app. Any thoughts on how best to approach clearing items out of the head on route change, so that if the new route only sets a new title and description, for example, keywords or another tag set on the previous route go away, so as to not affect that new route?

  10. Has something changed with this? I am getting dom_adapter.js:8Uncaught SyntaxError: Unexpected token import at line 8 with import { isBlank } from ‘../facade/lang’; which makes me think its a babel issue, but I have babel and everything is working without this import. Is this different now?

  11. My original solution was written as of RC1 so its definitely possible the APIs have changed. I am revisiting NG2 currently and will post a new solution shortly.

  12. Hello!

    I read your article, and I found you propose a good solution.
    But how can I use it if the title and the description are returned via ajax?
    I want to use this solution for facebook seo, but my problem is: I have to wait until ajax is succed.

    1. hey!
      first of all, check out the new angular version 2.3 it has a native implementation of manipulating meta tags.

      second, just make an http request and set the meta and title in the success function. should be no problem.


  13. Hello.

    I’m able to correctly update the meta information on each page navigation, however Google ignore whatever I add to the meta and simply outputs my static file to the search index preview. It doesn’t use the meta information.

    Is there any other action I must take?

    Thank you,

  14. Nice & Helpful.
    I added a metaKeywords property in SeoService class with its methods.