META tags in Next.js React App are not readable by BrowseSEO

I got a site that built with Next.js framework. As to optimise the SEO, I added Unique <Meta/> tags in <Head/> component from Next/Head on each pages (index.tsx, titles/[title].tsx). However, when testing with crawling site like BrowseSEO, the Meta tags specified on each pages was not readable. Title also been displayed wrong.

Here is link to the site page in browseSEO: Eating Animal Page

Here is the snippet from pages/titles/[title].tsx file

const Title: NextPage<{ content: Content; }> = ({
  content,
}) => {
  const {title, titlePath, desc} = content
  return (
    <>
      <Head>
        <link rel="canonical" href={`https://www.iwonder.com${titlePath}`} />
        <title>{`Watch ${title} Streaming Online | iwonder`}</title>
        <meta key="description" name="description" content={desc} />
      </Head>
      ...
    </>
  )
}


export const getServerSideProps = async ({ req }: GetServerSidePropsContext) => {
  const { url = '' } = req
  const thePath = uri.parse(url).pathname
  const id = thePath.substring(thePath.lastIndexOf('/')
  const { content } = await getSingleTitle(id)  //fetch for content data
  return { props: { content } }
}

export default Title

It would be if anyone could help to highlight what is wrong. Thanks!

These meta tags are present on a page in DevTools but not present in the page source. So these particular meta tags are added on a client-side. You don't see them in browseSEO because it seems it's not executing JS when analyzing pages.

I assume that page and desc variables depend on the page parameter [title] parsed by Next.js router. next/router is a client-side router, so the code dependent on it can be executed only on a client-side. That is why these meta tags are added on a client side.

If you need dynamic meta tags to be present at page source at first response you'd have to pre-render it. You can use getStaticProps to render at build time or getServerSideProps to render at request time.

Recommended topics

Hot tags