React에서 다국어 라우팅과 SEO 처리 방법

개요

다국어 사이트는 라우팅과 SEO가 맞물려야 검색 엔진 결과와 사용자 경험이 모두 좋아진다. React를 기준으로 라우트 설계, URL 구조, 메타 태그와 서버 렌더링 전략을 한데 엮어 설명한다. 초보자도 이해할 수 있게 원칙과 구현 예시를 제시한다.

핵심 개념

언어별 URL 전략

• 경로 프리픽스: example.com/ko/, example.com/en/ 형태로 가장 흔함.
• 서브도메인: ko.example.com, en.example.com — 도메인 관리가 필요.
• 쿼리 파라미터: example.com?lang=ko — 간단하나 SEO와 캐싱에 불리.

SEO 요소

• hreflang: 검색 엔진에게 언어/지역 매핑을 알림.
• canonical: 중복 콘텐츠 방지.
• 서버 사이드 렌더링(SSR) 또는 정적 생성(SSG): 메타가 크롤러에 노출되도록 함.

라우팅 구현 전략

React 자체는 라우팅을 제공하지 않는다. 주로 React Router나 Next.js를 선택한다. 각 도구 특징과 i18n 라우트 처리 방법을 비교한다.

React Router 사용 시

경로 프리픽스를 사용하는 방식이 직관적이다. 라우트 그룹을 언어 단위로 묶고, URL에서 언어를 파싱해 로케일을 설정한다.

const routes = [
  { path: '/:lang(en|ko)/', component: Home },
  { path: '/:lang(en|ko)/about', component: About },
];

// 언어 추출 예시
const lang = params.lang || 'en';

위 예시는 가독성을 위해 간단화했다. 실제로는 라우트 보호, 리다이렉트, 언어 저장(localStorage, cookie) 로직을 추가한다.

Next.js 사용 시

Next.js는 내장 i18n 라우팅을 제공해 설정만으로 언어별 경로를 처리할 수 있다. 또한 SSG/SSR을 쉽게 적용해 SEO에 유리하다.

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'ko'],
    defaultLocale: 'en',
  },
};

SEO 적용 실무

hreflang 태그 설정

각 페이지에는 해당 언어 버전들을 명시하는 링크 태그를 추가해야 한다. 클라이언트 렌더링만으로는 크롤러가 인식하지 못할 수 있으므로 SSR이나 HTML 템플릿에 포함시키는 것이 안전하다.

<link rel="alternate" href="https://example.com/en/page" hreflang="en" />
<link rel="alternate" href="https://example.com/ko/page" hreflang="ko" />
<link rel="alternate" href="https://example.com/page" hreflang="x-default" />

canonical 태그

동일 콘텐츠가 여러 URL에 존재하면 canonical을 통해 대표 URL을 지정한다. 언어별로 별도 콘텐츠라면 각 언어 페이지의 canonical을 해당 언어 URL로 설정한다.

<link rel="canonical" href="https://example.com/ko/page" />

SSR, SSG, CSR 선택 기준

검색 엔진 인덱싱과 초기 페이지 로딩 속도를 고려해 선택한다.

• SSR: 동적 콘텐츠나 사용자별 맞춤이 필요할 때 유리.
• SSG: 정적 페이지가 많고 빌드 시점에 생성 가능한 경우 최고 성능.
• CSR: 초기 로드 후 사용자 인터랙션 중심인 앱에 적합하나 SEO 보완 필요.

추가 고려사항

• 언어 감지: Accept-Language, IP, 또는 사용자 선택 우선순위 설정.
• 언어 전환 시 리다이렉트 정책: SEO 손실을 피하기 위해 301/302 결정.
• 메타 번역 품질: 기계 번역만 의존하면 검색 품질 저하 가능성.
• 사이트맵: 각 언어별 URL을 포함한 사이트맵 제출.

실제 흐름 예시

사용자가 example.com 접속 시 언어 감지 후 /ko/ 또는 /en/으로 리다이렉트한다. 각 페이지는 서버에서 렌더링되어 메타와 hreflang이 포함된 HTML을 반환한다. 검색 엔진은 hreflang을 통해 언어 매핑을 학습하고 색인한다.

결론

react 다국어 라우팅 설계는 URL 전략, 서버 렌더링 방식, 메타 태그 구성이 핵심이다. seo 다국어 사이트 react 요구를 충족하려면 hreflang과 canonical을 정확히 설정하고 SSR/SSG를 적절히 선택해야 한다. i18n 라우트 처리에서 일관된 URL 규칙과 언어 우선순위를 적용하면 검색 성능과 사용자 경험을 동시에 개선할 수 있다.