时间戳

首页 > 解决方案 > NextJs 通过服务器端渲染渲染 facebook 标签

javascript - NextJs 通过服务器端渲染渲染 facebook 标签

问题描述

我正在开发一个简单的 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 爬虫可以读取它？

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

标签： javascriptreactjsfacebook-graph-apinext.js

解决方案

因此，在搜索并尝试了很多事情之后，我将用户重定向到一个新页面

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添加了元标记

推荐阅读