太长不看版 — 如果你以多种语言发布相同的页面，
hreflang标签的作用是告诉谷歌“这些页面互为翻译版本，而非重复内容”。有三种错误会导致谷歌忽略（甚至主动惩罚）你的配置：非互惠的语言集群、hreflang指向返回 404 错误 的网址，以及canonical（规范链接）指向英语主页面而非页面本身。这些错误都不会抛出异常，也不会导致构建失败。你只有通过检查渲染后的<head>部分才能发现它们。以下是能避免所有这三种错误的 Next.js 16 元数据应用程序接口模式。
多语言搜索引擎优化有一个残酷的特性：其失败模式表现为静默。你的翻译页面渲染正常，构建状态显示成功，TypeScript 也没有报错——而谷歌却悄悄地将你的法语页面判定为英语页面的重复内容并将其从索引中移除。任何地方都没有错误提示。这篇文章就是我希望能早点拥有的检查清单。
全文将使用虚构的 example.com 作为示例。该模式对框架的依赖极轻：无需国际化库，仅使用 Next.js 16 元数据应用程序接口的 alternates 字段和一个小型辅助函数。
结构：一个辅助函数，每页设置区域语言
元数据应用程序接口中的 alternates.languages 会为你渲染 <link rel="alternate" hreflang="..."> 标签。一个微小的辅助函数可保持一致性：
// lib/hreflang.ts
type Locale = "en" | "fr" | "es" | "de" | "nl" | "ar";
/**
* availableLocales：仅包含实际存在翻译页面的区域语言。
* selfLocale：确保规范链接指向自身（页面指向自己，
* 而非指向英语主页面）。
*/
export function buildHreflang(
path: string,
availableLocales: readonly Locale[],
selfLocale: Locale = "en",
baseUrl = "https://example.com",
) {
const suffix = path === "/" ? "" : path;
const languages: Record<免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
