[Google Search Console] 리디렉션 오류

이번에 Angular를 사용해서 Github에 개인 블로그(https://hiperz.github.io)를 만들면서 그동안 SEO(Search Engine Optimization)에 대한 지식이 전무한 상태였기 때문에 여러 문제점들을 마주하게 되었습니다. 그 중에 하나가 바로 구글 서치 콘솔에 특정 url에 대한 인덱싱을 요청했으나 리디렉션 오류로 반려된 케이스 입니다.

처음에는 이게 무슨 말인지 이해를 못해서 그냥 놔뒀는데, 계속 해결이 되고있지 않아서 자세히 알아보기를 클릭해보니 아래와 같이 안내 문구를 확인 할 수 있었습니다.

저 문구에 Lighthouse로 리디렉션에 관해 알아보라고 해서 Lighthouse를 눌러봤습니다.

그동안 모르고 지나쳤던 크롬 브라우저의 개발자 도구 기능중에 하나였었네요. 크롬 브라우저에서 F12를 눌러 개발자 도구 패널을 열어서 Lighthouse 탭을 선택하고 페이지 로드 분석 버튼을 누르면 자동으로 분석해서 결과를 알려주기 때문에 자세한 Lighthouse 도구 사용법은 설명을 생략하도록 하겠습니다.

제 크롬 브라우저로 리디렉션 오류가 발생한 실제 페이지에 들어가서 Lighthouse로 페이지 분석을 해보니 리디렉션 오류에 대해 알려주었는데, 이 문제의 주요 원인은 angular 앱을 github에서 호스팅 하다보니 특정 url 이동시 github 서버는 url 끝에 슬래시(/)를 항상 붙인 경로를 넘겨주는데 이걸 Angular router가 trailing shash가 있는 URL은 slash를 제거한 URL로 리다이렉션 시키는것이 원인이었습니다.

해결방법 (Angular 19 기준)

1. custom-url-serializer.ts 파일 생성.

아무곳에나 아래 코드로 custom-url-serializer.ts 파일을 생성합니다.

import { UrlTree, DefaultUrlSerializer } from '@angular/router';

export class CustomUrlSerializer extends DefaultUrlSerializer {
  override serialize(urlTree: UrlTree): string {
    return this.appendTrailingSlash(super.serialize(urlTree));
  }

  private appendTrailingSlash(url: string): string {
    const splitOn = url.indexOf('?') > -1 ? '?' : '#';
    const pathArr = url.split(splitOn);

    if (!pathArr[0].endsWith('/')) {
      let fileName: string = url.substring(url.lastIndexOf('/') + 1);
      if (fileName.indexOf('.') === -1) {
        pathArr[0] += '/';
      }
    }

    return pathArr.join(splitOn);
  }
}

[코드 출처] : https://github.com/angular/angular/issues/16051#issuecomment-575346573

2. app.config.ts 수정

...
import { CustomUrlSerializer } from './ts-libs/custom-url-serializer';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer },
    ...
  ],
};

이렇게 CustomUrlSerializer를 적용하면 URL 끝에 항상 슬래시(/)가 붙어서 나오며 리다이렉션 때문에 같은 페이지를 두 번 로딩하는 문제가 사라지게 됩니다.

추가적으로 URL 처리할 때 끝에 붙는 슬래시를 제거해주는 함수를 Angular에서 제공합니다.

import { Location } from '@angular/common';

export class BlaBlaComponent implements OnInit {
  constructor(
    private router: Router,
  ) {
  
  ...
  const url = Location.stripTrailingSlash(this.router.url);
  ...
  
  }
}

Github에서 Angular SPA로 웹앱을 호스팅 하시는 분들 중 리다이렉션 문제를 겪고 계신분들에게 도움이 되었기를 바랍니다.

해결방법 (Angular 19 기준)

1. custom-url-serializer.ts 파일 생성.

2. app.config.ts 수정

티스토리툴바