'Next JS SEO content not being picked up by search engines [closed]

I'm using Next v10.2.0. When I check my devtools, I can see my page title, descriptions etc in my code, but search engines seem not to be picking them up. I have Google Tag Manager, MailChimp and some other 3rd party scripts running on my website. Could they be making the content in my section invisible to the search engines. Please help out if you've experienced anything like this, or have a solution.

My _document.js file:

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head>
          {/* Google Tag Manager Script */}
          <script
            defer
            dangerouslySetInnerHTML={{
              __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-${process.env.NEXT_PUBLIC_GTM_KEY}');`,
            }}
          ></script> 

          <meta name="facebook-domain-verification" content="xxxxxxxxxxxxxxxxx" /> 
          <meta httpEquiv='Content-Type' content='text/html; charset=utf-8' />
          <meta name='theme-color' content={theme.palette.primary.main} />
          <link
            rel='stylesheet'
            href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
          />

          <script
            defer
            type='text/javascript'
            dangerouslySetInnerHTML={{ __html: process.env.rawJsFromFile }}
          ></script> 
        </Head>
        <body>
          <Main />
          <NextScript />
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-${process.env.NEXT_PUBLIC_GTM_KEY}"
              height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
            }}
          ></noscript>
        </body>
      </Html>
    )
  }
}

MyDocument.getInitialProps = async ctx => {
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />),
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  }
}

My Homepage:

import React from 'react'
import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>
            Page title here
        </title>
        <meta
          name='description'
          content='page description here'
        />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <div>
          Page Content
      </div>
    </div>
  )
}

next.js seo

Solution 1:^[1]

I don't think this should be a problem, try disabling javascript on your browser and make sure you are still seing the title and meta tags. also consider using google search console to debug SEO related isssues

Solution 2:^[2]

Try using next/head like this:

import Head from 'next/head'

function HeadPage() {
  return (
    <div>
      <Head>
        <title>HTML Title of page</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta name="facebook-domain-verification" content="xxxxxxxxxxxxxxxxx" /> 
      </Head>
      <p>Hello website visitors!</p>
    </div>
  )
}

export default IndexPage

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ilias Aboubeker
Solution 2	Trey Copeland

'Next JS SEO content not being picked up by search engines [closed]

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]