反应meta标签不适用于Facebook

我已经克隆应用程序https://github.com/alanbsmith/react-node-example并尝试使用react-helmet。通过检查浏览器，我可以看到元标记值存在，但是当我在Facebook上发布URL并尝试在此处看到元标记状态时，它说该属性应该被传递。请任何人都可以建议这里出了什么问题。反应meta标签不适用于Facebook

请找我的组件代码，

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;

来源

2016-11-29 iamsonivivek

页面加载，也许是剧本尚未初始化返回。如果你使你的应用程序通用（或同构），那么它应该在页面加载。 – KungWaz

这是因为Facebook的页面刮板不执行JavaScript的（不像谷歌的网页刮，我相信）。这意味着您需要在服务器端预处理并添加元标签。

在Chrome中，你可以清楚地看到你的服务器是通过使用view-source

view-source:http://example.com

来源

2016-11-29 14:48:57 Randy

我已经在使用服务器端渲染使用react-helmet，但仍面临同样的问题。请看看这个问题：https：//github.com/nfl/react-helmet/issues/247 –

反应meta标签不适用于Facebook

回答

相关问题