Nextjs 元标记在开发中工作，而不是在生产中工作

Question

我有两种类型的页面，是的，静态的和动态的。他们的两个链接预览都在开发中。我已经使用 localhost open graph checker 进行了测试，然后也在 twitter 和 facebook 共享调试器中进行了测试

在生产中 facebook 调试器显示这个

推特卡验证器显示了这个

测试编号-https://openlinks.vercel.app/jayantnavrange95

这是静态页面：

 <>
      <NextSeo
        title="FAQ - OpenLinks - Just Another Link in Bio tool"
        description="Get your answers for some common and most asked questions at OpenLinks."
        additionalMetaTags={[
          {
            name: "keywords",
            content:
              "OpenLinks faq,OpenLinks questions,OpenLinks common questions",
          },
          {
            name: "author",
            content: "Jayant Navrange",
          },
        ]}
        openGraph={{
          url: "https://openlinks.vercel.app/faq",
          title: "FAQ - OpenLinks",
          type: "website",
          description:
            "Get your answers for some common and most asked questions at OpenLinks.",
          images: [
            {
              url: "https://openlinks.vercel.app/favicon-310.png",
              width: 200,
              height: 200,
              alt: "Website Logo",
            },
          ],
          siteName: "OpenLinks",
        }}
        twitter={{
          cardType: "summary",
        }}
      />

这是动态页面：

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import Image from "next/image";
import styles from "../styles/Profile.module.css";
import { getIcon } from "../helpers/util";
import { isValid } from "../helpers/isValid";
import { NextSeo } from "next-seo";
import { JSDOM } from "jsdom";
import DOMPurify from "dompurify";
import Link from "next/link";
import {
  EmailShareButton,
  FacebookShareButton,
  LinkedinShareButton,
  RedditShareButton,
  TelegramShareButton,
  TwitterShareButton,
  WhatsappShareButton,
} from "react-share";
import {
  EmailIcon,
  FacebookIcon,
  LinkedinIcon,
  RedditIcon,
  TelegramIcon,
  TwitterIcon,
  WhatsappIcon,
} from "react-share";
import toast, { Toaster } from "react-hot-toast";
import { Spotify } from "react-spotify-embed";
const youtubeEmbed = require("youtube-embed");
let cnt = 0;

const shareOnSM = (urlToShare) => {
  toast(
    (t) => (
      <div>
        <h5>Share on</h5>
        <hr />
        <EmailShareButton url={urlToShare}>
          <EmailIcon size={25} round />
        </EmailShareButton>
        &nbsp;
        <LinkedinShareButton url={urlToShare}>
          <LinkedinIcon size={25} round />
        </LinkedinShareButton>
        &nbsp;
        <TwitterShareButton url={urlToShare}>
          <TwitterIcon size={25} round />
        </TwitterShareButton>
        &nbsp;
        <FacebookShareButton url={urlToShare}>
          <FacebookIcon size={25} round />
        </FacebookShareButton>
        &nbsp;
        <RedditShareButton url={urlToShare}>
          <RedditIcon size={25} round />
        </RedditShareButton>
        &nbsp;
        <WhatsappShareButton url={urlToShare}>
          <WhatsappIcon size={25} round />
        </WhatsappShareButton>
        &nbsp;
        <TelegramShareButton url={urlToShare}>
          <TelegramIcon size={25} round />
        </TelegramShareButton>
        <hr />
        <div className="float-end">
          <button
            type="button"
            className="btn btn-outline-primary"
            onClick={() => toast.dismiss(t.id)}
          >
            Cancel
          </button>
        </div>
      </div>
    ),
    {
      position: "bottom-right",
    }
  );
};

