翻訳ページは単体でも検索に載りますが、元サイトから各言語ページへリンクを張ると、訪問者が言語を切り替えられ、クローラーも翻訳ページを早く見つけます。さらに元サイトに 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 を置けない場合はオフのままにしてください。その場合も翻訳ページ同士は正しく関連付けられています。
