웹공부

Next.js 튜토리얼 따라하기 - 4 (SEO)

syom 2022. 4. 17. 11:08

SEO가 왜 그렇게 중요한가?

SEO는 브랜드에 대한 전환율과 자신감을 높이기 위한 키이다. 더 높은 검색순위 배치는 더 많은 방문자로 연결된다. 검색엔진 유기적 트래픽(검색 엔진에서 사이트를 방문하는 방문자)은 다음과 같은 세가지 이유로 많은 비즈니스의 핵심이다.

  1. 정성적 - 방문자가 고객으로 전환될 가능성이 높다
  2. 신뢰할 수 있는 - 브랜드에 대한 더 높은 신뢰도
  3. 저비용 - 소요된 시간과 노력을 제외하고 검색 엔진 순위를 높이는 좋은 SEO 관행을 무료로 할 수 있다.
  4. 상위 자연 검색 결과 위치에 표시되는데 직접적인 비용이 없다.

** SEM(검색 엔진 마케팅)과는 다름

웹사이트 최적화 프로세스

  1. 기술 - 크롤링 및 웹 성능을 위해 웹사이트를 최적화
  2. 생성 - 특정 키워드를 대상으로 하는 콘텐츠 전략을 만든다
  3. 인기도 - 검색 엔진이 신뢰할 수 있는 출처임을 알 수 있도록 온라인에서 사이트의 인지도를 높인다. 이는 귀하의 사이트로 다시 연결되는 제 3자 사이트인 백링크를 사용하여 수행된다.

검색 시스템

일반적으로 구글, 빙, 덕덕고 등을 말한다.

검색 세스템에는 네가지 주요 책임이 있다.

1. 크롤링

웹을 탐색하고 모든 웹 사이트의 콘텐츠를 구문 분석하는 프로세스를 말함.

3억 5천만개 이상의 도메인을 사용할 수 있음

2. 인덱싱

액세스할 수 있도록 크롤링 단계에서 수집된 모든 데이터를 저장할 장소를 찾는다.

3. 렌더링

사이트의 기능을 향상하고 콘텐츠를 풍부하게 할 수 있는 JavaScript 와 같은 페이지의 모든 리소스를 실행한다. 이 프로세스는 크롤링이 되는 모든 페이지에 대해 발생하지 않으며, 때로는 콘텐츠가 실제로 인덱싱되기 전에 발생한다. 해당 시점에 작업을 수 행하는데 사용 가능한 리소스가 없는 경우 인덱싱 후에 렌더링이 발생할 수 있다.

4. 순위

사용자 입력을 기반으로 관련 결과 페이지를 만들기 위해 데이터를 쿼리한다. 여기에서 다양한 순위 기준이 검색 엔진에 적용되어 사용자에게 의도를 달성하기 위한 최상의 답변을 제공한다.

웹크롤러

Googlebot 의 작동방식

  1. URL 찾기
    • 구글은 Google Search Console 이나 웹사이트 간 링크 또는 사이트맵을 비롯한 여러 위치에서 URL 을 제공한다.
  2. 크롤링 대기열에 추가
    • 이전과정에서 찾은 URL 은 Googlebot 이 처리할 수 있도록 크롤링 대기열에 추가된다. 크롤링 대기열의 URL은 일반적으로 몇 초 동안 지속되지만 경우에 따라(특히 페이지를 렌더링하거나 색인을 생성하거나 URL 이 이미 색인이 생성된 경우나 새로 고쳐야하는 경우) 최대 며칠이 소요될 수 있다. 그런다음 페이지는 렌더링 대기열에 들어간다
  3. HTTP 요청
    • 크롤러는 헤더를 가져오기 위해 HTTP 요청을 하고 반환된 상태 코드에 따라 작동한다
      • 200 : HTML 을 크롤링하고 구문을 분석한다
      • 30X : 리디렉션을 따른다
      • 40X : 오류를 기록하고 HTML을 로드하지 않는다
      • 50X : 상태 코드가 변경되었는지 확인하기 위해 나중에 다시 올 수 있다.
  4. 렌더링 대기열
    • 검색 시스템의 다양한 서비스 및 구성 요소가 HTML을 처리하고 콘텐츠를 구문 분석한다. 페이지에 JavaScript 클라이언트 측 기반 콘텐츠가 있는 경우 URL이 렌더링 대기열에 추가될 수 있다. Render Queue 는 JavaScript 를 렌더링하는 데 더 많은 리소스를 사용해야 하기 때문에 Google 에 더 많은 비용이 들게 된다. 따라서 렌더링된 URL은 인터넷의 전체 페이지에 비해 적은 비율이다. 일부 다른 검색 엔진은 Google 과 동일한 렌더링 용량을 갖고 있지 않을 수 있다. 여기서 Next.js 가 렌더링 전략에 도움이 될 수 있다
  5. 인덱싱 준비 완료
    • 모든 기준이 충족되면 페이지가 인덱싱되고 검색 결과에 표시될 수 있다.

추가 읽기

상태코드

https://nextjs.org/learn/seo/crawling-and-indexing/status-codes