...
301 vs 302 Redirection
리다이렉션(Redirection)은 보통 웹사이트를 새로운 도메인으로 옮겼거나 페이지의 주소가 바뀌없을때, 이용자들을 하여금 변경된 주소로 자동으로 옮겨가게 만드는데 사용된다. HTTP 프로토콜에서는 리다이렉션 HTTP 상태코드인 301 과 302 를 통해, 클라이언트를 지정된 URL로 보내도록 할수가 있다.
이중. 301 리다이렉션은 영구(permanent) 리다이렉션이라고 부르며, 302 리다이렉션은 일시(temporarily) 리다이렉션 이라고 부른다.
문제는 이 둘의 차이점이 애매하다는 것이다.
왜냐하면 실제로 둘이 동작 형태를 브라우저로 확인해보면, 둘다 자동으로 리다이렉션하는 것을 똑같으니 사람의 육안으로는 이 둘의 차이를 구별할수 없기 때문이다.
그럼 리다이렉션이면 리다이렉션이지 왜 301, 302로 구분지어 '영구' 와 '일시' 개념을 사용하는 것일까?
1. 검색 엔진 크롤링 & SEO
사실 이 둘을 구별하는 주체 대상은 사람이 아닌 검색 엔진, 검색 봇이다.
즉, 어떤 리다이렉션을 쓰느냐에 따라 검색 엔진이 크롤링 하는 페이지에 대해 페이지 수집하는 주체가 달라지는데, 이러한 특징 때문에 검색엔진 최적화나 SEO에 영향을 미치게 된다. 만일 리다이렉션을 구분치 않고 부적절하게 사용할 경우 웹페이지 랭크에 영향을 주게되며 해당 링크가 보유했던 높은 점수를 잃을 수도 있어 이 둘의 구분은 중요하다.
301 영구 리다이렉트
301 영구 리다이렉션의 경우, 말그대로 요청한 정보(사이트나 페이지)가 영구적으로 옮겨져 다시는 돌아오지 않을 것임을 말해준다.
이말은 새로운 URL로 영원히(Permanently) 이동되었으니, 검색 엔진은 기존 URL에 대한 사이트 랭크와 평가점수와 같은 모든 SEO 값과 링크 리소스를 New URL 로 이전하며, 페이지에 대한 정보도 New URL 페이지만을 수집하게 된다.
즉, www.example.com/old 사이트는 없는 사이트로 취급하며, old에 있던 모든 SEO 정보를 www.example.com/new 가 인도받으며, 앞으로의 SEO 정보 수집은 new에서도 하겠다는 것이다. (말그대로 완전히 이사를 한 것이니)
다만, New URL로 사이트 점수를 인도하는 과정에서 검색 엔진이 변경 사항을 인식하는데 시간이 걸리므로 포털 순위나 색인에 잠재적인 영향이 일어날수도 있다는 점은 유의하여야 한다.
대신에 영구 리다이렉트를 적용하면, 포털 검색에 이전 URL을 없애주고 새 URL을 표시하게 해주며, 링크 신호를 통합해주기 때문에 이전 URL의 백링크들을 새 URL를 직접 가리키는 것처럼 통합시켜 준다.
302 일시 리다이렉트
302 일시 리다이렉션의 경우, 말그대로 요청한 정보(사이트나 페이지)가 일시(임시)적으로 옮겼다는 것을 말해준다. 즉, 언제든지 이전 URL로 다시 돌아올수 있다는 말이다.
301과 대조적으로 302는 일시적으로(Temporarily) 새로운 URL로 이동했음을 나타내기 때문에, 그래서 검색 엔진은 사이트 랭크와 평가점수와 같은 모든 SEO 값과 링크 리소스를 옮기지 않고 유지하며, 컨텐츠만 New URL에서 조회하도록 한다. 그리고 리다이렉트 했음에도 여전히 Old URL 페이지에 대한 정보를 수집한다.
따라서 302 임시 리다이렉트는 기존 URL 사이트랭크나 점수는 유지하면서 새로운 컨텐츠 URL을 조회하게 할 때 유용하다. 사용자는 자동으로 옮겨가게 되지만, 크롤러는 사이트가 옮겨갔다는 것을 감지하더라도 일시적으로만 옮겨간 것으로 간주하기 때문에 검색결과에 아무런 변화를 주지 않기 때문이다.
그래서 301과는 달리 검색 포털에 등록된 링크를 갱신시키지 않는다. www.example.com/old 에서 www.example.com/old 로 리다이렉트 하였더라도 302면 Old URL을 그대로 두는 것이다.
302 일시 리다이렉트 주의점
내 서비스에 302 일시 리다이렉트를 적용하려고 할때 주의해야 할 점이 몇가지 있다.
우선 첫번째는 사이트를 영구적으로 리다이렉션 하기 위해 302를 선택하는 경우이다. 그러면 사이트 점수나 SEO 점수를 이전시키지 않기 때문에 사이트 이전이 제대로 이루어질리가 없다. 따라서 리다이렉션이 영구적이지 않고 콘텐츠를 원래 URL로 되돌릴 수 있는 경우에만 302 리디렉션을 사용해야 한다.
두번째는 302 리다이렉션을 부적절하게 사용하는 경우이다. 예를들어 검색 포털에 높은 페이지 랭크를 가진 URL을 구입해서 사용자가 접속하면 강제로 광고페이지로 이동시키는 부적절한 사례를 들 수 있다. 처음부터 마케팅하기에는 시간과 비용이 많이 드니 일종의 꼼수를 부리는 것이다. 그래서 구글은 302를 자주 사용하거나 부적절하게 사용할 경우 이를 doorway page로 여겨 기존 사이트 랭크에 페널티를 부과해버린다. 따라서 불필요한 302 방법의 페이지 이동은 피해야 한다.
2. 브라우저 캐싱 차이
301 영구 리다이렉트
301은 기본적으로 브라우저 내에서 알아서 캐싱이 된다.
즉, 처음 리다이렉트 요청 이후의 요청은 서버의 3XX 응답을 거치지 않고 바로 브라우저에서 리다이렉션 해버린다.
302 일시 리다이렉트
302도 브라우저에서 캐싱이 가능하지만 대신 Cache-control이나 Expire 헤더를 명시해주어야 한다.
그래서 만약 필요에 의해서 서버 로직을 거치고 리다이렉트를 시켜야 하는 경우는 302가 적절하다. (301은 브라우저에 캐싱되기 때문에)
301 / 302 Redirection 알맞는 사용처
위에서 살펴봤듯이, 사용자 입장에서는 둘다 똑같은 리다이렉션이지만 내부적인 SEO 차이는 크기 때문에, 언제 어디서 어떨때 301 과 302 리다이렉션을 사용해야 할지 전략을 분명이 세울 필요성이 있다.
301을 언제써야 할까?
핵심은 말 그대로 영구적인 이전 필요성이 있을때 사용하면 된다.
- 웹사이트의 도메인을 변경할 경우, 완전 영구 이동이 필요할때
- 웹 사이트에서 사용되는 URL 구조를 영구적으로 변경하려는 경우.
- 사용하지 않는 페이지를 이동시킬때
- 두 개의 웹사이트 또는 페이지를 병합할때
- 사람들이 여러 URL을 통해 사이트에 액세스를 할때
- 웹사이트를 HTTP에서 HTTPS 로 전환하는 경우
- www.example.com 또는 blog.example.com 과 같이 어떤 도메인이 기본 사이트인지 설정할 때
302를 언제써야 할까?
핵심은 이전 사이트에 대한 SEO 순위에 영향을 주지 않고 새 페이지로 임시로 옮길 필요성이 있을때 사용하면 된다.
- 페이지가 임시 점검 중일때 (일시적인 수정)
- 이전 사이트 디자인에서 새 페이지 또는 디자인에 대한 피드백을 요청하고 싶을때 (A/B 테스팅)
- en, ko, jp 과 같은 언어를 지원하는 페이지로 옮길때
- 쇼핑몰 같은 경우 제품이 품절되서, 관련 제품 사이트로 안내할때 (만일 품절된 제품을 없애고 대체품으로 변경해버릴 경우 사이트 랭킹 점수에 영향이 감)
- 주문 완료 페이지로 리다이렉션 할때 (결국 서비스 이용을 위해 이전 페이지를 다시 가져오게됨)
- 모바일 사용자를 위해 간소화된 모바일 버전 웹사이트를 제공할때
301 / 302 Redirection 방법
브라우저에서 페이지를 리다이렉트하는 방법은 여러가지이다.
대표적으로 anchor 태그로 링크로 리다이렉트하는 방법도 있고 자바스크립트로 하는 방법도 있고, 서버에서 3XX 상태 코드를 응답시켜 브라우저로 하여금 리다이렉트 하는 방법도 있다. 단, 열거한 방법중 어느 방법이 영구 리다이렉트인지 일시 리다이렉트 인지는 우리는 지금까지 구분하지 않고 사용해왔을 것이다.
서버단 - 영구 / 일시 리다이렉트
영구 리다이렉트를 하기 위해선 오로지 서버사이드 방법으로 이동하는법 밖에 없다. 다만 오해하지 말아야 할 점이 언제든지 일시 라다이렉트로도 할수 있다는 점이다.
즉, 서버에서 301 상태 코드 응답을 하면 영구 리다이렉트가 되고, 302 상태 코드 응답을 하면 일시 리다이렉트가 된다.
다음은 Spring 서버와 Node.js 서버에 대한 리다이렉트 응답 코드 예시이다.
// 영구 리다이렉트
response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY);
response.setHeader("Location", 'www.example.com/new');
// 일시 리다이렉트
RedirectView redirectView = new RedirectView('www.example.com/new');
redirectView.setStatusCode(HttpStatus.TEMPORARY_REDIRECT);// 영구 리다이렉트
response.set('location', 'www.example.com/new');
response.status(301).send()
// 일시 리다이렉트
response.set('location', 'www.example.com/new');
response.status(302).send()클라이언트단 - 일시 리다이렉트만
반면에 프론트단에서 하는 모든 리다이렉트 로직은 일시 리다이렉트로 처리된다. 즉, html의 링크 태그나 meta 태그 그리고 자바스크립트로 리다이렉션 하는 방법은 모두 일시 리다이렉트 인 것이다.
<!-- 일시 리다이렉트 -->
<a href="www.example.com/new"></a><meta http-equiv="refresh" content="0; url=www.example.com/new"/>// 일시 리다이렉트
window.open('www.example.com/new', '_self');
location.replace('www.example.com/new');정리하자면 서버단에서는 영구, 일시 리다이렉트 모두 가능하지만, 프론트단에서는 오로지 일시 리다이렉트만 할 수 있다고 보면 된다.
# 참고자료
https://www.seobility.net/en/wiki/HTTP_302
https://url.kr/bbs/board.php?bo_table=seo_info&wr_id=26&sca=%EC%A0%95%EB%B3%B4
https://stackoverflow.com/questions/13203572/url-shortener-301-redirection-understanding
https://endpointdigital.com.au/301-vs-302-redirects-what-they-are-when-to-use-them/
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.
