dynamically added meta tags does not recognize facebook

[mistrynilesh]

I'm submitting a ... (check one with "x")

[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->

Current behavior

Expected/desired behavior

Minimal reproduction of the problem with instructions

import { MetaService } from '@ngx-meta/core';
import { FirstService } from './first.service';

export class FirstComponent {
      firstObj : any = {};

     constructor(private _metaService: MetaService,
                        private _firstService: FirstService) {}
      
     ngOnInit() {
             this._firstService.getQuestionOfTheWeek(0).subscribe(
                  res => firstObj = res,
                  error => this.errorGetRequest(error),
                  () => this.successGetRequest()
              );
       }

    successGetRequest(){
            this._metaService.setTag('og:description', this.firstObj .Desc);
            this._metaService.setTag('og:image', this.firstObj .ImageURL);
     }

}

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

• Angular version: 4.0.0

• Browser:

• Chrome (desktop) version XX
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

• For Tooling issues:

• Node version: XX
• Platform:

• Others:

[gianpaj]

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?
https://github.com/angular/universal#universal-gotchas

[mistrynilesh]

@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.

[gianpaj]

As mentioned in #101 , I used https://github.com/angular/universal-starter

How are you starting the server? I transpile/build it with npm run build:ssr and then start the server.js in the dist folder with npm run serve:ssr.

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);
...

[mistrynilesh]

@gianpaj, Thanks.

I am also using default values to set OG tags-

export function metaFactory(): MetaLoader {
  return new MetaStaticLoader({
    pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
    pageTitleSeparator: ' - ',
    applicationName: 'Tour of (lazy/busy) heroes',
    defaults: {
      'og:title': 'Mighty mighty mouse',
      'og:description': 'Mighty Mouse is an animated superhero mouse character',
      'og:image': 'https://d2y8liyagvllvg.cloudfront.net/images/website/nclexqow/20170801.png',
      'og:type': 'website',
      'og:locale': 'en_US',
      'og:locale:alternate': 'en_US,nl_NL,tr_TR'
    }
  });
}

 MetaModule.forRoot({
      provide: MetaLoader,
      useFactory: (metaFactory)
    }),

"og:image" rendered properly but "og:description" and "og:title" doesn't works. not showing facebook debugger.

[linusbrolin]

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.
But, it seems that ngx-meta can only provide parameters with a fixed value to that backend service, from what I understand, not dynamic values like route ID's, etc.

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.

[gianpaj]

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.
View the source of this page for example: https://givebox.xyz/item/H1-ybixCZ

The og:image, og:url,og:title (and title) are dynamically generated.

I think you need to make sure you are running something like npm run build:ssr and npm run serve:ssr.

See the package.json
https://github.com/angular/universal-starter/blob/master/package.json#L24

[linusbrolin]

I am running a proper aot build with angular-cli.
When and how do you collect the correct image url for the og:image tag?
Because I can get the og:title to be set to what it should, but the og:image tag is simply not being set, despite the fact that I have created a router guard specifically for this that sets both the og:title and the og:image at the same time from the same data.

Edit:
Some source code example on how you set the og:image tag from dynamic data would be welcome.

Edit2:
I also want to clarify that I can get the og:image tag to work if I use the defaults, or if I specify a manual value, like in @mistrynilesh example.
It is only when the image url is retrieved dynamically that it doesn't work.
But the og:title does work, so it makes very little sense.

Edit3:
Here is a small code example of a route guard that collects the data and sets the tags, before activating the route:

@Injectable()
export class ProductMetaGuard implements CanActivate {
  constructor(private _platformLocation: PlatformLocation,
              private _productsService: ProductsService,
              private readonly meta: MetaService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return Observable.create((observer: any) => {
      let url: string = state.url;
      let id: string = next.params['id'];

      this._http
        .get(environment.apiUrl + '/products/' + id)
        .map((res: Response) => res.json())
        .subscribe(
          (val: Product) => {
            let metaSettings: any = (next && next.data && next.data['meta'])
              ? next.data['meta']
              : {};

            if (val && val.title) {
              metaSettings.title = val.title;

              if (val.image && this._platformLocation && this._platformLocation['location']) {
                metaSettings['og:image'] = this._platformLocation['location'].origin + '/images/products/' + val.image;
              }
            }

            this.meta.update(url, metaSettings);

            return observer.next(true);
          },
          (err: any) => {
            return observer.error(err);
          }
        );
    });
  }
}

It sets the og:title properly, but it does not set the og:image properly.
In the browser, the og:image is set, but not when I view source.
But og:title is set on both.

I do believe it might be platformLocation that screws it up.
However, how do I get the origin path during server rendering?
I do not want to hardcode a path, since the origin is dynamic.

[gianpaj]

my component class implements OnInit (see #118 (comment)).
I've never used or heard of CanActivate. Hopefully somebody can guide you in the right direction

[linusbrolin]

CanActivate is used in the router, as a way to determine if a route is allowed or not, before the component is rendered.

As an update to the issue here, PlatformLocation was the reason that the image does not show up for me.
So for now I'm gonna have to live with hardcoding the image paths and just retrieve the filename itself from the server.

I still wish there was a way to do this kind of thing using the ngx-meta router MetaGuard, instead of having to either create my own custom router guard, or make calls in OnInit.
As it is now, I can only use the ngx-meta MetaGuard for non-dynamic content.

[cahkee]

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?

[linusbrolin]

@cahkee No, not really.
I'm still hard-coding the paths and then use an API to retrieve the filenames.
It's ugly, but works for now.

[chozharajan]

@gianpaj can you share your full code for meta update because am getting error in .subscribe((item: Item) => {
can't find name Item am also using same Repo from https://github.com/angular/universal-starter and ngx-meta

1. if i update manually its work --- this.meta.setTag('og:image', 'cAngulsadasdar 4 meta service');
2. but when i update after API call its not reflected in view source(Cntrl + U) --- this.meta.setTag('og:description', res[i].DocDesc);. any one help me out from this

[gianpaj]

@chozharajan my code is like #118 (comment)

I don't understand the error you're mentioning: can't find name Item.

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.