reactjsseofacebook-opengraphmeta-tags

Open graph meta tags and SEO in a React SPA

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?
Solution

  • 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.