export default function SingleData({
  id,
  idAwake,
  last_login,
  dname,
  fname,
  dp,
  location,
  summary,
  url,
  pronoun,
  type,
  wdata,
  dpayd,
  bpayd,
  miscdata,
}) {
  const convertTime = () => {
    let d = new Date(last_login);
    return d.toLocaleTimeString();
  };

  const createMarkup = (cl) => {
    return { __html: cl };
  };

  return (
    <>
      <NextSeo
        title={
          dname === id
            ? `${dname} at OpenLinks`
            : `${id} not found at OpenLinks`
        }
        description={`${
          dname === id
            ? `This is the profile of ` +
              dname +
              ` find every link by this author at OpenLinks`
            : dname + " The profile of this user not exists at OpenLinks"
        }`}
        additionalMetaTags={[
          {
            name: "keywords",
            content: `${dname} profile, ${dname} openlinks`,
          },
          {
            name: "author",
            content: "Jayant Navrange",
          },
          {
            name: "twitter:title",
            content:
              dname === id
                ? `${dname} at OpenLinks`
                : `${id} not found at OpenLinks`,
          },
          {
            name: "twitter:description",
            content: `${
              dname === id
                ? `This is the profile of ` +
                  dname +
                  ` find every link by this author at OpenLinks`
                : dname + " The profile of this user not exists at OpenLinks"
            }`,
          },
          {
            name: "twitter:image",
            content: dp,
          },
        ]}
        openGraph={{
          url: `https://openlinks.vercel.app/${dname}`,
          title: `${dname === id ? dname : `${id} not found`} at OpenLinks`,
          type: "website",
          description: `${
            dname === id
              ? `This is the profile of ` +
                dname +
                ` find every link by this author at OpenLinks`
              : dname + " The profile of this user not exists at OpenLinks"
          }`,
          images: [
            {
              url: dp,
              width: 300,
              height: 157,
              alt: `Image of user ${dname}`,
            },
            {
              url: dp,
              width: 800,
              height: 600,
              alt: `Image of user ${dname}`,
            },
            {
              url: dp,
              width: 900,
              height: 800,
              alt: `Image of user ${dname}`,
            },
            {
              url: dp,
              width: 200,
              height: 200,
              alt: `Image of user ${dname}`,
            },
            { url: dp },
          ],
          siteName: "OpenLinks",
        }}
        twitter={{
          cardType: "summary",
        }}
      />
      --Other contents--
    </>
  );
}

export async function getServerSideProps(context) {
  const { params } = context;
  const { id } = params;

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_FIREBASE_DATABASEURL}/users/${id}/.json`
  );
  const data = await response.json();
  const window = new JSDOM("").window;
  const purify = DOMPurify(window);
  const summary = purify.sanitize(data && data.summary);
  const dname = data && data.dname;
  const fname = data && data.fname;
  const pronoun = data && data.pronoun;
  const location = data && data.location;
  const type = data && data.type;
  const url = data && data.url;
  const last_login = data && data.last_login;
  const dp = data && data.dp;
  const idAwake = data && data.emailVer;

  const web = await fetch(
    `${process.env.NEXT_PUBLIC_FIREBASE_DATABASEURL}/users/${id}/websites.json`
  );
  const wdata = await web.json();
  const dpay = await fetch(
    `${process.env.NEXT_PUBLIC_FIREBASE_DATABASEURL}/users/${id}/digitalPay.json`
  );
  const dpayd = await dpay.json();
  const bpay = await fetch(
    `${process.env.NEXT_PUBLIC_FIREBASE_DATABASEURL}/users/${id}/bankPay.json`
  );
  const bpayd = await bpay.json();

  const misc = await fetch(
    `${process.env.NEXT_PUBLIC_FIREBASE_DATABASEURL}/users/${id}/miscData.json`
  );
  const miscdata = await misc.json();
  return {
    props: {
      id,
      idAwake,
      fname,
      dname,
      dp,
      location,
      type,
      url,
      pronoun,
      summary,
      last_login,
      wdata,
      dpayd,
      bpayd,
      miscdata,
    },
  };
}

我已经搜索并尝试了一切。