SEO 개선 with 구글 애널리틱스

https://www.parkgaini.com/

parkgain

 

위 사이트의 검색엔진 최적화를 위해 next-seo라는 Nextjs의 라이브러리를 설치해서 layout.jsx 파일에 아래와 같은 코드를 추가했다.

 <NextSeo
      title="parkgain portfolio"
      description="frontend developer parkgain portfolio"
      noindex={true}
      useAppDir={true}
    />

 

또한 SEO를 개선하여 사용자가 더 많아지기를 기대하며 구체적으로 측정할 수 있도록 구글 애널리틱스에 내 웹사이트를 등록했다.

 

 

Nextjs 사이트를 구글ga에 등록하기 위해서 구글애널리틱스에서 제공하는 코드( head태그 바로 아래에 추가하라고 나오는 코드)를 내 웹사이트에 추가해야한다.

 

 

import Script from 'next/script'

 

Nextjs에 Script태그를 추가하기 위해서는 위와 같이 임포트시켜주어야한다.  공식문서를 참고하였다.

 <Script src="https://www.googletagmanager.com/gtag/js?id=아이디값"/>
      <Script id="google-analytics">  
      {`
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '값');
      `
      }
      </Script>

구글ga로 측정하고자하는 페이지에 이렇게 코드를 작성하면 된다 

 

 

하지만! 위의 내가 만든 사이트의 경우 useEffect등을 사용해서 서버 사이드 렌더링을 하지 못하고 "use client"를

 

컴포넌트 상단에 넣어서 클라이언트 사이드 렌더링을 할 수 밖에 없었다 ㅠㅠ

 

따라서 SEO 최적화를 하는데 한계가 있었다