Question

我正在使用 Wordpress API 作为我的后端CMS，其中包含 无头反应 前端。我需要设置的最后一部分是社交Open Graph Meta标签。我正在使用NPM包 react-meta-tags ，并尝试了解如何将WP中的服务器端呈现传递给客户端组件。基于节点的服务器的docs详细信息呈现，但我无法将其转换为我的Wordpress后端。

是否有人使用WP / Headless React构建实现了OG标记？

Answer 1

您将必须通过API调用，使用来自wordpress的动态数据填充meta标签。

这是一个通过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>

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

Answer 2

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

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

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

import subprocess
subprocess.run("pytest --html=report.html --self-contained-html",shell=True)

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

2 个答案: