search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.84k stars 26.88k forks source link

Social share [question] #3140

Closed vedran-milic closed 7 years ago

vedran-milic commented 7 years ago

Hey guys. When sharing links on facebook, facebook sharer is not finding any images in my react app. I set up og tags dynamically after scripts load, but they get ignored. Is there a way around this problem without server rendering?

Timer commented 7 years ago

Doesn't sound like it -- this may be a limitation of Facebook's sharer. I'm not an expert on the subject.

You could try out react-snapshot to pre-render your application.

tbillington commented 7 years ago

@vedran-milic I saw a blog posts a few months back which showed that google would execute js for longer the more popular the site and the older the page. The author tested an inline snippet that changed the title, a async script which changed the title to something different, a delayed async script which changed it to something, etc and watched how the page looked in google search results over time (weeks) to evaluate how much js was being executed.

I can't find it but it makes sense that facebook would do the same thing. Executing full js on each page visit is a lot of extra work for crawlers to do if they don't have to.

vedran-milic commented 7 years ago

Thanks guys. I've stumbled upon this https://rck.ms/angular-handlebars-open-graph-facebook-share/ solution last night. It might help someone. Basic idea is to intercept requests from facebook and serve crawler some basic html with og tags while user gets redirected to app. We'll use this until we pre-render our app. I'm closing this.

integral0909 commented 6 years ago

Hi, @vedran-milic Good article. Can you provide me your above solution of facebook sharing? I can't figure out how can I solve this. Thanks.

vedran-milic commented 6 years ago

Hi, @sweetdream0729. This has to be solved serverside. I'm frontend developer so I don't know how to do it in code. I've stumbled upon this article and my backend guys solved it. At the time I was working on ok.rs. You can check there to see how it works. The app is not server side rendered. Basic concept is interception of request and detecting if they're facebook robots or regular users. Robots get served blank pages with neccessary og tags, and users get redirected back on actual app. Check with some backend dev to help you. I hope this helps.