How to set meta tags programmatically on the server side?
gianpaj opened this issue · 5 comments
I'm submitting a ... (check one with "x")
[x] Support request
Current behavior
When setting meta tags programmatically at the client side, e.g. in a component, those tags are obviously not set at the server side, at first render.
How do I run a http request to retrieve data from an API and then, for example, set the correct og:image
?
Minimal instructions
in mycomp.component.ts
this.meta.setTag('og:image', `${item.photo}`);
Would be great if the would be a callback or function that can be run in order to generate any meta tags at the server side level for each page, route or component.
What is the motivation / use case for changing the behavior?
For Social sharing purposes
I would also like to know how to do this.
Specifically for routes with an :id
parameter:
{
path: ':id',
component: ProductComponent,
data: {
meta: {
title: 'PRODUCT_TITLE',
description: 'PRODUCT_DESCRIPTION'
'og:image': 'PRODUCT_IMAGE'
}
},
canActivate: [MetaGuard]
}
I can't just use a http service for this that resolves the 'PRODUCT_TITLE' variable for example, because I have no idea which product to read the title from.
I need to access the :id
parameter in the route itself in order to know which product to read the title from.
How do I resolve the :id
parameter before the route has been activated (since we have a CanActivate MetaGuard on it)?
I made a new angular 5 app cloning this:
https://github.com/angular/universal-starter
Installed ngx-meta
and then ran npm run build:ssr && npm run serve:ssr
.
and it worked 🎉
my project work well in local. but once deployed in server. i got view source (cntrl + U) but meta update not happening. i used npm run build:prerender
cmd for build the project. and i placed dist/browser
files in root directory. here is my project link. so how to make meta update possible. NOTE: in local am getting meta update for npm run build:ssr
cmd. i think am wrongly doing the build cmd. so how to deploy the universal project in IIS server. thanks in advance
https://angular.io/guide/universal
You won't be able reference browser-only native objects such as window, document, navigator or location. If you don't need them on the server-rendered page, side-step them with conditional logic.
Conclusion you can't update server side and expect it to work...
I'm also looking for a solution.
As I'm going to prerender with pupeeter, a dirty hack would be to set meta for each page at the prerender level instead of inside the angular app.
I would also like to know how to do this.
Specifically for routes with an:id
parameter:{
path: ':id',
component: ProductComponent,
data: {
meta: {
title: 'PRODUCT_TITLE',
description: 'PRODUCT_DESCRIPTION'
'og:image': 'PRODUCT_IMAGE'
}
},
canActivate: [MetaGuard]
}I can't just use a http service for this that resolves the 'PRODUCT_TITLE' variable for example, because I have no idea which product to read the title from.
I need to access the:id
parameter in the route itself in order to know which product to read the title from.How do I resolve the
:id
parameter before the route has been activated (since we have a CanActivate MetaGuard on it)?
I have the same task to do. did you get your answer?