Blog Importer는 블로그 게시물을 마이그레이션할 때 Shopify의 기본 301 리디렉션을 자동으로 등록합니다. 이를 통해 복잡한 수동 구성 없이 이전 사이트에서 새 Shopify 스토어로 검색 엔진 순위(SEO)를 원활하게 이전할 수 있습니다.

하지만 Shopify의 기본 기능으로 처리할 수 없는 특정 URL 패턴이 있습니다.

지원되지 않는 패턴: 쿼리 매개변수가 있는 URL

Shopify의 표준 리디렉션 기능에는 구조적인 한계가 있습니다. 바로 ’?’(쿼리 매개변수)가 포함된 URL을 정확하게 식별할 수 없다는 것입니다.

  • 지원되는 예시: example.com/old-post
  • 지원되는 예시 (2단계 이상의 매개변수): example.com/news/?pid=123
  • 지원되지 않는 예시: example.com/?pid=123 (루트 도메인 바로 아래에 있는 매개변수화된 URL)

이러한 유형의 URL은 Blog Importer나 Shopify의 기본 리디렉션 설정을 사용하여 리디렉션할 수 없습니다.

해결 방법

이러한 기존 URL 구조를 가진 페이지를 성공적으로 마이그레이션하려면 클라이언트 측 JavaScript를 사용하여 브라우저에서 방문자를 올바른 페이지로 수동 라우팅해야 합니다.

JavaScript가 필요한 이유

Shopify의 기본 리디렉션은 서버 측에서 처리됩니다. 시스템적으로 Shopify는 URL에서 ’?’ 뒤에 오는 모든 정보를 삭제하므로 매개변수 차이에 따라 트래픽을 조건부로 라우팅할 수 없습니다.

이 문제를 해결하려면 ‘스마트 라우팅’이 필요합니다. JavaScript는 방문자의 브라우저에서 페이지가 로드되는 즉시 전체 URL을 읽고 올바른 대상 위치로 동적으로 리디렉션합니다.

JavaScript를 통한 구현 방법 (샘플 코드)

다음 코드를 Shopify 테마의 theme.liquid 파일 내 닫는 </head> 태그 바로 앞에 배치하세요. 이전 URL 매개변수 및 해당하는 새 경로와 일치하도록 redirectMap 변수를 업데이트하세요.

<script>
(function() {
  // 리디렉션 맵: 이전 URL 매개변수를 새 경로로 매핑
  var redirectMap = {
    "?pid=123": "/blogs/news/article-a",
    "?pid=456": "/blogs/news/article-b",
    "?p=789": "/pages/contact"
  };

  var currentQuery = window.location.search;

  if (currentQuery && redirectMap[currentQuery]) {
    window.location.href = redirectMap[currentQuery];
  }
})();
</script>