Next.js(Pages Router) v16에서 대체 언어 버전을 연결하는 방법

문제

웹사이트가 여러 언어로 동일한 콘텐츠를 제공할 때, 검색 엔진은 각 버전에 대한 별도의 URL을 발견하지만 그 관계를 이해하지 못합니다. 프랑스어 사용자가 검색할 때 프랑스어 버전이 존재함에도 영어 버전이 더 높은 순위로 표시될 수 있습니다. 마찬가지로, 영어 페이지와 그 프랑스어 번역본이 조화로운 대안이 아닌 경쟁하는 중복 콘텐츠로 취급될 수 있습니다. 이러한 언어 버전을 연결하는 명시적인 신호가 없으면 검색 엔진은 사용자의 언어 선호도에 따라 가장 적합한 버전을 자신 있게 제공할 수 없어 순위 권한이 분산되고 사용자 경험이 저하됩니다.

해결책

각 페이지의 head 섹션에 hreflang 속성이 있는 link 요소를 추가하여 페이지 자체를 포함한 모든 언어 버전을 나열합니다. 각 페이지 변형은 사용 가능한 모든 언어 버전을 참조하는 동일한 링크 세트를 포함해야 합니다. 이러한 양방향 링크는 검색 엔진이 페이지를 중복이 아닌 번역본으로 인식하도록 보장하여 브라우저 환경설정 및 검색 컨텍스트에 따라 사용자에게 올바른 언어 버전을 제공할 수 있게 합니다.

단계

1. 대체 언어 링크를 생성하는 컴포넌트 만들기

페이지 메타데이터를 수정하기 위해 next/head에서 Head 컴포넌트를 가져옵니다. useRouter 훅을 통해 로케일 정보에 접근하여 사용 가능한 모든 언어 버전에 대한 링크를 구축합니다.

import Head from "next/head";
import { useRouter } from "next/router";

interface AlternateLinksProps {
  path?: string;
}

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, locale: currentLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

이 컴포넌트는 라우터에서 사용 가능한 로케일을 매핑하고 모든 페이지에 대한 링크 요소를 동적으로 생성합니다.

2. 번역이 있는 페이지에 컴포넌트 추가하기

여러 언어로 존재하는 각 페이지 컴포넌트에 AlternateLinks 컴포넌트를 포함시키세요.

import AlternateLinks from "@/components/AlternateLinks";

export default function AboutPage() {
  return (
    <>
      <AlternateLinks />
      <main>
        <h1>About Us</h1>
      </main>
    </>
  );
}

이 컴포넌트는 각 페이지가 완전한 대체 링크 세트를 포함하도록 보장하여, 모든 변형이 서로를 참조해야 한다는 요구 사항을 충족시킵니다.

3. 현재 로케일에 대한 자체 참조 링크 포함하기

모든 페이지는 자신의 언어를 나타내는 자체 참조 hreflang 태그를 포함해야 합니다. 이 컴포넌트는 현재 로케일을 포함한 모든 로케일을 반복하여 이를 처리합니다.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

이제 각 페이지는 다른 버전에 대한 태그와 함께 자신을 가리키는 hreflang 태그를 포함합니다.

4. x-default 폴백 링크 추가하기

사용자의 언어가 사용 불가능할 때 어떤 버전을 볼지 지정하는 x-default 링크를 추가하세요.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, defaultLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales || !defaultLocale) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
      <link
        rel="alternate"
        hrefLang="x-default"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/${defaultLocale}${canonicalPath}`}
      />
    </Head>
  );
}

x-default 링크는 언어 환경설정이 일치하지 않는 사용자를 기본 로케일로 안내합니다.