支持多语言的React应用如何正确配置hreflang标签

不要把你列出的全部hreflang标签一次性粘贴到public/index.html的<head></head>区块中，这种实现方式不符合hreflang的规范要求，会导致配置失效甚至影响SEO效果。

hreflang标签的生效规则是单个页面仅需声明当前页自身对应的所有多语言版本关联关系，不需要罗列全站其他页面的多语言映射。如果把所有页面的hreflang标签全部写死在全局静态index.html里，用户访问任意路由时，页面head都会加载全部6条无关的关联声明，搜索引擎抓取时会判定标签与当前页面不匹配，直接忽略错误的hreflang配置。
同时React作为单页应用，静态index.html里的head内容不会跟随客户端路由切换自动更新，根本无法满足不同路由加载不同hreflang标签的需求。

• 不要在静态public/index.html中写死任何hreflang标签
• 引入页面head管理工具（最常用的是React Helmet），在每个路由对应的页面组件中，仅注入当前页面对应的多语言关联标签：
  1. 访问英语首页/时，head内仅加载：

     <link rel="alternate" hreflang="en" href="https://url_of_page/"/>
     <link rel="alternate" hreflang="es" href="https://url_of_page/es"/>
     

  2. 访问英语落地页/landing-webpage时，head内仅加载：

     <link rel="alternate" hreflang="en" href="https://url_of_page/landing-webpage"/>
     <link rel="alternate" hreflang="es" href="https://url_of_page/es/landing-webpage"/>
     

  3. 访问英语商业页/business-website时，head内仅加载：

     <link rel="alternate" hreflang="en" href="https://url_of_page/business-website"/>
     <link rel="alternate" hreflang="es" href="https://url_of_page/es/business-website"/>
     

• 所有对应的西班牙语路由页面，也要加载和同页面英语版完全一致的一组hreflang标签，hreflang要求双向关联才会被搜索引擎识别。
• 如果你的项目是纯客户端渲染（CSR），需要确认搜索引擎可以正常抓取JS渲染后的页面内容，否则就算标签配置正确也无法被识别，这种场景可以配合预渲染、服务端渲染（SSR）或静态站点生成（SSG）能力保证标签可被爬虫读取。

内容的提问来源于stack exchange，提问作者saar twito