해당 문서는 Next.js의 동작 원리를 심도있게 이해하고자 작성된 공식문서 번역 문서입니다. 원문의 의미를 최대한 반영하는 동시에 자연스럽게 이해할 수 있는 방향으로 번역하고자 노력하였습니다. 오역이 있을 수 있으니 확인 부탁드리며 피드백 주시면 반영하도록 하겠습니다.
원문주소:
https://nextjs.org/learn/seo/introduction-to-seo
SEO가 무엇일까?
SEO는 검색 엔진 최적화(Search Engine Optimization)를 뜻합니다. 검색 엔진 최적화의 목적은 어플리케이션에 대한 검색 엔진 검색 결과 순위를 올리는 것입니다. 검색 결과 상위에 노출 될수록 해당 사이트(어플리케이션)에 대한 오가닉 트래픽이 더 많아집니다. (오가닉 트래픽이란? 리퍼럴 사이트와 같은 채널을 통해 유도되는 트래픽을 제외하고 검색 엔진을 통해 곧바로 유입되거나 동일한 도메인 안에서 유입되는 트래픽을 말한다.)이는 결국 더 큰 비지니스 가치로 이어집니다.
이 챕터를 통해 배우게될 내용들
- Googlebot과 같은 검색 시스템과 검색 엔진 로봇
- 검색 엔진 최적화(SEO) 전략이 어플리케이션 끼치는 영향
- 통합적인 검색 엔진 최적화에 대한 모범 사례
- Next.js에서의 크롤링, 인덱싱, 렌더링 및 랭킹
- Core Web Vitals과 같은 웹 성능 지표들
대화에 참여하세요
이 챕터 또는 Next.js와 관련된 어떤 것이든지 질문이 있다면 디스코드 채널 커뮤니티에 참여하세요.
그러면 시작하겠습니다!
왜 그렇게 SEO가 중요할까?
검색 엔진 최적화(SEO)는 기업 브랜드의 전환율과 신뢰성을 향상시키는 핵심 요소 입니다. 상위 검색 결과에 노출된다는 것은 오가닉 방문자가 더 많다는 것을 의미합니다. 검색 엔진 오가닉 트래픽(검색 엔진에 직접 검색해서 방문하는 경우를 뜻하는 용어)은 다음 세가지의 이유로 많은 비지니스 기업에 있어 핵심 요소가 됩니다.
- 질적 측면 - 방문자가 고객으로 전환될 확률이 높아집니다.
- 신뢰성 측면 - 브랜드 또는 기업 가치에 대한 신뢰도가 높아집니다.
- 저렴한 비용 - 투입 되는 시간과 노력을 제외하면, 좋은 검색 엔진 최적화 전략을 통해 상위 검색 엔진 결과에 노출되는 것은 무료입니다. 상위 결과에 노출 되는 것에 직접적인 비용이 들지 않습니다.
검색 엔진 최적화(SEO)는 검색 엔진 마케팅(SEM)과는 다른 개념입니다. 검색 결과 상단에 있는 콘텐츠가 100% 유료이며, "스폰서링크" 라벨을 통해 오가닉 검색 결과와 구분되는 검색 엔진 마케팅(SEM)과는 달리, SEO는 오가닉 검색 결과(스폰서링크 등과 같은 광고를 통해 나오는 결과가 아닌 직접 검색 등을 통해 나오는 결과를 뜻하는 용어)에 대한 최적화를 의미합니다.
최적화를 이루는 세가지 기둥
웹사이트 최적화 과정은 크게 3가지 요소로 나눌 수 있습니다.
- 기술적 요소 - 크롤링 및 웹 성능을 위해 웹사이트를 최적화합니다.
- 콘텐츠 제작 - 특정 키워드를 타겟팅하는 콘텐츠 전략을 수립합니다.
- 인기도 - 검색 엔진이 신뢰하는 출처임을 알리기 위해 온라인에서 사이트의 존재감을 높입니다. 이는 타사 사이트에서 걸어주는 백링크를 활용합니다.
검색 시스템(Search Systems)
검색 시스템(Search Systems)은 일반적으로 검색 엔진Google, Bing, DuckDuckGo 등)이라 여겨지는 것입니다. 검색 시스템은 엄청나게 복잡한 시스템을 갖고 있고 기술의 역사상 가장 어려운 도전의 일부를 처리합니다.
검색 시스템은 네 가지 주요 책임이 있습니다.
- 크롤링(Crawling) - 모든 웹사이트의 컨텐츠를 분석하고 웹을 훑어보는 과정입니다. 크롤링은 수 많은 작업을 필요로 하며 현재 3억 5천만 개 이상의 도메인이 존재합니다.
- 인덱싱(Indexing) - 크롤링 과정을 통해 수집한 모든 데이터를 저장할 장소를 찾아 해당 데이터에 접근(access)할 수 있도록 하는 과정입니다.
- 렌더링(Rendering) - JavaScript와 같은 페이지의 모든 리소스를 실행하여 웹 사이트의 컨텐츠를 좀 더 풍부하게 만들고 기능을 향상시키는 과정입니다. 크롤링한 모든 페이지에서 해당 과정이 일어나지는 않고 가끔은 해당 페이지가 실제로 인덱싱되기 전에 렌더링이 발생하기도 합니다. 해당 작업을 수행하는데 필요한 리소스가 없는 경우 인덱싱 이후에 발생할 수 있습니다.
- 랭킹(Ranking) - 사용자 입력을 기반으로 관련 결과 페이지를 만들기 위해 데이터를 쿼리(요청)합니다. 이 과정은 검색 엔진 별로 다른 순위 기준이 적용되는 과정이며, 사용자의 의도를 만족시키는 최상의 답변을 제공하기 위해 필요한 과정 입니다.
다음 챕터에서 좀 더 구체적으로 어떻게 구글봇이 작동하는지 알아보겠습니다. 구글봇은 구글 인터넷 크롤러로, 검색 결과를 제공하기 위한 방대한 양의 데이터 베이스를 구축하는데 필요한 모든 정보를 모으는 검색 시스템의 일부입니다.
웹 크롤러는 무엇일까?
여러분의 사이트가 검색 결과에 나타나기 위해서는, 구글과 같은 다른 검색 엔진인 빙, 얀덱스, 바이두, 네이버, 야후, 덕덕고 등에서 웹 크롤러를 사용하여 웹사이트를 탐색하여 여러분의 웹페이지를 찾습니다.
각 나라에서 각각의 검색 엔진들은 시장 점유율이 다릅니다.
이 가이드를 통해 대부분의 나라에서 가장 큰 검색 엔진인 구글을 다루고 있습니다. 그러나 여러분이 중국, 러시아, 일본과 대한민국 고객을 대상으로 한다면 다른 검색 엔진 가이드라인을 따르는 것이 좋습니다.
랭킹과 렌더링에 차이가 있긴 하지만, 대부분의 검색 엔진은 크롤링과 인덱싱에서 매우 유사한 방식으로 작동합니다.
웹 크롤러는 사용자를 모방하고 웹사이트에서 발견된 링크를 탐색하여 페이지를 색인화(indexing)하는 유형의 봇입니다. 웹 크롤러는 사용자 에이전트를 사용하여 자신을 식별합니다. 구글은 여러 웹 크롤러를 보유하고 있지만, 가장 자주 사용되는 것은 Googlebot Desktop과 Googlebot Smartphone입니다.
Googlebot은 어떻게 동작하는가?
대략적인 과정은 다음과 같습니다:
- URL 찾기: 구글은 다양한 곳에서 URL을 가져옵니다. 이는 Google Search Console, 웹사이트 간의 링크, XML 사이트맵 등을 포함합니다.
- 크롤 대기열(큐)에 추가: 이러한 URL은 Googlebot이 처리하도록 크롤 대기열에 추가됩니다. 크롤 대기열에 있는 URL은 일반적으로 몇 초 동안 유지되지만, 렌더링, 인덱싱 또는 URL이 이미 색인화된 경우 갱신이 필요한 경우에는 몇 일 동안 유지될 수 있습니다. 그 후 페이지는 렌더 대기열(큐)에 들어가게 됩니다.
- HTTP 요청하기: 크롤러는 헤더를 가져 오기 위해 HTTP 요청을 수행하고 응답 받은 코드에 따라 행동합니다.
- 200 - 크롤러는 HTML을 크롤링하고 파싱(구문 분석)합니다.
- 30x - 크롤러는 리디렉션을 따릅니다.
- 40x - 크롤러는 에러를 알리고 HTML을 로드하지 않습니다.
- 50x - 나중에 다시 상태 코드가 변경되었는지 확인할 수 있습니다.
- 렌더 대기열(큐): 검색 시스템의 다양한 서비스와 구성 요소는 HTML을 처리하고 콘텐츠를 구문 분석합니다. 페이지에 JavaScript 클라이언트 측 기반 콘텐츠가있는 경우 URL이 렌더 대기열에 추가될 수 있습니다. 렌더 대기열은 Google에게 더 많은 자원을 사용해야 하므로 JavaScript를 렌더링하는 데 더 많은 비용이 듭니다. 따라서 렌더링 된 URL은 인터넷에 전체 페이지 중 작은 비율을 차지합니다. 다른 일부 검색 엔진은 Google과 동일한 렌더링 용량을 갖지 않을 수 있으며, 이는 Next.js가 렌더링 전략을 지원하는 데 도움이 될 수 있습니다.
- 인덱싱 준비 완료: 모든 조건이 충족되면 페이지는 색인화(indexing) 대상이 되어 검색 결과에 표시될 수 있습니다.
다음 몇 개의 챕터에서 검색 시스템 프로세스의 주요 구성 요소인 크롤링 및 인덱싱, 렌더링 및 랭킹에 대해 자세히 살펴보겠습니다.
'FRONTEND' 카테고리의 다른 글
| [Next] 공식문서 읽어보기 Learn - SEARCH ENGINE OPTIMIZATION - Crawling and Indexing (0) | 2023.05.26 |
|---|---|
| [Next] 공식문서 읽어보기 Learn - How Next.js Works - part.2 (0) | 2023.04.23 |
| [Next] 공식문서 읽어보기 Learn - How Next.js Works - part.1 (0) | 2023.04.21 |
| [Next] config 파일 및 폴더 (0) | 2023.04.10 |
| [Storybook] Storybook에 대해서 (0) | 2023.03.30 |
