-
Next.js SEO(검색엔진최적화) 전략, 필요한 이유
프론트엔드 개발 2023. 11. 1. 01:16SEO 란?
SEO (Search Engine Optimization) 검색 엔진 최적화
SEO란 사람들이 사이트에서 무언가 검색했을 때, 그 검색 결과를 상위에 노출되도록 만드는 작업입니다.
검색 결과를 확인할 때 대부분의 사람들은 1페이지 내의 결과를 클릭합니다. 검색 엔진 결과 페이지, 즉 SERP에서 높을 순위를 만드는 작업을 해야 상단 노출이 될 가능성이 높아집니다. 상단 노출이 돼야 유저 트래픽이 높아지기 때문에 SEO는 개발에 있어서 매우 중요한 작업입니다. 물론 광고를 통해 상단에 내 페이지를 띄울 수도 있습니다. 하지만, 광고라는 인식으로 신뢰도와 클릭수가 떨어집니다.
따라서 검색엔진최적화 작업으로 검색 순위를 높여 자연스럽게 트래픽을 유도하는 것이 필요합니다.
이러한 작업을 위해선 구글과 같은 검색 엔진이 어떻게 동작하는지부터 아는 것이 중요하다고 생각합니다.
SEO최적화 작업에 앞서, 검색 엔진이 어떤 방식으로 동작하는지 알아보겠습니다.
SEO가 필요한 이유
1. 검색 트래픽 증가
- 웹사이트 상위 검색 결과에 노출되면 더 많은 방문자를 유도할 수 있습니다.
2. 타깃 오디언스 도달
- 관련 키워드를 통해 관심 있는 사람들을 끌어올 수 있습니다.
3. 신뢰성 향상
- 광고가 아닌 상위 노출된 페이지는 일반적으로 신뢰성이 높다고 인식됩니다.
검색 엔진 동작 방식
검색 엔진의 동작 방식은 아래의 구성으로 이루어져 있습니다.
1. 크롤링 : 크롤러라는 자동화 프로그램을 사용해 인터넷상의 페이지로부터 텍스트, 이미지, 동영상 등을 다운로드합니다.
2. 색인 생성 : 가져온 정보를 분석하고 대규모 데이터베이스인 구글 색인에 정보를 저장합니다.
3. 검색결과 게재 : 사용자가 구글 검색하면 검색어 관련된 정보를 반환합니다.크롤링
첫 단계로 먼저 웹페이지의 존재 여부를 파악합니다.
별도의 중앙 레지스트리가 있지 않으므로 계속해서 새 페이지와 업데이트된 페이지를 검색하고 파악된 페이지를 추가하는 작업을 합니다.
이를 'URL 검색'이라고 합니다. 페이지의 URL을 발견하면 내용 확인을 위해 페이지를 방문합니다.
이때 웹페이지를 가져오는 프로그램을 Googlebot(또는 크롤러, 로봇, 봇)이라고 합니다.
색인 생성
크롤링을 통해 페이지를 가져오면, 그다음으로 구글은 내용을 파악하려고 합니다.
이 단계를 '색인 생성'이라고 합니다. 이때 페이지의 태그와 이미지, 텍스트, 동영상 등을 처리하고 분석하고 저장하는 작업을 진행합니다.
이 작업 중에 중복되는 페이지가 있는지 여부도 판단합니다.
검색결과 게재
마지막으로 사용자가 검색어를 입력하면, 색인에서 일치하는 페이지를 검색합니다.
그중 가장 품질이 높고 관련성이 크다고 판단되는 결과를 반환합니다.
Next.js와 SEO
Next.js는 SSR(서버 사이드 렌더링) 기능으로 SEO 친화적 앱을 구축하는데 유용합니다.
(그 외 최적화 기능들로 많은 개발자들이 리액트보다 Next.js를 사용하는 추세입니다.)
서버 사이드 렌더링은 말 그대로 서버에서 웹페이지를 다 그린 후 클라이언트(브라우저)로 보내는 방식입니다.
서버에서 미리 그려서 던져주기 때문에 빠른 렌더링이 가능합니다.
SEO 최적화 방법
1. 메타 태그 사용
보통 SEO 최적화 방법을 검색하면 빠지지 않고 나오는 것 중 하나가 메타 태그 사용입니다.
구글 공식문서에서도 사용을 권장하고 있습니다. 구글 검색결과에서 페이지의 스니펫으로 메타 태그를 사용할 수 있기 때문입니다.
페이지의 정체성을 나타내는 <title> 태그가 가장 대표적입니다.
제목을 작성할 때 너무 길어지지 않게 하는 게 중요합니다. 14~20자의 텍스트가 권장됩니다.
또한, 불필요한 키워드를 쓰지 않도록 해야 합니다.
<title>Next.js SEO(검색엔진최적화) 전략, 필요한 이유</title>메타 태그를 활용하면 페이지에 대한 상세한 설명을 추가할 수 있습니다.
<head> <title>Next.js SEO(검색엔진최적화) 전략, 필요한 이유</title> <meta name="description" content="SEO(검색엔진최적화)에 대한 개념과 Next.js에서의 최적화 전략은 무엇인지 알아보세요!"> </head>content에 페이지의 콘텐츠에 대한 정보를 정확하게 요약하는 것이 중요합니다.
길이의 최소, 최댓값은 없지만 작성 시 피해야 할 사항에 대해 정리해 보겠습니다.
- 페이지 내용과 관련 없는 경우
- '이것은 웹페이지입니다'와 같은 일반적인 설명을 사용하는 경우
- 키워드로만 설명을 채우는 경우
- 문서의 전체 내용을 복사하여 붙여 넣는 경우2. SEO를 위한 SSR(서버 사이드 렌더링)
서버에서 웹페이지를 다 그려서 던져주는 SSR 기능은 검색 엔진에게 완전히 렌더링 된 HTML페이지를 제공하기 때문에 SEO측면에서 가시성을 더 향상합니다.
Next.js의 기본 방식은 pre-renders입니다.
이는 페이지에서 js보다 HTML을 우선으로 미리 만드는 것을 말합니다. 그렇기 때문에 이때 생성된 HTML은
최소한의 javascript코드랑만 연결됩니다. 이후 브라우저가 로딩될 때 javascript가 상호작용하며 페이지가 렌더링 됩니다.
이 개념을 hydration이라고 합니다.3. 이미지 최적화
Next.js는 내장된 이미지 최적화 기능을 제공합니다.
크기나 파일 속성 등을 지정하여 최적화 작업을 할 수 있습니다.
4. 404 오류 페이지
사용자가 잘못된 링크로 접근하거나 URL을 잘못 입력하는 경우 존재하지 않는 페이지로 이동하게 됩니다.
이때 제대로 된 사이트로 이동할 수 있도록 안내를 해줄 수 있는 404페이지 또한 SEO관련해서 중요한 부분입니다.
Next.js를 사용하면 pages하위에 404.tsx파일 생성으로 오류페이지를 만들 수 있습니다.
5. HTML, CSS 최적화
불필요한 코드를 줄여 로딩시간을 최적화하는 것도 중요합니다.
불필요하게 들어가 있는 주석 및 코드를 삭제해야 합니다.
또한 빠른 CSS전달을 위해 Tailwind를 사용하는 것도 하나의 방법입니다.
마무리
구글의 검색시장 점유율이 나날이 증가하면서 SEO에 대한 관심도 많아지고 있습니다. 특히 개발자로서 마케팅 측면에서 접근하고 유저 트래픽 증가를 위해 어떻게 해야 할 것인가에 대해 고민하는 것도 매우 중요하다는 생각이 듭니다.
출처 : 구글 공식문서를 참고하여 작성되었습니다.
'프론트엔드 개발' 카테고리의 다른 글
웹소켓(Websocket) 개념과 동작원리에 대해 (0) 2023.10.28 Javascript 클로저(Closures) 개념 이해하기 (0) 2023.10.27 react-hook-form 총정리 & 효율적인 Form관리 (2) 2023.10.26