Next Js Render facebook tags via Server side rendering 服务端渲染

Question

我正在开发一个简单的 Facebook 测验应用程序来学习 React 和 NextJs。

我面临的问题是 Facebook 标签，当我分享用户结果时它显示测验问题页面元标签因为 Facebook 爬虫在我添加新元标签之前呈现 html（元标签答案基于用户提供的数据）。如何将新描述添加到元标记中。因为描述只有在用户点击查找我的结果按钮后才可用。

我正在使用 react-share 和 NextJs Head 添加元标签

因此，如果 ShareResult 变量有数据加载结果页面，否则加载问题页面

{ShareResult ? (
  <QuizResult response={ShareResult} />
  ) : (
  <CurrentQuiz id={props.query.playquiz} />
)}

我在 CurrentQuiz 中加载要玩的测验，在 QuizResult 中我显示结果。

QuizResult 页面包含使用来自 NextJs

的 next/head 的所有元标记

<Head>
    <title>Your Results</title>
    <meta property="og:url" content="http://testurl.com" />
    <meta property="og:type" content="article" />
    <meta
      property="og:title"
      content="When Great Minds Don’t Think Alike"
    />
    <meta
      property="og:description"
      content="How much does culture influence creative thinking?"
    />
    <meta
      property="og:image"
      content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg"
    />
  </Head>

但是这个头像不是从服务器端生成的，因为每个用户的答案都取决于用户的数据。我如何添加这个 Head 以便 Facebook 爬虫可以读取它？

这是我学习服务器端渲染的第二天。

Answer 1

所以在搜索并尝试了很多东西之后，我使用

将用户重定向到一个新页面

Router.push({
            pathname: "/result/quizshare",
            query: {
              name: ShareResult.name,
              imageurl: url,
              quizid: props.query.playquiz,
            },

在下一页我从服务器端渲染得到道具

export const getServerSideProps = async ({ query }) => {
  return { props: { query } };
};
export default QuizShare;

还添加了带有 NextSeo

的元标记

Next Js Render facebook tags via Server side rendering 服务端渲染

NextJs Render facebook tags via Sever side rendering

javascript

facebook-graph-api

reactjs

next.js