Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Dynamic meta tags in server side rendered React app – Facebook api

I have a React application with server side rendering. I now have to implement Facebook/Google+ share dialog with og:title and og:image being set dynamically to values returned from the API.

I’m using react-helmet to set my default meta tags, however I have troubles making it work dynamically.

I tried using redux-async-connect to prefetch the result, which resulted in meta tags being rendered (I can see them when I look at the source code), however both Facebook and Google+ ignore them.

Do any of you have experience with making this work?

Tags:

2

Answers


  1. 0

    You can render the app inside document like this:
    render(<App/>, document)
    while App containing all the html you need.

    Login or Signup to reply.
  2. 0

    Essentially, in your public/index.html file you want to replace the metadata with an identifiable string:

    <!-- in public/index.html -->
<title>$OG_TITLE</title>
<meta name="description"        content="$OG_DESCRIPTION" />
<meta property="og:title"       content="$OG_TITLE" />
<meta property="og:description" content="$OG_DESCRIPTION" />
<meta property="og:image"       content="$OG_IMAGE" />

    And then on the server, you want to replace these strings with the dynamically generated information. Here is an example route with Node and Express:

    app.get('/about', function(request, response) {
  console.log('About page visited!');
  const filePath = path.resolve(__dirname, './build', 'index.html')
  fs.readFile(filePath, 'utf8', function (err,data) {
    if (err) {
      return console.log(err);
    }
    data = data.replace(/$OG_TITLE/g, 'About Page');
    data = data.replace(/$OG_DESCRIPTION/g, "About page description");
    result = data.replace(/$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png');
    response.send(result);
  });
});

    Taken from this tutorial here: https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search