react元标签不适用于 Facebook

IT技术 node.js reactjs npm meta-tags
2021-05-27 16:54:15

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

请找到我的组件代码,

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;
2个回答

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

在 Chrome 中,您可以使用以下命令准确查看服务器返回的内容 view-source

view-source:http://example.com

如果您使用 Netlify 进行部署,则可以在构建和部署中启用一个名为“预渲染”的设置。我启用了此设置,并在 2 分钟内解决了我的问题。我猜其他部署服务可能有类似的设置。如果没有,( http://prerender.io )[http://prerender.io] 也是一个选项。