CODEWITHSUNDEEP
facebook
Harry Liu
Harry Liu

Reputation: 23

Facebook sharer for single page application

The Facebook link sharing mechanism goes as follows: When you want to share a website link to facebook, the facebook crawler will try to recognize you webpage, and determine whether Facebook Open Graph Markup exists within the head tag. If it exists, it will be extracted to be materials in the post when shared.

The question is: If this is a single page React App, e.g. I want to share a commercial product and I want my post contains its picture and brand name. However, since such data is retrieved asynchronously, the product info is not fetched by the facebook crawler.

Upvotes: 1

Views: 857

Answers (1)

Ben
Ben

Reputation: 5129

The Facebook sharer only looks for the Open Graph Meta Tags. You should make these content ready after the server response. If these content ready after the data is retrieved asynchronously, then the sharer does not work properly.

<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:type" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />

Upvotes: 1

Related Questions