元 og 标记在使用 Next.js 甚至 facebook 调试器时都不起作用答案

【问题标题】：Meta og tags don't work using Next.js even facebook debugger元 og 标记在使用 Next.js 甚至 facebook 调试器时都不起作用
【发布时间】：2021-07-13 12:00:23
【问题描述】：

我正在使用 React + NextJS（都是最新版本）（不使用 redux 等。）

我需要动态更改元标记的内容

当我通过chrome开发工具渲染页面并观察时，元标签创建成功但是当我在 Slack、FB 等上提供 url 时它不起作用.. Facebook OpenGraph 调试器也无法检查我的 og 标签

需要帮助

这是我的代码

[id].jsx >

  const Main = () => {
....

    return (
    <>
        <MetaSEO
            title={response.data.seo ? response.data.seo['page-title'] : SEOSheet.seo.title}
            keywords={response.data.seo ? response.data.seo.keywords : SEOSheet.seo.keywords}
            description={response.data.seo ? response.data.seo.description : SEOSheet.seo.description}
            ogType={SEOSheet.seo['sns-type']}
            ogTitle={response.data.seo ? response.data.seo['sns-title'] : SEOSheet.seo['sns-title']}
            ogDescription={response.data.seo ? response.data.seo['sns-description'] : SEOSheet.seo['sns-description']}
            ogImage={SEOSheet.seo['sns-image']}
            ogUrl={SEOSheet.seo['sns-url']}
            indexing="all"
          />
.......
    </>
    );
}

MetaSEO.jsx >

    import Head from 'next/head';

const MetaSEO = ({
  title, keywords, description, ogTitle, ogDescription, ogImage, ogUrl, indexing
}) => (
  <Head>
    <title>{title}</title>
    <meta name="keywords" content={keywords} />
    <meta name="description" content={description} />
    <meta property="og:type" content="website" />
    <meta property="og:title" content={ogTitle} />
    <meta property="og:description" content={ogDescription} />
    <meta property="og:image" content={ogImage} />
    <meta property="og:url" content={ogUrl} />
    <meta name="robots" content={indexing} />
  </Head>
);

export default MetaSEO;

我所做的努力解决 -> - 使用 NextSEO - 在所有页面添加元标签 - 使用 getInitialProps

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

您需要使用getServerSideProps 或getStaticProps 获取数据，然后通过道具将其传递给组件以正确呈现元标记，您可以使用View Source 验证它而不使用Dev Tools。

【讨论】：

非常感谢您的回答！我了解 getServerSideProps 是 getInitialProps 的一部分。但是 getInitialProps 没有用。会不会是document.jsx或app.jsx的问题？
你能把View Source的结果贴出来
查看源码时什么都没有---已解决---有部分代码阻塞了组件渲染（如'return false'）