들어가며

이번에 다국어 작업을 진행하게 되면서, 다국어에 대해 이해하고 적용한 내용과 다국어 작업 시 가장 중요한 요소인 SEO에 대해서 공부한 내용을 기록해보았습니다.

1. 국제화란

애플리케이션에서 말하는 다국어 작업이란, 여러 언어에 맞춰서 UI를 보여주는 작업을 말하며 보통 i18n이라고 부릅니다.
i18n이란 internationalization 인 국제화에서 맨 앞 i와 맨 뒤의 n을 빼면 나머지 18개가 되는데 이걸 줄여서 i18n이라고 부릅니다.

2. Next.js에서 다국어 라이브러리 비교

Next.js는 v10.0.0부터 국제화 라우팅(i18n routing)을 기본 지원합니다.
i18n Routing은 클라이언트의 브라우저 언어를 감지해 적절한 locale로 리디렉션하는 역할을 하며, 라우팅 구조(/ko, /en)만을 관리하고 텍스트 번역은 포함되지 않습니다. 즉, 번역 기능 자체는 제공하지 않기 때문에 외부 라이브러리를 함께 사용해야 합니다.

2-1. i18next

오래된 라이브러리로 react, angular, vue, node, deno 등 여러 플랫폼을 지원하며 오래된 역사만큼 다운로드 수도 높으며 커뮤니티도 활발하다는 장점이 있습니다.
범용적으로 사용되고 있기 때문에 npm trends에서도 가장 높은 순위를 차지합니다

하지만 Next.js의 서버 컴포넌트인 App Router를 지원한다는 내용을 찾아볼 수 없었으며 App Router를 지원하기 위해서는 i18next와 react-i18next를 조합하여 사용하는 방식이 있다는 것을 next-i18next github에서 찾아볼 수 있었습니다. (관련 링크)

2-2. next-i18next

Next.js를 사용한다면 많이 사용하는 next-i18next 라이브러리입니다. 하지만 위에 적은 내용과 마찬가지로 App Router를 지원하지 않는다는 단점이 있습니다.

2-3. next-intl

next-intl은 Next.js 전용 국제화 라이브러리로 App Router를 지원합니다.
저는 Next.js 14 버전을 사용하며 App Router를 사용하기 때문에 next-intl 을 선택했습니다.
next-intl은 공식 문서도 굉장히 잘 되어있고 쉽게 튜토리얼을 따라 할 수 있기 때문에 App Router를 사용하시는 분들이라면 공식 문서의 튜토리얼만 따라 해도 금방 적용시킬 수 있습니다.
npm trends를 보면 App Router를 지원하기 때문에 최근에는 next-intl이 더 자주 사용되는 추세입니다.

설치 방법 및 message 설정은 공식 문서에 잘 되어있기 때문에 생략하며, 간단하게 클라이언트 컴포넌트와 서버 컴포넌트에서 사용 할 때의 예제만 살펴보겠습니다. (next-intl 공식 문서)

클라이언트 컴포넌트에서 사용

import {useTranslations} from 'next-intl';
 
export default function HomePage() {
  const t = useTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}

클라이언트 컴포넌트에서는 useTranslations 훅을 통해 간편하게 사용할 수 있습니다.

서버 컴포넌트에서 사용

import {getTranslations} from 'next-intl/server';
 
export default async function ProfilePage() {
  const user = await fetchUser();
  const t = await getTranslations('ProfilePage');
 
  return (
    <PageLayout title={t('title', {username: user.name})}>
      <UserDetails user={user} />
    </PageLayout>
  );
}

서버 컴포넌트에서는 getTranslations 를 통해서 사용할 수 있습니다.

3. 다국어와 SEO 전략

다국어 SEO전략은, 단순히 번역된 콘텐츠를 보여주는 것을 넘어서 글로벌 사용자에게 정확한 언어와 지역 맞춤 콘텐츠를 보여주고, 검색엔진이 이를 올바르게 색인하도록 도와주는 것입니다.
이 전략은 검색 노출, 사용자 경험, 전환율, 국가별 마케팅 전략에 직접적인 영향을 미치기 때문에 매우 중요한 작업입니다.
한국어로만 콘텐츠를 작성한다면, 미국에 사는 유저나 일본에 사는 유저의 검색 결과에 노출될 가능성이 거의 없습니다.

다국어 SEO 전략을 잘 사용했다고 가정하고 네덜란드와 스웨덴에서 “아디다스 웹사이트”를 검색했을때 google의 검색 결과를 살펴보면, 두 국가의 사용자에게는 서로 다른 결과가 표시되며 그 중에서도 자신에게 가장 적합한 현지화된 버전의 아디다스 공식 홈페이지가 표시됩니다.

