外向け Sotomuke

← ヘルプセンター · 検索・計測

元サイトから翻訳ページへリンクする(言語リンクと hreflang)

元サイトのフッターに各言語へのリンクを置く方法と、hreflang を設置して元サイトと翻訳ページを一つのグループとして Google に伝える方法。WordPress・Payload CMS・Next.js の例。

翻訳ページは単体でも検索に載りますが、元サイトから各言語ページへリンクを張ると、訪問者が言語を切り替えられ、クローラーも翻訳ページを早く見つけます。さらに元サイトに 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>

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 を置けない場合はオフのままにしてください。その場合も翻訳ページ同士は正しく関連付けられています。

関連する記事

解決しない場合は お問い合わせ ください。通常1営業日以内にご返信します。