外向け 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个工作日内回复。

简体中文