next.js 에서 동적게시판 SEO 처리하기 (getServerSideProps)

1) 내용소개

해당 블로그를 개발하면서 처음에는 React.js 환경으로 개발을 시작했었습니다..

하지만 기존의 React.js로 작성된 코드를 Next.js로 변경하였는데, 그 이유는 SEO(검색 엔진 최적화) 때문입니다.

React.js는 단일 페이지 애플리케이션(SPA)으로 동적 SEO 처리가 어렵습니다.

반면, Next.js는 서버 사이드 렌더링(SSR)을 지원하여 SEO에 유리합니다.

React.js 기반 코드를 Next.js로 변환하여 SEO를 최적화하는 과정을 소개합니다.

2) 작업 이유와 SEO의 필요성

SEO는 검색 엔진에서 웹페이지의 가시성을 높여 더 많은 방문자를 유도하기 때문에 매우 중요합니다.

Next.js는 SSR을 통해 각 페이지를 서버에서 렌더링할 수 있어 동적 콘텐츠의 SEO를 효과적으로 처리할 수 있습니다.

특히, 동적 게시판의 경우 DB에서 데이터를 읽어와 페이지 타이틀과 메타 태그를 동적으로 설정해야 하므로, Next.js의 SSR 기능이 매우 유용합니다.

3) Next.js에서 SEO 처리

Next.js에서는 각 페이지 파일마다 태그 설정이 가능하며, 이를 통해 동적 콘텐츠의 SEO를 손쉽게 처리할 수 있습니다.

예를 들어, 아래와 같이 각 페이지 파일에서 태그를 설정할 수 있습니다.

이렇게 설정하면 구글 검색 결과에서 해당 페이지의 타이틀과 설명이 제대로 표시됩니다.

4) 동적 게시판의 SEO 문제

동적 게시판의 경우, DB에서 제목과 내용을 읽어와야 합니다.

기존에는 useEffect를 사용하여 데이터를 가져왔으나, 구글 검색 로봇이 이를 인식하지 못했습니다.

이는 클라이언트 사이드 렌더링(CSR) 방식이기 때문에 검색 로봇이 자바스크립트 실행 결과를 제대로 읽어가지 못하기 때문입니다.

useEffect에서 search01 로 해당 게시판의 데이터를 조회 후 화면에 렌더링 작업을 해주었으나, 실제로 웹에서 확인했을 때는 정상적으로 타이틀이 변경되었지만, google 검색로봇은 해당 title을 읽지 못했습니다.

5) 해결 방법: getServerSideProps 사용

이 문제를 해결하기 위해 getServerSideProps를 사용합니다.

이 함수는 페이지 로드 시 서버에서 호출되며, 페이지 컴포넌트에 props로 데이터를 전달합니다.

이를 통해 서버 사이드에서 데이터를 가져와 렌더링함으로써 검색 엔진이 이를 제대로 인식할 수 있습니다.

4) 소스코드

위 코드에서는 Head 컴포넌트를 사용하여 동적으로 받은 데이터로 페이지 타이틀과 메타 태그를 설정합니다.

이를 통해 구글 검색 결과에서 동적으로 설정된 타이틀과 설명이 제대로 표시됩니다.

7) 결과확인

위와 같이 설정한 후, 구글 검색에서 사이트를 확인하면 동적으로 설정된 타이틀과 설명이 제대로 표시됩니다.

이를 통해 동적 게시판의 SEO 문제를 효과적으로 해결할 수 있습니다.

Next.js를 사용하면 서버 사이드 렌더링을 통해 동적 콘텐츠의 SEO를 효과적으로 처리할 수 있습니다.

getServerSideProps를 활용하여 서버에서 데이터를 미리 가져와 렌더링함으로써 검색 엔진이 이를 인식할 수 있게 합니다.

이를 통해 보다 나은 검색 엔진 최적화를 구현할 수 있습니다.

질문이 있거나 도움이 필요하면 언제든지 댓글로 남겨주세요.

감사합니다. 😊