Nuxt 에서 redirect 를 이용한 SEO 최적화 방법

SEO 모니터링 중에 Naver 진단에서 <title> 요소에 동일한 제목인 웹문서 다수 발견 라는 이슈가 발생하였다.

무슨 일인지 확인해보니 하나의 페이지에 여러 url 이 만들어지는 문제가 발생한 것이다.

원인을 분석해보니, 페이지의 url 을 동적으로 만들 때 몇가지 정보를 혼합하는데, 여기서 네이버가 seo 봇을 이용해서

랜덤하게 url 을 넣다가 해당 정보들에 매칭되는 url 이 몇가지 나오기 시작해보임.

이것의 근본적인 문제는 url 을 동적으로 만들어주는데 만들기만 할 뿐 거기에 대한 검증을 제대로 하지 못한 것이었다.

예를 들어, 아래의 url이 달라보이지만 실제로는 의미론적으로는 같은 url 인 경우가 발생하여 봇이 인식하는 경우가 발생한 것이다.

 

예시)

/detail/abcd1234

/detail/zxcv1234

 

구글에서는 발생하지 않았는데, 네이버에서 seo 봇 패치 후 발생하는 것 처럼 보인다.

이러한 경우에 해당 url 을 고유한 url 로 강제 패치하게 되면 등록된 seo 에 많은 문제가 발생할 수 있기 때문에 redirect 를

이용해서 SEO 를 최적화 해보자.

Nuxt 에서 Redirect 방법

nuxt 에서 자주 쓰는 방법으로 middleware, asyncData 에서 redirect 치는 방법이 있다.

1. middleware 폴더 아래에 loginCheck.js 를 만들어서 아래와 같이 셋팅하면 해당 조건에 따라 페이지 이동시에 리다이렉트가 될 것이다.

    if (isLogin) {
      return redirect(`/detail/abcd1234`)
    }

2. asyncData 에서 사용하는 방법이다. 특정 페이지 들어올시 asyncData 에서 해당 조건을 보고 redirect 을 해준다.

  asyncData({ redirect }) {
  	redirect('/detail/abcd1234')
  }

이제 여기서 http code 를 넣고 싶은 경우, redirect(301, '/detail/abcd1234') 으로 날려주면 된다.

 

302 redirect 를 걸어줌.

301, 302 차이점

SEO 최적화를 위해서는 301, 302 상태코드를 알고 있어야한다.

이 상태코드를 SEO 봇에서 넘겨주면서, SEO 에게 어떤 상태인지 알려준다.

 

301: 영구적으로 페이지 이동을 알려주며, 다시 돌아오지 못하기 때문에 신중하게 해주어야 한다. 리다이렉션 전에 old 정보를 리다이렉션 시키는 new 로 완전히 넘기는 작업인 것이다.

302: 일시적 리다이렉션으로 요청한 페이지가 임시적으로 이동했다 라고 말해주는 것이고, 언제든지 이전 url 로 돌아올 수 있다. 이전 url 로 돌아올 수 있기 때문에 old 의 정보를 완전히 넘겨주지는 않는다.

 

302 로 날리는 경우, 우리가 원하는 해결방법을 제공하지 못할 가능성이 크다. 왜냐하면, 사이트 이전이 완벽하게 일어나지 않을 가능성이 높기 때문이다.

그렇기 때문에 301 은 url 구조를 영구적으로 변경, 사용하지 않는 페이지 변경 등의 경우 사용하고 302 는 임시 점검의 경우에 사용한다고 보면 된다.

 

참고: 표준, RFC 2616에 따르면 location 값은 단일 절대 URI로 구성되어야 한다고 한다. 상대 경로가 아닌, 절대경로로 지정해주는 것 잊지 말자. redirect(301, '경로/detail/abcd1234')