-
Notifications
You must be signed in to change notification settings - Fork 47
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
dynamically added meta tags does not recognize facebook #118
Comments
related to #101 this is because (i believe) the components code are executed on the client side and not at server rendering. Perhaps this could work? |
@gianpaj I used server side rendering page but still not working. When I am doing view source on browser developer tool than meta tags are available. facebook Sharing Debugger doesn't shows OG tags. |
As mentioned in #101 , I used https://github.com/angular/universal-starter How are you starting the server? I transpile/build it with I have a very similar code: export class ItemComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private itemsService: ItemsService, // my service
private router: Router,
private readonly meta: MetaService
) { }
ngOnInit() {
this.route.params.subscribe((data: any) => this.itemsService.getItem(data.id)
.subscribe((item: Item) => {
this.item = item;
this.meta.setTag('og:type', 'product');
this.meta.setTag('og:image', item.photo);
... |
@gianpaj, Thanks. I am also using default values to set OG tags-
"og:image" rendered properly but "og:description" and "og:title" doesn't works. not showing facebook debugger. |
I still have the same problem aswell, just like I mentioned here: #101 (comment) I think the reason its working for @gianpaj is simply timing, the Facebook crawler has a really low timeout, and for very basic apps such as the universal-starter, the time it takes to load the item in ngOnInit is probably fast enough for it to work, but if the loading time is slightly longer, then the Facebook crawler will get a timeout before the item has been loaded. What we need is a router guard that collects the needed data from the server before activating the route, which will force the Facebook crawler to wait for that. However, the only way I know about to do this in ngx-meta is to use a backend service similar to the ngx-translate example provided. If I'm wrong in that assumption then I would be very happy if someone can provide a howto on how to acheive what we need. |
I don't think that's true. I don't know the underlying reasons why exactly it works, but my SSR server runs properly and renders the correct meta-tags in the HTML. The I think you need to make sure you are running something like See the |
I am running a proper aot build with angular-cli. Edit: Edit2: Edit3:
It sets the og:title properly, but it does not set the og:image properly. I do believe it might be platformLocation that screws it up. |
my component class implements |
As an update to the issue here, I still wish there was a way to do this kind of thing using the ngx-meta router |
Any update on this issue? I'm also encountering the same issue @linusbrolin reported when the tags are dynamically retrieved from an API rather than being hard-coded. @linusbrolin did you end up resolving your issue? |
@cahkee No, not really. |
@gianpaj can you share your full code for meta update because am getting error in
|
@chozharajan my code is like #118 (comment) I don't understand the error you're mentioning: Maybe open a StackOverflow question with the code, error message, or even better, a repo to reproduce, and the link to the SO question, and I'll try to help. |
@gianpaj thanks for your kind replay. can you share your full code. so it's helpful to build my app. because am also using same as your project. hlp me out |
Reading through all the conversation, the result is not exactly clear. Here is what I think everything above means: to make this work with Facebook it is necessary to:
Is that correct? |
@kylecordes If the content you want to use for the facebook meta-tags is dynamically collected via an api, based on the id and other variables you get from the route, then yes. |
Hi, finally 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 my reference Repo. 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 |
Hi, how do you do to work well? do you use canactive to set meta before render?? |
@kylecordes, @linusbrolin, |
@bharath-holla Yes, we had to do what I wrote above. Server-side render the pages so that Facebook can pick up the fields. In our case it is very slowly changing content so we did server side pre-rendering on a schedule. If your data is changing frequently,instead you would do server-side rendering on demand. There's plenty to read about angular Universal to make this happen, but the net result is you'll be serving HTML with all of the data already populated, which Facebook can parse to get its fields. |
@kylecordes, |
HI, @bharath-holla can you please share the changes you made in server.ts as I'm stuck with this issue for quite while now. |
@bharath-holla @ishan123456789 I'm also stuck on this, please are you able to share your solution. My meta tags are showing fine when viewing page-source, but not coming through via Facebook. |
@thecoconutstudio not able to get it fixed for a while now. Really depressing problem. |
@ishan123456789 @thecoconutstudio Somehow the emails got filtered out and I never observed these comments from both of you. The below code is of course the most horrible hack, but it worked for me when no other solution on net was working. Till Angular team provides a fix, we decided to go with this. Here's my partial code.
And in index.html, create template values as below:
|
Depressing was a good word for it. Has anyone else found a working solution? If not, I'll look into the @bharath-holla (I would need to hack it further for it to work for my needs) |
I am facing this problem as well. Anyone got a better working solution for this? |
@bharath-holla , can you please provide me with your source code? |
@bharath-holla's solution is really the best I've managed to find after 3 days of searching and experimenting with different solutions. Thanks! |
im still unable to implement it, can you provide will full server.ts imports ? |
This it's mi PoC, I add validations for get the params, and I add a promise depending on params. I know this code can improve, but it's a PoC
|
@bharath-holla I changed my server.ts like your code but it cant update meta tags, view source doesnt shows new metatags value |
Because, this is only for response in server-side |
@MikeG96 I want that when I get responce from backend api it will change meta tags and show in "view source page", my app showed changed metatags in "inspect" view, but in "view source page" doesnt changed, and in facebook or other messangers shows link without any updated metatags. |
Do you have any solution for shows updated meta tags on facebook or other messengers ? |
This is an example of the "dirty solution" if you have your backend in JS #118 (comment) For Angular, you need update metas with a service, docs: https://angular.io/api/platform-browser/Meta |
@MikeG96 My backend asp.net core 2.1, I can update my meta tags but when I open "view source page" from console it doesnt shows updated meta tags, and when i share my link in facebook also doesnt shows updated meta tags |
Worked as expected @MikeG96 @bharath-holla, was out of nowhere but this small forum helped me solve the nightmare of 2 days. Just to help @Ilyoskhuja, make sure you have the correct route setup in your server.ts file and also check if there are multiple res.send() or res.render() blocks in your app.get(*). Thanks with regards, |
I already fixed, my problem was in prerendering. |
i have the same exact problem as yours. I can update the meta tags, shown in inspector, but nowhere to be seen in view source (ctrl+u) how did you solve this? |
@rasyad You should check your prerendering code especially with backend part |
Has anyone solved this issue ?, managing to publish a link on facebook linkedin and that these platforms recognize the og tags corresponding to each route? |
Hello everyone, after doing more research and seeing that my "solution" mentioned above was not the best and much less was it in line with good practices, I finally solved the SEO issue with Angular SSR, I share my repository |
Please, can you explain your solution? I'm already working with an Angular SSR project and a service to update meta tags, but crawlers don't recognize "in time" the changes. |
What are your doubts? |
I tested using your solution and meta tags worked on Facebook and Twitter, but it looks like the standard meta tags didn't work. I tested using |
which are your "standard" tags? |
@https://github.com/MikeG96 So the different in your changes was just |
I just added this |
HI @bharath-holla ... How to get the route params here? Can you please provide inputs? I need to get the product details and render meta tags based on productId route param. |
Try adding
|
I had the same issue and I managed to solve it using resolvers. |
Check my repo: https://gitlab.com/mikeag96/angular-ssr |
Hi guys, having same problem. Can any one help me with this ? It would be great if it's in detail |
I'm submitting a ... (check one with "x")
Current behavior
Expected/desired behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Meta tag are getting added it is visible in the chrome developer tool but facebook does not recognize.
Environment
The text was updated successfully, but these errors were encountered: