Open graph with angular 2
I am struggling a bit with a SPA built with Angular 2.
I have a list of items. When I click on any element, the application shows details with a title, description and picture.
In my details.component.ts, in the ngOnInit method, I get the details (async) from the api. After the details are loaded, I add / update the open graph meta tags controlling the DOM.
And here's the problem: if someone copy the url and paste on Facebook, the details (via json via API) will be loaded after the html and facebook won't get the updated open chart tags.
Has anyone had this problem? Any idea on how to fix it?
+3
source to share
1 answer
Some (many?) Consumers are not going to bother rendering your javascript to get your opengraph tags. The only two fixes I know of are
- render your content statically (using Angular-Universal or something) and redirect bots and crawlers to the preprocessed content
- In this case, it's wise to have opengraph backups in your index.html, so that at least your pages have something on the page, even if it's not opengraph data for the current article.
+1
source to share