WIL 21 ( Weeked I Learned ) - 23/07/30

용스·2023년 7월 30일

Google Search Console 에러

회사 랜딩 페이지를 배포 후 Google Search Console에서

새로운 페이지 색인 생성 문제가 감지됨

에러가 발생했다.

무슨 일인지 확인해보니 페이지를 redirection 해주는데 문제가 발생했다는 것이 아닌가

회사의 /xxxx/A 페이지는 개발 예정이라 일단 /xxxx/B라는 URL로 redirect를 해주었다.

랜딩 페이지는 NextJS로 정적 주소가 생성되었을껀데 왜지?

색인 생성 문제로 열심히 검색을 해도..

티스토리의 redirection 문제가 대부분이었다.

구글 Search Console 고객 센터의 문서에도 이렇게만 되어 있을 뿐..

일단 redirection 문제라고 했으니

redirection 코드가 어떻게 되어 있는지 살펴보았다.

/* next.config.js */

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/xxxx/A",
        destination: "/xxxx/B",
        permanent: false,
      },
    ];
  },
}

/xxxx/A를 입력했을 때, /xxxx/B로 이동하도록 하였다.

코드 상은 문제가 없다.

permanent? 무슨 옵션인지 NextJS 공식 문서에서 확인해보자

permanettrue 이면 308 상태 코드를, false이면 307 상태 코드를 반환한다고 한다.

실제 어떤지 확인해보자

실제 배포된 사이트에도 307이다.

Temporary Redirect 라니 벌써 머리가 아파온다

30x status code

30x 의 상태 코드들은 대부분 redirection과 관계 깊은 코드라고 한다.

Wikipidia

여기서 살펴볼 상태 코드는 301, 302, 307, 308 이다.

이 4가지 코드는 다시 두 분류로 나눌 수 있는데 바로 Temporary RedirectPermanent Redirecct 이다.

Temporary redirect? Permanent redirect?

Temporary redirect ( 302, 307 status code )

말 그대로 임시, 일시적으로 redirect를 해준다고 한다.

임시, 일시적으로 redirect를 해준다는 게 무슨 의미일까?

요청한 정보(사이트나 페이지)가 일시(임시)적으로 옮겼다는 것을 의미하며, 언제든지 이전 URL로 다시 돌아올수 있다는 의미

와 한글도 무슨 내용인지 모르겠다.

그림으로 보자

저기 로봇처럼 생긴 녀석은 구글 크롤러이다.

redirect 가 발생했지만 사이트 랭크와 평가점수와 같은 모든 SEO 값과 링크 리소스를 옮기지 않고 유지하며, 컨텐츠만 New URL에서 조회하도록 한다. 그리고 리다이렉트 했음에도 여전히 Old URL 페이지에 대한 정보를 수집한다.

Permanent redirect ( 301, 308 status code )

영구적으로 redirect를 해주는 것을 말한다.

요청한 정보(사이트나 페이지)가 영구적으로 옮겨져 다시는 돌아오지 않음

역시 그림으로 확인해보자

새로운 URL로 영원히(Permanently) 이동되었으니, 검색 엔진은 기존 URL에 대한 사이트 랭크와 평가점수와 같은 모든 SEO 값과 링크 리소스를 New URL 로 이전하며, 페이지에 대한 정보도 New URL 페이지만을 수집하게 된다.

그럼 의미적인 정리는 끝났다.

그렇다면 왜 301, 302, 307, 308 을 나눠두는걸까?

한가지만 비교하면 나머지는 동일하기 때문에 301308만 비교해보자

301 VS 308

301308은 네트워크 요청을 할때 한 Method 로만 요청하는지, Method가 변경될 수 있는지에 대한 차이다.

  • 301 상태 코드의 경우 네트워크 요청이 GET → POST, POST → GET으로 변경이 가능
  • 308 상태 코드의 경우 네트워크 요청이 GET → GET, POST → POST로 일관성이 유지됨

이 정도로만 이해하고 넘어갔다.

어질어질..

그래서?

내가 세운 가설은 이러하다.
1. 구글 크롤러가 사이트를 크롤링한다.
2. /xxxx/A/xxxx/B로 Temporary redirect 하는 것을 알고 있다.
3. 하지만 Temporary redirect는 /xxxx/A 페이지 정보만 수집힌다.
4. /xxxx/A는 개발이 되지 않은 페이지 이기 때문에 크롤링을 할 수 없다.
5. 색인 실패

결론

permanent를 일단 true로 변경하고 구글 크롤링이 끝날 때까지 기다려보자..

참고

Google Search Console - 페이지 색인 생성 보고서

mdn web dosc - HTTP 상태 코드

Inpa Dev 블로그 - 301 VS 302 상태 코드 차이점

Inpa Dev 블로그 - 3XX Redirection 상태 코드 제대로 알아보기

Domain.com - What is a redirect?

rockcontent.com - 301 vs 302 Redirect: Which is Better for SEO?

NextJS 공식 사이트

How to property redirect a page

profile
일단 해보자

1개의 댓글

comment-user-thumbnail
2023년 7월 30일

이런 유용한 정보를 나눠주셔서 감사합니다.

답글 달기