react-share
react-share copied to clipboard
nygardk
og:image and title
Hi people, how to correct set sharing ?
i attach 3 screenshot , maybe i did mistake.
I'm not even sure that using the open graph meta tags is within the scope of this project, but it would be an excellent feature to add. If people have taken the time to setup the correct meta tags, the package should be able to use them in the popup window.
@mirik999 I had the same issue and finally managed to solve it. Can you send me how your Social Media component looks like? In my case this was wrong url pointing to the website general but not /blog. Your meta helmet looks fine.
@mirik999 I also managed to solve this issue. My problem was similar to @asiajacko's.
FB was using my canonical url tag to fetch the html to scrape. In development, my canonical url was pointing to my production instance, so FB would go look at my production html which didn't have the meta tags yet. Once I pushed the helmet code to production, FB was able to scrape and render everything correctly.
@mirik999 yes! js where u have your social media :) @brybrophy exactly. The only way how to test it is: https://developers.facebook.com/tools/debug/sharing/ (and production url) and https://cards-dev.twitter.com/validator for twitter. Using fb debugger you can see exactly what data fb can render, what is missing etc.
@asiajacko https://jsfiddle.net/Mirik999/mhxgkr6v/1/ , it is just react component where setted meta tags with url and thumbnail and with other settings. and this component where social media button setted https://jsfiddle.net/Mirik999/ae7mq0gp/
@mirik999 did u tried : https://developers.facebook.com/tools/debug/sharing/ (and production url) and u can see exactly what our scraper sees for your URL, where are mistakes and also you can debug there -- | --
It seems like you need server side rendering to make crawlers(fb, tw, etc) see your open graph tags. Dynamically adding on client side does not work. Crawlers can see only static html.
@SlavikMelnyk That is correct. If you don't want to setup SSR though, you can use a service like prerender.io. This service will cache the html output of your rendered app, and serve the cached version to crawlers and social sharing. The cache updates every 24 hours. It's a great, lightweight solution, and is free up to 250 cached pages.
prerender.io is a service the does premiering for you. You can use it for free until you have more than 250 pages cached, then you have to start paying.
For example, if you have and app that has 10 pages, and and app that has 40 pages, you’ll have 50 pages being cached by prerender.io. These cached pages will be served when your app is being crawled by google, or when a link is shared on social media or texted.
You don’t need to set up SSR in your app. pretender.io will just render the html output of your app, and keep that around for crawlers. Regular users will be served your actual app. The cached pages are updated every 24 hours.
Does react-share and react-helmet works together for facebook sharing with image thumbnail or not for client rendered web applications ?
