CODEWITHSUNDEEP
reactjsnext.js
Minseo Lee
Minseo Lee

Reputation: 195

Meta og tags don't work using Next.js even facebook debugger

I am using React + NextJS (both latest version) (not using redux etc. .)

I need to change meta tags' contents dynamically

When I render page and observe through chrome Dev tools, Meta Tags are created successfully But It does not work when I provide url on Slack, FB etc .. Also Facebook OpenGraph debugger cannot check my og tags

Need some help

Here's my code

[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;

Efforts to solve I did -> -Used NextSEO -Added Meta Tags at all pages -Used getInitialProps

Upvotes: 3

Views: 3724

Answers (2)

Minseo Lee
Minseo Lee

Reputation: 195

--- solved --- there was some codes that blocks component rendering (such as 'return false')

Upvotes: 0

gomflo
gomflo

Reputation: 171

You need to get the data using getServerSideProps or getStaticProps then pass it via props to the component in order to render meta tags correctly, you can verify it using View Source and not using Dev Tools.

Upvotes: 2

Related Questions