번역 페이지는 단독으로도 검색에 노출되지만, 원본 사이트에서 각 언어 페이지로 링크를 걸면 방문자가 언어를 전환할 수 있고 크롤러도 번역 페이지를 더 빨리 발견합니다. 또한 원본 사이트에 hreflang을 설치하면 Google은 원본 사이트와 번역 페이지를 같은 페이지의 다른 언어 버전으로 취급합니다.
1. 푸터에 언어 링크 배치하기(모든 CMS 공통)
각 언어의 메인 페이지로 가는 링크를 추가합니다. 라벨은 해당 언어 표기로 작성해 주십시오.
<a href="https://global.example.co.jp/en/" hreflang="en" lang="en">English</a>
<a href="https://global.example.co.jp/zh-Hans/" hreflang="zh-Hans" lang="zh-Hans">简体中文</a>
<a href="https://global.example.co.jp/ko/" hreflang="ko" lang="ko">한국어</a>- WordPress: 외모 → 위젯(또는 사이트 편집기)의 푸터에 '사용자 정의 HTML'을 추가하고 위의 링크를 붙여 넣습니다.
- Payload CMS: 관리 화면의 Globals → Footer → Nav Items에 언어별로 Custom URL 링크를 추가합니다.
- STUDIO·Wix·Jimdo: 푸터에 텍스트 링크를 추가합니다.
2. 같은 페이지의 번역으로 전환하는 링크(개발자용)
번역 페이지는 원본 페이지와 같은 경로 아래에 /en/ 등이 붙을 뿐이므로, 현재 경로에서 기계적으로 생성할 수 있습니다. Next.js 예시:
"use client";
import { usePathname } from "next/navigation";
const BASE = "https://global.example.co.jp";
const LANGS = [["en", "English"], ["zh-Hans", "简体中文"], ["ko", "한국어"]];
export function LanguageLinks() {
const path = usePathname() || "/";
return (
<nav aria-label="Language">
{LANGS.map(([code, name]) => (
<a key={code} href={`${BASE}/${code}${path}`} hrefLang={code} lang={code}>{name}</a>
))}
</nav>
);
}3. 원본 사이트에 hreflang 설치하기
각 페이지의 <head> 에 해당 페이지의 각 언어 버전을 선언합니다. 경로는 원본 페이지와 동일합니다.
<link rel="alternate" hreflang="ja" href="https://example.co.jp/about/">
<link rel="alternate" hreflang="en" href="https://global.example.co.jp/en/about/">
<link rel="alternate" hreflang="ko" href="https://global.example.co.jp/ko/about/">
<link rel="alternate" hreflang="x-default" href="https://example.co.jp/about/">Next.js(App Router)에서는 generateMetadata 의 alternates.languages 에 동일한 내용을 반환합니다. WordPress에서는 SEO 플러그인(Yoast, Rank Math 등)의 커스텀 head 출력 또는 테마의 header.php 에 추가합니다.
4. 대시보드에서 '원본 사이트를 원문 기준으로 삼기'를 켜기
원본 사이트 측 설치가 완료되면 사이트 페이지의 '번역 관리'에 있는 이 스위치를 켭니다. 번역 페이지의 hreflang, 사이트맵, 언어 전환의 원문 링크가 원본 사이트를 가리키게 되며, Sotomuke가 제공하는 원문 사본은 원본 사이트를 canonical로 선언합니다. 원본 사이트에 hreflang을 설치할 수 없는 경우에는 꺼 둔 상태로 두세요. 이 경우에도 번역 페이지 간에는 올바르게 연결되어 있습니다.