Search Results in google are displayed via TitleTag and the <meta name="description"..."/>
Tag.
The <title>
-Tag is editiable via Angular2 how to change page title in angular2 router
What’s left is the description.
Is it possibile to write a directive in angular2, that manipulates the meta-tags in the <head>
part of my page.
So depending on the selected route, the meta description changes like:
<meta name="description" content="**my description for this route**"/>
4
Answers
There is currently no out-of-the-box solution only an open issue to implement it https://github.com/angular/angular/issues/7438.
You can of course implement something like the title service yourself, just use the TitleService as template
A
Meta
service similar toTitle
service is in the works (currently only a pull request).I have developed and just released @ngx-meta/core plugin, which manipulates the meta tags at the route level, and allows setting the meta tags programmatically within the component constructor.
You can find detailed instructions at @ngx-meta/core github repository. Also, source files might be helpful to introduce a custom logic.
Since Angular4, you can use Angular Meta service.
It is possible. I implemented it in my app and below I provide the description how it is made.
The basic idea is to use
Meta
from@angular/platform-browser
To dynamically change particular meta tag you have to:
removeTag(attrSelector: string) : void
method.
addTag(tag: MetaDefinition, forceCreation?:
method.boolean) : HTMLMetaElement
And you have to do it when the router fires route change event.
Notice: In fact it is also necessary to have default
<title>...</title>
and<meta name="description"..." content="..."/>
in head of index.html so before it is set dynamically there is already some static content.My
app-routing.module.ts
content:data
object field foreach route. It contains
title
andmetaDescription
stringswhich will be used as title and meta tag content.
router event. Rxjs is used there, but in fact it is not necessary to use it. Regular
if statements
andloops
could be used insead of stream, filter and map.use info like
title
andmetaDescription
strings.<title>...</title>
and<meta name="description"..." content="..."/>
tags.Effects:
First component
Second component
In fact I currently use a little bit more sophisticated version of this solution which uses also ngx-translate to show different title and meta description for different languages.
Full code is available in angular2-bootstrap-translate-website-starter project.
The
app-routing.module.ts
file with ngx-translate solution is exactly there: app-routing.module.ts.There is also the production app which uses the same solution: http://www.online-utils.com.
For sure it is not the only way and there might be better ways to do it. But I tested this solution and it works.
In fact the solution is very similar to this from corresponding post about changing title: How to change page title in angular2 router.
Angular Meta docs: https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html. In fact they aren’t very informative and I had to experiment and look into real .js code to make this dynamic meta change working.