React meta tags not working for Facebook

Question

I have clone the app https://github.com/alanbsmith/react-node-example and try to use the react-helmet. By inspecting the browser I can see the meta tags values are present but when I post the URL on Facebook and try to see the meta tag status here, https://developers.facebook.com/tools/debug/sharing/ It says The properties should be passed. Please anyone can suggest whats going wrong here.

Please find my component code,

import '../assets/stylesheets/base.scss';
import React, { Component } from 'react';
import Helmet from "react-helmet";

class App extends Component {
  render() {
    return(
        <div className="application">
            <Helmet
            htmlAttributes={{"lang": "en", "amp": undefined}} // amp takes no value
            title="My Title"
            titleTemplate="React Helmet - %s"
            defaultTitle="React Helmet Title"
            base={{"target": "_blank", "href": "http://myappname.herokuapp.com/"}}
            meta={[
                {"name": "description", "content": "Helmet application"},
                {"property": "fb:app_id", "content": "myfbid"},
                {"property": "og:title", "content": "My application title goes here."},
                {"property": "og:type", "content": "website"},
                {"property": "og:url", "content": "http://myappname.com/"},
                {"property": "og:image", "content": "https://imagename.png"},
                {"property": "og:description", "content": "Application description"},
                {"property": "og:site_name", "content": "MyAppname.com"},

            ]}
          />
          <h1>Welcome to the React helmet App, {this.props.name}!</h1>
        </div>  
    )
  }
};
export default App;

When the page loads, maybe the script hasn't been initialized yet. If you make your app Universal (or Isomorphic) then it should be there on page load. — KungWaz

Randy Randy · Accepted Answer · 2016-11-29T14:48:57

That's because Facebook's Page scraper doesn't execute javascript (unlike Google's Page Scraper, I believe). This means you need to pre-process and add the meta-tags on the server side.

In Chrome you can see exactly what your server is returning by using view-source

view-source:http://example.com

React meta tags not working for Facebook

1 Answers