文章/答案/技术大牛

发布

社区首页 >问答首页 >元博客标签在使用Next.js甚至facebook调试器时都不起作用

问元博客标签在使用Next.js甚至facebook调试器时都不起作用
EN

Stack Overflow用户

提问于 2021-04-19 17:33:55

回答 1查看 603关注 0票数 2

我使用的是React + NextJS (两个都是最新版本)(不使用redux等)。

我需要动态更改meta标签的内容

当我渲染页面并通过chrome Dev工具观察时，Meta标签被成功创建，但当我在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;

解决I to -> -Used NextSEO -Added Meta Tags at all pages -Used getInitialProps的努力

reactjs

next.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-19 23:58:31

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67159454

复制

相似问题

问元博客标签在使用Next.js甚至facebook调试器时都不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元博客标签在使用Next.js甚至facebook调试器时都不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元博客标签在使用Next.js甚至facebook调试器时都不起作用
EN