外向け Sotomuke

← Help Center · Search & Analytics

Linking from your original site to translated pages (language links and hreflang)

How to add links to each language in your original site's footer, and how to set up hreflang so Google treats your original site and translated pages as a single group. Examples for WordPress, Payload CMS, and Next.js.

Translated pages can appear in search on their own, but linking from your original site to each language version lets visitors switch languages and helps crawlers discover translated pages sooner. If you also add hreflang to your original site, Google treats the original and translated pages as language variants of the same page.

1. Add language links to the footer (any CMS)

Add links to the top page of each language. Write each label in its own language.

<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>

2. Links that switch to the translation of the same page (for developers)

Translated pages simply add a prefix such as /en/ under the same path as the original page, so you can generate them programmatically from the current path. Next.js example:

"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. Add hreflang to your original site

In each page's <head> , declare each language version of that page. The paths are the same as the original page.

<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/">

In Next.js (App Router), generateMetadata in alternates.languages return the same content. In WordPress, add it to the custom head output of your SEO plugin (Yoast, Rank Math, etc.) or to your theme's header.php add it.

4. Turn on "Treat the original site as the source of truth" in the dashboard

Once setup on the original site is complete, turn on this switch under "Translation Management" on the site page. The hreflang tags, sitemap, and source-language links in the language switcher on your translated pages will then point to the original site, and the copy of the source content served by Sotomuke will declare the original site as canonical. If you cannot add hreflang tags to the original site, leave this switch off. Even then, your translated pages remain correctly linked to one another.

Related articles

If your issue is not resolved, please contact us. We typically reply within 1 business day.

English