Réagissez méta tags ne fonctionne pas pour Facebook

Question

J'ai cloné l'application https://github.com/alanbsmith/react-node-example et essayer d'utiliser le react-helmet. En inspectant le navigateur, je peux voir les valeurs des balises meta sont présents, mais quand je publie l'URL sur Facebook et essayez de voir l'état de la balise méta ici, https://developers.facebook.com/tools/debug/sharing/ Il est dit que les propriétés doivent être transmises. S'il vous plaît, n'importe qui peut suggérer ce qui ne va pas ici.

S'il vous plaît trouver mon code composant,

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; 

Answer 1

C'est parce que la page Facebook de scrapper n'exécute pas javascript (je crois à la différence de la page Scrapper de Google,). Cela signifie que vous devez pré-traiter et ajouter les méta-tags côté serveur.

Dans Chrome, vous pouvez voir exactement ce que votre serveur est de retour en utilisant view-source

view-source:http://example.com