이러한 검색 결과는 사용자가 적절한 버전의 콘텐츠에 도달하도록 하는 기술적인 작업이며, 사용자 경험을 향상시키며 전환율도 높이는 중요한 작업입니다.

또한, 다국어 작업을 진행할 때 가장 신경써야 하는 작업은 중복 콘텐츠입니다.
모든 중복 콘텐츠가 불이익을 받는 것은 아니지만, 여러 URL에 표시되는 콘텐츠는 순위가 낮아지거나 색인 삭제와 같은 불이익을 받을 수 있습니다.

예를들어 원본페이지는 www.example.com , 영어 버전은 www.example.com/en, 프랑스 버전은 www.example.com/fr 등 locale 기반 URL 설계가 필요합니다.
이 외에도 hreflang, canonical, meta태그, sitemap 설정 등의 추가 작업이 필요합니다.
즉, next-intl로 단순히 다국어 작업을 해주는 것 뿐만 아니라 다양한 설정 작업이 필요합니다.

4. hreflang 태그

hreflang 태그는 특정 페이지가 어떤 언어 및 지역을 대상으로 하는지를 검색 엔진에게 알려주는 역할입니다.

이를 통해 동일하거나 비슷한 콘텐츠가 여러 언어로 존재할 때, 검색 결과에서 사용자가가 자신의 언어와 위치에 가장 관련성이 높은 사이트 버전으로 이동하게 해줍니다.

위에서 네덜란드와 스웨덴에서 아디다스 웹사이트를 검색했을 때의 구글 검색 결과를 살펴본 것처럼 hreflang 태그는 눈에 보이지 않지만 실제로 작동합니다. (눈에 보이지 않아서 제대로 잘 설정된 건지 확인하는게 어렵습니다..ㅠ)

4-1 Hreflang 태그가 중요한 이유

hreflang 태그가 중요한 이유로는 첫번째로는 검색엔진에 페이지의 현지화 버전을 알리는 것이며 두번째는 중복 콘텐츠 문제를 방지하기 위함입니다.

1. 검색엔진에게 현지화 버전 알리기

만약 웹사이트가 한국어, 영어, 일본어, 스페인어로 된 콘텐츠를 제공한다면 Google과 같은 검색엔진은 미국 또는 스페인 사용자에게 어떤 콘텐츠를 제공해야하는지 판단하기 어렵습니다.
hreflang 태그를 사용하면 웹페이지의 언어와 지역 타겟을 지정하여, 검색 엔진이 사용자의 위치 또는 언어 선호도에 따라 가장 적합한 버전을 표시하도록 하며 이를 통해 사용자 경험을 향상시키고 이탈률을 줄이게 되어 브랜드 신뢰도를 높여주는 중요한 요소입니다.

2. 중복 콘텐츠 문제 방지

만약 hreflang 태그를 제대로 사용하지 않고 여러 페이지에서 동일한 콘텐츠가 여러 언어로 게재된다면 검색 엔진은 이를 중복 콘텐츠로 인식할 수 있습니다.
이러한 결과는 검색엔진이 쿼리 결과에서 어떤 버전의 콘텐츠를 순위에 올려야 할지 판단하지 못해 SEO에 악영향을 미칠 수 있습니다.
hreflang 태그는 검색엔진이 해당 콘텐츠가 중복 콘텐츠가 아니라 여러 언어로 된 동일한 콘텐츠임을 인식하도록 하여 모든 페이지가 적절하게 색인되도록 합니다.

4-2. hreflang 태그 설정

hteflang 태그는 헤더 섹션에 삽입하거나 사이트맵을 통해 제출하거나 http 헤더에 구현하는 방법이 있습니다.
next.js를 사용할때는 head 부분에 아래처럼 사용하시면 됩니다.

<!-- 한국어 사용자용 -->
<link rel="alternate" hreflang="ko" href="https://example.com/ko/" />
<!-- 한국 지역 타겟 (한국어) -->
<link rel="alternate" hreflang="ko-KR" href="https://example.com/ko/" />

hreflang="ko" 로 설정하면 지역 상관없이 한국어 사용자에게 노출됩니다.
즉, 일본에 거주하는 한국인이나 미국에서 한국어로 검색한 사용자 또는 구글 설정 언어가 한국어로 되어있는 사용자에게 노출됩니다.
hreflang="ko-KR” 로 설정하면 지역 타겟팅이 되어서 대한민국 거주자이면서 한국어 사용자에게만 정확히 노출되기 때문에 좀 더 정말한 설정이 가능합니다.

