2024-07-24 SEO란?

SEO란, Search Engine Optimiztion의 약자로, 검색 엔진 최적화를 의미한다.

 

구글이나 네이버와 같은 검색 엔진에서 내 웹 사이트가 상위 노출되는 것은 누구나 바랄 것이다. 그런데 검색 엔진은 내 사이트가 어떤 사이트인지 알지 못한다. 그래서 검색 엔진의 로봇이 내 사이트가 어떤 사이트인지 잘 알 수 있게 해주는 것이 중요하다.

 

검색 엔진은 크게 웹 페이지의 제목(title), 설명(description), 이미지의 alt 속성 등을 읽어서 이 사이트가 어떤 내용으로 구성되어 있는지 판단한다. 그리고 기능 상으로는 작동하지 않는 <header> 등의 시멘틱한 HTML 태그 등도 검색 엔진이 이 사이트가 어떻게 구성되었는지 판단할 수 있는 근거가 된다.

 

여기서 React.js와 Next.js의 큰 차이가 발생한다.

 

React.js는 최초 브라우저에 비어 있는 <div>를 던져 주고, 자바스크립트와 스타일 시트를 잘 버무려 번들링 한 후 웹 브라우저가 화면을 그릴 수 있도록 한다. 여기서 포인트는 최초에는 비어 있는 <div>를 던져 주기 때문에 검색 엔진이 이 사이트가 어떤 사이트인지 읽기 어렵다는 이야기다. 이것은 클라이언트 컴포넌트의 특성이기도 하다.

 

그러나 Next.js는 서버 컴포넌트의 작성도 지원하기 때문에 HTML을 미리 서버에서 렌더링하여 브라우저에 던져주기 떄문에, 검색 엔진이 이 사이트가 어떻게 구성되었는지 읽기 편하다. 따라서 검색 엔진 노출이 필요한 부분에서는 서버 컴포넌트로 작성하고, 동적 메타데이터까지 생성해주는 것이 좋다.

 

내가 SEO 최적화를 고민했던 것은 최종 프로젝트에서였다. 그 간의 프로젝트에서는 리액트 과정이었기 때문에 SEO를 고려하지 않고 작업을 했지만, Next.js로 넘어 오면서 부터는 계속해서 신경쓰면서 작업을 했다.

 

본인 뿐만 아니라 부트캠프 수강생들이 모두 비슷한 상황이었기 때문에 최종 프로젝트 이전 프로젝트에서도 서버 컴포넌트로 작성된 페이지가 거의 없었다. 기획 회의를 하면서도 SEO에 대한 논의는 하지 않았다. 이 부분을 프로젝트가 끝나고 나서 인지했다. 이유는 본인은 마이페이지를 맡았는데, 분명 페이지 자체는 "use client"를 명시하지 않았지만, 내부에서 호출하는 컴포넌트들이 전부 React 훅을 사용하는 클라이언트 컴포넌트였고, 그렇다면 이것이 서버 컴포넌트라고 할 수 있는 것인지 문득 의문이 들었다.

 

그렇게 고민을 하다가 튜터님을 찾아 뵈었는데, 이러면 결국 클라이언트 컴포넌트와 같은 기능을 한다는 피드백을 받았다. 그런데 팀에서 무한 스크롤을 구현하기로 했기 때문에 서버 컴포넌트에서 이를 구현하는 방법을 모르는 상태에서, 어떻게 해야 하는가라는 질문을 다시 드렸는데, 만약 그렇다면 페이지네이션을 해서 1페이지라도 인덱싱 할 수 있도록 하거나, 이마저도 어렵다면 무한스크롤을 포기해서라도 검색엔진의 노출을 꾀하는 방식으로 고민해보는 것이 좋다는 답을 얻게 되었다.