open graph with angular 2 [duplicate]

Question

I'm struggling a little with a SPA built with Angular 2.

I have a list of items. When I click over some item, the app shows the details, with title, description and picture.

In my details.component.ts, at ngOnInit method I get the details (async) from api. After details loaded I add/update open graph meta tags manipulating the DOM.

And here is the problem: if someone copy the URL and paste at Facebook, the details (by json through API) will load after html, and facebook won't get the updated open graph tags.

Did someone have this kind of problem? Any ideia about how to fix it?

Answer 1

Some (many?) consumers aren't going to bother rendering your javascript in order to get your opengraph tags. The only two fixes I'm aware of for this are either to

• statically render your contents (using Angular-Universal, or something like that) and redirect bots and crawlers to the pre-rendered content
• failing that, it is prudent to have backup opengraph tags in your index.html, so that at least your pages have something on the page, even if it's not the open graph data for the current article.