이러한 전체 프로세스는 쉬워보이지만 초보자인 저는 진행할 때 생각보다 복잡하다고 느꼈는데, Google의 자체 SEO 전문가도 아래처럼 말했습니다

솔직히(honestly) hreflang은 SEO에서 가장 복잡한 요소 중 하나야 (아니, 어쩌면 가장 복잡한 요소일 수도 있어).
메타 태그처럼 간단해 보이지만, 금방 진짜 어려워져.

4-3. href 디버깅

hreflang 태그를 사용할 때 주의점은, 잘못 사용한다면 검색엔진이 사용자에게 잘못된 언어 또는 지역 페이지를 표시하게 됩니다.

예를들어 영국 기반 웹사이트가 의도치 않게 프랑스어 검색 결과에서 상위에 노출되면 사용자 경험 저하 및 매출 손실로 이어질 수 있기 때문에 주의가 필요합니다.
hreflang 구현을 확인하기 위해 다음과 같은 디버깅용 툴을 사용할 수 있습니다

• Hreflang Checker
• https://technicalseo.com/tools/hreflang/

5. canonical 태그

canonical 태그란 이 페이지의 대표 URL이 무엇인지 검색엔진에게 알려주는 메타태그입니다.

캐노니컬 태그를 사용하는 이유는 중복 콘텐츠를 방지하고, SEO 점수를 원본 페이지에 집중시키며 가장 신뢰할 수 있는 URL을 색인하게 도와줍니다.

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

만약 위처럼 설정했다면 어떤 방식으로 이 페이지에 접근했든 상관없이 Google에는 https://example.com/ko/product/123이 원본 페이지임을 알려줌으로 SEO점수를 원본 페이지에게 집중시킵니다.

5-1. canonical과 hreflang의 차이점

다국어 페이지를 작업할때는 canonical 와 hreflang는 함께 사용해야 하는데 각각의 특징은 다음과 같습니다.

• canonical : 해당 페이지의 대표 URL이 무엇인지 검색엔진에게 알려준다.
• hreflang : 각 언어 버전이 서로 다르다는걸 검색엔진에게 알려준다.

<link rel="canonical" href="https://example.com/ko/product/123" />
<link rel="alternate" hreflang="ko" href="https://example.com/ko/product/123" />
<link rel="alternate" hreflang="en" href="https://example.com/en/product/123" />

이렇게 설정했다면 검색엔진에게

“이 페이지는 한국어 버전이며, 대표 URL은 https://example.com/ko/product/123 이기 때문에 이 페이지의 SEO 점수는 여기로 주고, hreflang="ko” 는 한국어 사용자용 콘텐츠이고 영어 사용자에게는 https://example.com/en/product/123 콘텐츠를 보여줘”

라고 말하는 것과 같습니다.
즉 서로 다른 언어 페이지라도 canonical은 자신의 URL을 가리켜야함으로 영어 페이지에서 ko를 canonical로 하면 잘못된 설정입니다.

마무리

다국어 작업은 단순히 다국어 페이지를 제공하는 것을 넘어서 SEO 관점에서 굉장히 중요합니다.

SEO는 이전에 공부할 때도 쉬운 것 같으면서도 어렵다는 생각을 계속했는데, 이번 다국어 작업에서도 마찬가지였습니다.
단순히 다국어만 페이지만 적용하는 것이 아닌, 검색엔진에게 적절하게 노출되고 사용자 경험도 고려해야 하는 작업이었기 때문에 여러가지를 배울 수 있었습니다.

이 과정에서 hreflang, canonical, sitemap 등 전반적으로 신경 쓰고 확인해야 되는 작업들이 많았고, 설정한 작업들이 제대로 SEO에 노출되고 있는지 확인을 바로 할 수 없다는 점이 어려웠습니다.

이전에 작업했던 도메인 이전의 SEO는 진행 중이어서 다국어까지 제대로 노출되는지 확인하려면 시간이 더 지나야 알 수 있겠지만 이번 다국어 작업을 통해 SEO의 중요한 원칙들을 스터디하고 적용할 수 있어서 재미있는 경험이 되었습니다

Reference

다국어 웹사이트를 위한 5가지 주요 검색 엔진 최적화 팁
hreflang에 대한 모든 것 : 다국어 웹사이트에서 효과적인 SEO의 핵심