Open graph meta tags and SEO in a React SPA

Question

I'm experimenting with rewriting a "static" web-app (server-side only PHP) using React as a SPA. Stuff works fine, but wondering how to go about dealing with open graph meta tags and such, particularly in relation to search engines and sharing (e.g. through facebook or twitter).

The official documentation, and the "solutions" I find trying to search for this issue, just says to serve meta tags that are "dynamically" replaced server-side, but how does that make sense in a client-side SPA?

When for example someone shares https://example.com/page/1, I'd want e.g. <meta name="og:title"> to be set to the title of page 1, not the static title of the whole site.

1. Is there a way actually manage these meta tags dynamically from within the React app?
2. And will it actually work when google/facebook/twitter/etc crawls the page to fetch these details?

Conclusion

Does this answer your question? Sharing on social media, the URL does not render any meta data – Transponder

@Transponder If you mean the questions saying "you need SSR", then yes. Unless you have found a new client-side solution I'm not aware of. I accepted the current answer here, which says that. Thanks for the nudge 🙂 – Conclusion

Search engines don't use open graph tags, those are exclusively used by social media. Search engines use other meta tags like the meta description and the robots meta tag. – Rainarainah

Answer 1

Facebook, for example, ignores JavaScript - so you have to make sure all relevant (Open Graph) tags are available in the initial source.

The answer is "SSR - Server Side Rendering". You can do that with a Node.js sever for react, tools like Next.js or Gatsby help you with that. Alternatively, you can try prerender.io.

Unhelm

Aha, so there actually isn't any client-side-only solution to this issue. 😕 Do you have any recommendations? Used anything successfully yourself? I tested out react-snap for the SSR part, which seemed to work nicely out of the box (at least for my currently simple case), but what would you use for dealing with the meta-tags? – Conclusion

i am using next.js with a node.js server for SSR, it´s very easy to set up. of course you can set metatags per page. – Unhelm

@Conclusion It is possible without SSR, you have to statically generate each page, so each route has a unique html page, where you have set the meta tags per page. we are using react-static for this. – Outset

@Outset That's basically the same as SSR, just "even more static" – Conclusion

SSR would be generating a html file when the client requests one, whereas static generation would be doing this at build time before its even deployed, and thens served statically. the benefit of SSR in this case is you can generate html with any minute variation including time-variable data which is not feasible nor possible with static generation. – Outset

This is not a satisfactory solution. Some apps cannot be easily be updated to support SSR—that can be a massive undertaking. There are other, better ways to do this. Even if it's just a React hook containing document.querySelector('meta[name=og:title]').setAttribute('content', someNewContent). – Leonard

Of course this cannot be used for ALL Apps (Although, technically, SSR could be used in any case, with different amounts of time). What better ways are there, if i may ask? I would be happy to update my answer, but to my knowledge, SSR is (still) the best way. Btw, your solution uses client side JavaScript, it will not work in Facebook, for example. – Unhelm