反應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

回答

相關問題