Meta tags & og are not detectable by facebook share

[MartiniHenry1988]

I am using Angular 2 + Meteor 1.4 & I have successfully integrated this package and I can see the titles on my web pages.

But when I check my website url on Facebook Sharing Debugger i.e:

https://developers.facebook.com/tools/debug/sharing

It doesn't shows the page title or the image etc on facekook and it gives these errors:

Missing Required Property
The 'og:type' property is required, but not present.

Inferred Property
The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.

Share App ID Missing
The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.

Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

Why is this so?

[tombpain]

Are you using Angular Universal?

[MartiniHenry1988]

I am using Angular 2

[tombpain]

Sure but you will need to use server side rendering to be able to use metadata on Facebook.

Angular is a client side application and as such Facebook's crawler can't see the metadata updates you are applying as they are carried out past the initial load of the page.

https://angular.io/docs/ts/latest/guide/universal.html

Hope that helps.

[MartiniHenry1988]

@tombpain Do I have to migrate from Angular 2 to Angular Universal? Because I have a huge project running on Angular 2 with Meteor 1.5 now

[vkvish]

@tombpain how do i deploy an universal Angular project.
In the dist folder it creats two additional folders ngfactory and out-tsc. But i am not sure how do i deploy it on apache server.
Thanks

[vinaygopinath]

ng2-meta primarily aims to serve tags to Google's crawler, which renders your site with Javascript enabled, and can pick up the tags set by ng2-meta/Angular's own Meta service.

Facebook's crawler, like Twitter, Whatsapp and most other social media crawlers, does not execute Javascript. You need to use server-side rendering (in the form of Angular universal) and/or prerendering in combination with ng2-meta to provide your meta tags to these crawlers