PHP小码农

Appearance

多语言页面设计 ​

多语言网站需要支持多种语言版本的内容切换，同时考虑 SEO、用户体验和内容管理效率。本节将介绍 hreflang 属性的使用方法、语言切换器的设计实现、多语言内容翻译策略，以及如何通过 SEO 最佳实践优化多语言网站在搜索引擎中的表现。

前置知识

阅读本节前，建议先了解：文本方向（dir 属性）

hreflang 属性 ​

基本用法 ​

hreflang 属性用于告诉搜索引擎页面有哪些语言版本，帮助搜索引擎向用户展示正确语言的结果。

html
<head>
  <meta charset="UTF-8">
  <title>产品详情</title>

  <!-- 声明所有语言版本 -->
  <link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/product" />
  <link rel="alternate" hreflang="zh-TW" href="https://example.com/zh-TW/product" />
  <link rel="alternate" hreflang="en" href="https://example.com/en/product" />
  <link rel="alternate" hreflang="ja" href="https://example.com/ja/product" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/product" />
</head>

x-default ​

hreflang="x-default" 指定当用户浏览器语言不匹配任何已声明的语言时，显示的默认页面：

html
<!-- 如果用户语言是法语，但没有法语版本 -->
<!-- 搜索引擎将展示 x-default 指定的默认页面 -->
<link rel="alternate" hreflang="x-default" href="https://example.com/en/product" />

HTTP 头中的 hreflang ​

非 HTML 内容（如 PDF）也可以使用 HTTP 头声明：

Link: <https://example.com/zh-CN/document.pdf>; rel="alternate"; hreflang="zh-CN",
      <https://example.com/en/document.pdf>; rel="alternate"; hreflang="en"

语言切换器 ​

基础实现 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多语言页面</title>
  <style>
    .lang-switcher {
      display: flex;
      gap: 0.25rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .lang-switcher a {
      padding: 0.25rem 0.75rem;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 4px;
      font-size: 0.875rem;
    }

    .lang-switcher a[aria-current="page"] {
      background: #0066cc;
      color: white;
      border-color: #0066cc;
    }

    .lang-switcher a:focus-visible {
      outline: 3px solid #ff6600;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <header>
    <nav aria-label="语言切换">
      <ul class="lang-switcher">
        <li><a href="/zh-CN/page" hreflang="zh-CN" aria-current="page">简体中文</a></li>
        <li><a href="/zh-TW/page" hreflang="zh-TW">繁體中文</a></li>
        <li><a href="/en/page" hreflang="en">English</a></li>
        <li><a href="/ja/page" hreflang="ja">日本語</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>欢迎来到多语言网站</h1>
    <p>这是一个支持多种语言切换的网站示例。</p>
  </main>
</body>
</html>

高级语言切换器 ​

html
<nav aria-label="语言切换" role="navigation">
  <ul class="lang-switcher">
    <li>
      <a href="/zh-CN/" hreflang="zh-CN" aria-current="page"
         aria-label="切换到简体中文（当前页面）">
        <span aria-hidden="true">🇨🇳</span> 简体中文
      </a>
    </li>
    <li>
      <a href="/zh-TW/" hreflang="zh-TW"
         aria-label="切换到繁體中文">
        <span aria-hidden="true">🇹🇼</span> 繁體中文
      </a>
    </li>
    <li>
      <a href="/en/" hreflang="en"
         aria-label="Switch to English">
        <span aria-hidden="true">🇺🇸</span> English
      </a>
    </li>
    <li>
      <a href="/ja/" hreflang="ja"
         aria-label="日本語に切り替える">
        <span aria-hidden="true">🇯🇵</span> 日本語
      </a>
    </li>
  </ul>
</nav>

多语言架构策略 ​

子目录方式（推荐） ​

https://example.com/
  zh-CN/        中文简体
  zh-TW/        中文繁体
  en/           英文
  ja/           日文
html
<!-- 每个语言版本的页面独立 -->
<!-- URL 结构清晰，SEO 友好 -->
<!-- https://example.com/zh-CN/about -->
<!-- https://example.com/en/about -->

子域名方式 ​

https://zh-CN.example.com/    中文简体
https://en.example.com/       英文
https://ja.example.com/       日文

不同域名方式 ​

https://example.cn/    中文
https://example.com/   英文
https://example.jp/    日文
策略优点缺点
子目录（推荐）SEO 最友好，维护方便需要路由支持
子域名语言隔离好SEO 权重分散
不同域名完全独立维护成本高，SEO 无关

翻译策略 ​

i18n 文本提取 ​

javascript
// 使用 data 属性存储翻译键
// JavaScript 动态切换
const translations = {
  'zh-CN': {
    'greeting': '欢迎来到我们的网站',
    'cta': '开始使用',
    'nav.home': '首页',
    'nav.about': '关于我们',
    'nav.contact': '联系我们'
  },
  'en': {
    'greeting': 'Welcome to our website',
    'cta': 'Get Started',
    'nav.home': 'Home',
    'nav.about': 'About Us',
    'nav.contact': 'Contact Us'
  }
};

function switchLanguage(lang) {
  // 更新 HTML lang 属性
  document.documentElement.lang = lang;

  // 更新所有翻译文本
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    el.textContent = translations[lang][key] || key;
  });

  // 更新 HTML dir 属性（RTL 语言）
  const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
  document.documentElement.dir = rtlLanguages.includes(lang) ? 'rtl' : 'ltr';
}
html
<!-- 使用 data-i18n 标记翻译文本 -->
<body>
  <h1 data-i18n="greeting">欢迎来到我们的网站</h1>
  <a href="#" class="btn" data-i18n="cta">开始使用</a>

  <nav>
    <a href="/home" data-i18n="nav.home">首页</a>
    <a href="/about" data-i18n="nav.about">关于我们</a>
    <a href="/contact" data-i18n="nav.contact">联系我们</a>
  </nav>
