Question 22523 in SEO Question posted in
Some basic information to get you started with this can be found here.

Next JS SEO content not being picked up by search engines

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>
  )
}
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search