Dynamically insert og:meta tags from backend

Before reading the article, I came to the same conclusion as the author of the linked article. Social media sites gather og:meta tags by reading the HTML directly using simple HTTP GET requests. It is very, very unlikely that this og:meta parser is executing the JavaScript on your site (and waiting for it to finish rendering) so any client-side approach (e.g. using react-helmet) is bound to fail.

It simply isn't possible to generate og:meta tags without sever-side rendering. The article you link confirms this--they use Express, a server framework, to render og:meta tags.

However, what I interpret your post as asking is a way to insert og:meta tags via the backend while still serving up a React SPA to users. That's totally possible and the article lays out a great framework you can replicate in PHP.

I assume your PHP backend has some code that is serving up your React SPA. The most straightforward solution is to simply modify that code to also return og:meta tags in the <head> based on what route was requested. It's that simple. You can use simple string replacement to insert the tags, although a PHP HTML templating engine would be more professional and maintainable (the linked article uses a templating engine as well).

Based on the article, you can also clean this solution up by modifying the router to:

• Differentiate normal (human using a browser) requests vs. social media bot requests
• Return an HTML page with your normal React SPA code for browsers
• Return a barebones HTML page with og:meta tags for bots

This way your browser users don't get useless meta tags in their <head> and social media crawlers don't get useless <script> and <style> tags.

(Personally, since I'm lazy, I would serve up the same HTML to bots and users alike. I think the article's solution is clean but also a bit overkill.)

You can use the react-helmet library to add elements into the head tag.

To install it:

npm i react-helmet // using NPM, or
yarn add react-helmet // using Yarn, or
pnpm i react-helmet // using PNpm

To use it, add this in the JSX of each page:

<Helmet>
  <meta property="og:title" content="..." />
  {/* more tags here */}
</Helmet>

Hope this solution is what you're looking for.