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!