使用 Wordpress API 服务器渲染的 react-meta-tags答案

【问题标题】：react-meta-tags with Wordpress API server rendering使用 Wordpress API 服务器渲染的 react-meta-tags
【发布时间】：2018-06-28 02:03:16
【问题描述】：

我使用 Wordpress API 作为带有 headless React 前端的后端 CMS。我需要设置的最后一块是社交 Open Graph Meta 标签。我正在使用 NPM 包 react-meta-tags 并试图了解如何将 WP 中的服务器端渲染传递给客户端组件。 docs 详细介绍了基于节点的服务器渲染，但我无法将其翻译到我的 Wordpress 后端。

有没有人使用 WP/Headless React 构建实现 OG 标签？

【问题讨论】：

标签： wordpress reactjs facebook-opengraph wp-api

【解决方案1】：

您必须通过 API 调用使用 wordpress 中的动态数据填充元标记。

这是一个通过 slug 获取特定帖子的示例（其他数据的概念也相同）：

componentDidMount() {
  fetch(`YOUR_WP_DOMAIN/wp-json/wp/v2/posts?slug=YOUR_POST_SLUG&_embed`)
  .then(response => {
    return response.json();
  })
  .then(data => {
    this.setState({post: data[0]});
  })
  .catch(function(e) {
    console.log(e);
  });
}

此时，您可以使用刚刚获取的数据填充所需的任何元标记：

<MetaTags>
  <title>{this.state.post.title.rendered}</title>
  <meta property="og:title" content={this.state.post.title.rendered} />
  <meta property="og:image" content={post._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url} />
</MetaTags>

希望这会有所帮助。编码愉快！

【讨论】：

【解决方案2】：

您好，这里是使用 Yoast SEO 和插件 WP REST Yoast Meta 和 React Helmet 的示例

当有人在 wordpress 后端填写表单时，它会动态设置 Meta 内容

我想我会回答这个问题，因为我在这个主题上停留了很长一段时间，我正在使用 axios 来获取 API 数据。

{Object.keys(home).length ? (


        <Helmet>


        <title>{home.yoast_meta[4].content}</title>

        <meta name={home.yoast_meta[0].name} content={home.yoast_meta[0].content} />
        <meta property={home.yoast_meta[2].property} content={home.yoast_meta[2].content} />
        <meta property={home.yoast_meta[3].property} content={home.yoast_meta[3].content} />
        <meta property={home.yoast_meta[4].property} content={home.yoast_meta[4].content} />
        <meta property={home.yoast_meta[5].property} content={home.yoast_meta[5].content} />
        <meta property={home.yoast_meta[8].property} content={home.yoast_meta[8].content} />
        <meta property={home.yoast_meta[9].property} content={home.yoast_meta[9].content} />
        <meta property={home.yoast_meta[10].property} content={home.yoast_meta[10].content} />




       </Helmet>

      ) : ""}

【讨论】：