Fatal编程技术网
  • reactjs/
  • Reactjs Meta og标记don'；即使是facebook调试器也无法使用Next.js

Reactjs Meta og标记don'；即使是facebook调试器也无法使用Next.js

reactjs next.js

Reactjs Meta og标记don'；即使是facebook调试器也无法使用Next.js,reactjs,next.js,Reactjs,Next.js,我正在使用React+NextJS（都是最新版本）（不使用redux等） 我需要动态更改元标记的内容 当我通过chrome开发工具呈现页面并观察时，元标记被成功创建 但当我在Slack、FB等网站上提供url时，它不起作用。。 另外，Facebook OpenGraph调试器无法检查我的og标记 需要帮忙吗 这是我的密码 [id].jsx> const Main = () => { .... return ( <> <MetaSEO

我正在使用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"
          />
.......
    </>
    );
}

const Main=（）=>{
....
返回(
.......
);
}
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;

从“下一个/Head”导入Head；
常量元搜索=({
标题，关键字，描述，ogTitle，ogDescription，ogImage，ogUrl，索引
}) => (
{title}
);
导出默认元搜索引擎优化；
解决问题的努力我做到了-> -用过的NextSEO -在所有页面添加元标记
-Used getInitialProps

您需要使用
getServerSideProps
或
getStaticProps
获取数据，然后通过props将其传递给组件，以便正确呈现元标记，您可以使用
查看源代码
验证数据，而不使用
开发工具
非常感谢您的回答！我理解getServerSideProps是getInitialProps的一部分。但是getInitialProps不起作用。这可能是document.jsx或app.jsx的问题吗？你能发布
查看源代码的结果吗
当我查看源代码时什么都没有---解决了---有一些代码阻止了组件呈现（例如“return false”）