</body>

不可翻译的内容 ​

某些内容在翻译时需要注意：

类型处理方式
URL 路径保持英文路径，翻译页面标题
图片 alt 文本需要翻译
代码和命令保持不变
品牌名称通常保持原文
日期和数字使用本地化格式
货币转换为本地货币和格式

SEO 多语言优化 ​

页面 head 完整配置 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 页面标题包含语言标识 -->
  <title>HTML5 教程 - 完整中文指南</title>

  <!-- 描述使用对应语言 -->
  <meta name="description" content="全面的 HTML5 中文教程，从入门到精通。" />

  <!-- 声明所有语言版本 -->
  <link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/html5-tutorial" />
  <link rel="alternate" hreflang="en" href="https://example.com/en/html5-tutorial" />
  <link rel="alternate" hreflang="ja" href="https://example.com/ja/html5-tutorial" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/html5-tutorial" />

  <!-- 规范链接 -->
  <link rel="canonical" href="https://example.com/zh-CN/html5-tutorial" />

  <!-- Open Graph -->
  <meta property="og:title" content="HTML5 教程 - 完整中文指南" />
  <meta property="og:description" content="全面的 HTML5 中文教程" />
  <meta property="og:locale" content="zh_CN" />
  <meta property="og:locale:alternate" content="en_US" />
  <meta property="og:locale:alternate" content="ja_JP" />
</head>
<body>...</body>
</html>

URL 结构建议 ​

URL 结构示例SEO 友好度
子目录 + 语言代码/en/product高
子目录 + 地区代码/zh-CN/product高
查询参数?lang=en低（不推荐）

实战示例：多语言页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多语言页面示例</title>

  <!-- hreflang 声明 -->
  <link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/" />
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/" />

  <style>
    .lang-nav { display: flex; gap: 0.5rem; list-style: none; }
    .lang-nav a {
      padding: 0.25rem 0.75rem;
      border-radius: 4px;
      text-decoration: none;
      color: #333;
    }
    .lang-nav a[aria-current="page"] {
      background: #0066cc;
      color: white;
    }
  </style>
</head>
<body>
  <!-- 语言切换器 -->
  <header>
    <nav aria-label="语言切换">
      <ul class="lang-nav">
        <li><a href="/zh-CN/" hreflang="zh-CN" aria-current="page">简体中文</a></li>
        <li><a href="/en/" hreflang="en">English</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1 data-i18n="title">欢迎</h1>
    <p data-i18n="description">这是一个多语言网站的示例。</p>
  </main>

  <script>
    // 多语言切换逻辑
    function switchLang(lang) {
      document.documentElement.lang = lang;
      // 根据语言更新内容和样式
    }
  </script>
</body>
</html>

注意事项 ​

  1. 每个语言版本有独立的 URL：不要在同一个 URL 上切换语言
  2. hreflang 必须双向声明：每个语言页面都要声明所有其他语言版本
  3. 确保内容质量：不要使用机器翻译作为最终内容
  4. 正确设置 canonical：避免重复内容问题
  5. 测试所有语言版本：确保布局在各语言下都正常

最佳实践 ​

  • 使用子目录策略（/en/、/zh-CN/）组织多语言页面
  • 在每个页面的 <head> 中声明所有语言版本的 hreflang
  • 使用 aria-current="page" 标记当前语言
  • 为语言切换器提供 aria-label
  • 使用 x-default 指定默认语言页面
  • 翻译 alt 文本、title、meta description 等内容
  • 确保 URL、页面标题、描述等使用对应语言

下一节

继续学习：日期与货币格式

参考链接 ​