What I’m trying to do
I’m trying to get the sharing cards on social media to display the correct titles and images for specific pages on my website, and I’m finding it really difficult to get it working.
It’s a React app using
react-router for custom pages and
react-helmet for custom meta tags. It’s hosted on Galaxy, but it’s not using server-side rendering right now (as far as I understand).
The link previews Facebook and Twitter generate always use the meta tags set in
main.html, instead of the ones set using
react-helmet, so every link I share on social media generates a card for website.com’s information, when I want it to pull website.com/particular-page’s information).
The correct meta tags show up when I Inspect Element on website.com/particular-page, but the generic website.com meta tags also show up in the
<head> tag before them. (Does Open Graph read the first or last meta tags it sees?)
It seems like I should just remove the meta tags from the
main.html file and define them inside the React components for each route, but when I try that, the Facebook and Twitter tools just don’t pull anything for the link preview.
What I have / haven’t done so far
- I used
react-helmetto set custom meta tags for each route
- Added Prerender.io
I’ve followed the instructions to add Prerender.io to the site, but it doesn’t seem to make any difference on how the meta tags are read. And I think I saw somewhere that it only updates the cache once every 4 days, with no options to manually trigger it more frequently, so maybe it takes awhile to take effect for newly published routes?
- I haven’t added server-side rendering yet
From the research I’ve done so far, I can’t see a way to add SSR without doing a big re-write or hardcoding duplicate code for each route. But maybe I’m misunderstanding it, or maybe this is the only way to achieve the functionality I want?
Any help would be hugely appreciated!