Hreflang标签在动态页面生成时出现重复链接问题怎么办？

熙晨 Dev 提问于 2026-02-05 16:11:34 阅读 27

优化

我在给多语言电商网站做Hreflang优化时遇到问题，用Next.js动态生成的head标签里，不同语言页面的hreflang链接重复了。比如英文页面和法语页面互相引用时，Google Search Console提示重复的hreflang标签。

我尝试在getServerSideProps里这样生成标签：


export async function getServerSideProps({ locale }) {
  const langs = ['en', 'fr', 'es'];
  return {
    props: {
      hreflangTags: langs.map(lang => ({
        href: <code>https://example.com/products</code>,
        hreflang: lang
      }))
    }
  };
}

但实际渲染到HTML时，所有语言页面的href都指向/products，导致Google认为这是重复链接。我应该怎样根据语言参数动态修改href路径呢？

我来解答赞 2 收藏

反馈

2 条解答

博主东宁 Lv1

你这个问题出在所有语言版本的 href 都硬编码成了 https://example.com/products，Google 当然会报重复。hreflang 的作用是告诉搜索引擎每个语言版本对应自己的 URL，你现在等于说“英文、法文、西班牙文都指向同一个页面”，那不就是重复嘛。

关键是要根据当前语言动态生成对应的路径。你在 getServerSideProps 里已经有 locale 了，别浪费它。应该用 Next.js 的路由能力拼出带 locale 的正确 URL。

改成这样：

export async function getServerSideProps({ locale, req }) {

  const domain = https://${req.headers.host};

  const langs = ['en', 'fr', 'es'];

  const path = '/products'; // 当前页面的实际路径



  return {

    props: {

      hreflangTags: langs.map(lang => ({

        href: ${domain}/${lang}${path === '/products' ? '' : path}, // 注意路径处理

        hreflang: lang

      }))

    }

  };

}

注意几个点：

1. 要从 req 拿 host，别写死域名，不然本地调试或上 CDN 容易出事。
2. 每个语言的链接要带上自己的 locale 前缀，比如 /fr/products 或直接 /fr（如果是首页）。
3. 如果你的多语言是通过子目录实现的（常见做法），就得保证拼出来的路径是实际可访问的，不然 Google 爬了发现 404 更糟。
4. 输出到 HTML 的时候记得转义，虽然 Next.js 一般会帮你做，但如果自己拼字符串注入 head，别忘了对 URL 做 encodeURIComponent 处理，防注入也防解析错误。

最后检查一下最终渲染出来的 link 标签长啥样，应该是类似：

这才对。确保每页只输出一套，并且每页的 self-referencing（自己指向自己）那个 hreflang 是正确的当前语言。

2026-02-11 19:00

W″家淼 Lv1

问题出在你生成 href 的时候没把语言参数加到路径上。所有语言页面都指向相同的 /products，Google 当然会报重复 hreflang。

可以试试这样改：在拼接 href 的时候加上语言前缀。例如英文页面的路径应该是 /en/products，法语是 /fr/products，以此类推。关键是你在生成链接时要根据当前语言动态拼接路径。

这里可以这样处理：

在 getServerSideProps 里拿到 locale 参数后，用它来构造每个语言的链接路径：

export async function getServerSideProps({ locale }) {
const langs = ['en', 'fr', 'es'];
const baseUrl = 'https://example.com';
const currentPath = '/products'; // 当前页面的实际路径

return {
props: {
hreflangTags: langs.map(lang => ({
href: ${baseUrl}/${lang}${currentPath},
hreflang: lang
}))
}
};
}

然后在页面里使用这些链接渲染 head 中的 hreflang 标签：

{hreflangTags.map(tag => (

))}

这样每个语言的页面指向的都是带语言前缀的 URL，Google 就能正确识别了。

顺便说一句，如果你的网站使用了自定义路由或重写规则，还要确保这些链接和你站点地图中的链接一致，否则搜索引擎还是会报错。

2026-02-05 16:13