Ceeji 笃志者 - 宁心勉学，慎思笃行
Recent content in Ceeji 笃志者 on 宁心勉学，慎思笃行
马上订阅 Ceeji 笃志者 - 宁心勉学，慎思笃行 RSS 更新: https://ceeji.net/blog/feed/
正确实现根据用户偏好自动切换网页中文简繁版本
2024年4月23日 11:50
很多人都没有正确地实现中文简繁体语言的自动切换，其实现有瑕疵，造成用户体验和 SEO 的问题。这篇文章直接给你一个终极答案，照抄就可以了。
在给出具体的代码之前，先普及几个知识点：
- 根据规范，中文的语言代码有两种形式，一种是根据简繁来标识，如
zh-hans代表简体中文，zh-hant代表繁体中文；另一种是根据地区来标识，如zh-cn代表中国大陆地区的中文，zh-tw代表台湾地区的中文。我们的代码要兼容两种形式。 - 大多数中文网站没必要针对台湾、香港、新加坡等不同地域实现不同的语言切换，例如台湾和香港我们一般共用繁体中文。因此，网站的繁体中文语言 url 前缀应该使用
zh-hant而不是zh-TW或zh-HK。 - 为了 SEO，我们需要注意两件事：
- 应该在网站的
<html>标签上添加lang属性，以便搜索引擎正确识别网站的语言； - 对于搜索引擎的爬虫（蜘蛛），不要自动跳转到其他语言版本，否则可能会导致其无法索引到各种语言的版本；
- 应该在网站的
- 一些用户不知道如何在浏览器或操作系统中设置自己偏好的语言，因此用户会在网页上手工切换到自己偏好的语言。我们需要记住用户选择的语言，避免重复跳转到操作系统或浏览器设置的语言。
下面是我们的终极代码。
在你网页的 JavaScript 脚本中，添加如下代码：
const beforeSwitchLanguage = (lang) => {
localStorage.setItem("preferred_lang", lang);
return true;
}
window.beforeSwitchLanguage = beforeSwitchLanguage;
const autoSwitchLanguage = () => {
// 是否为搜索引擎蜘蛛
let isBot = /(Googlebot\/|Googlebot-Mobile|Googlebot-Image|Googlebot-News|Googlebot-Video|AdsBot-Google([^-]|$)|AdsBot-Google-Mobile|Feedfetcher-Google|Mediapartners-Google|Mediapartners \(Googlebot\)|APIs-Google|Google-InspectionTool|Storebot-Google|GoogleOther|bingbot|Slurp|[wW]get|LinkedInBot|Python-urllib|python-requests|aiohttp|httpx|libwww-perl|httpunit|Nutch|Go-http-client|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|BIGLOTRON|Teoma|convera|seekbot|Gigabot|Gigablast|exabot|ia_archiver|GingerCrawler|webmon |HTTrack|grub\.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|findlink|msrbot|panscient|yacybot|AISearchBot|ips-agent|tagoobot|MJ12bot|woriobot|yanga|buzzbot|mlbot|yandex\.com\/bots|purebot|Linguee Bot|CyberPatrol|voilabot|Baiduspider|citeseerxbot|spbot|twengabot|postrank|Turnitin|scribdbot|page2rss|sitebot|linkdex|Adidxbot|ezooms|dotbot|Mail\.RU_Bot|discobot|heritrix|findthatfile|europarchive\.org|NerdByNature\.Bot|sistrix crawler|Ahrefs(Bot|SiteAudit)|fuelbot|CrunchBot|IndeedBot|mappydata|woobot|ZoominfoBot|PrivacyAwareBot|Multiviewbot|SWIMGBot|Grobbot|eright|Apercite|semanticbot|Aboundex|domaincrawler|wbsearchbot|summif...剩余内容已隐藏
查看完整文章以阅读更多
Ceeji 笃志者 - 宁心勉学，慎思笃行
Recent content in Ceeji 笃志者 on 宁心勉学，慎思笃行
马上订阅 Ceeji 笃志者 - 宁心勉学，慎思笃行 RSS 更新: https://ceeji.net/blog/feed/
正确实现根据用户偏好自动切换网页中文简繁版本
2024年4月23日 11:50
很多人都没有正确地实现中文简繁体语言的自动切换，其实现有瑕疵，造成用户体验和 SEO 的问题。这篇文章直接给你一个终极答案，照抄就可以了。
在给出具体的代码之前，先普及几个知识点：
- 根据规范，中文的语言代码有两种形式，一种是根据简繁来标识，如
zh-hans代表简体中文，zh-hant代表繁体中文；另一种是根据地区来标识，如zh-cn代表中国大陆地区的中文，zh-tw代表台湾地区的中文。我们的代码要兼容两种形式。 - 大多数中文网站没必要针对台湾、香港、新加坡等不同地域实现不同的语言切换，例如台湾和香港我们一般共用繁体中文。因此，网站的繁体中文语言 url 前缀应该使用
zh-hant而不是zh-TW或zh-HK。 - 为了 SEO，我们需要注意两件事：
- 应该在网站的
<html>标签上添加lang属性，以便搜索引擎正确识别网站的语言； - 对于搜索引擎的爬虫（蜘蛛），不要自动跳转到其他语言版本，否则可能会导致其无法索引到各种语言的版本；
- 应该在网站的
- 一些用户不知道如何在浏览器或操作系统中设置自己偏好的语言，因此用户会在网页上手工切换到自己偏好的语言。我们需要记住用户选择的语言，避免重复跳转到操作系统或浏览器设置的语言。
下面是我们的终极代码。
在你网页的 JavaScript 脚本中，添加如下代码：
const beforeSwitchLanguage = (lang) => {
localStorage.setItem("preferred_lang", lang);
return true;
}
window.beforeSwitchLanguage = beforeSwitchLanguage;
const autoSwitchLanguage = () => {
// 是否为搜索引擎蜘蛛
let isBot = /(Googlebot\/|Googlebot-Mobile|Googlebot-Image|Googlebot-News|Googlebot-Video|AdsBot-Google([^-]|$)|AdsBot-Google-Mobile|Feedfetcher-Google|Mediapartners-Google|Mediapartners \(Googlebot\)|APIs-Google|Google-InspectionTool|Storebot-Google|GoogleOther|bingbot|Slurp|[wW]get|LinkedInBot|Python-urllib|python-requests|aiohttp|httpx|libwww-perl|httpunit|Nutch|Go-http-client|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|BIGLOTRON|Teoma|convera|seekbot|Gigabot|Gigablast|exabot|ia_archiver|GingerCrawler|webmon |HTTrack|grub\.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|findlink|msrbot|panscient|yacybot|AISearchBot|ips-agent|tagoobot|MJ12bot|woriobot|yanga|buzzbot|mlbot|yandex\.com\/bots|purebot|Linguee Bot|CyberPatrol|voilabot|Baiduspider|citeseerxbot|spbot|twengabot|postrank|Turnitin|scribdbot|page2rss|sitebot|linkdex|Adidxbot|ezooms|dotbot|Mail\.RU_Bot|discobot|heritrix|findthatfile|europarchive\.org|NerdByNature\.Bot|sistrix crawler|Ahrefs(Bot|SiteAudit)|fuelbot|CrunchBot|IndeedBot|mappydata|woobot|ZoominfoBot|PrivacyAwareBot|Multiviewbot|SWIMGBot|Grobbot|eright|Apercite|semanticbot|Aboundex|domaincrawler|wbsearchbot|summif...剩余内容已隐藏
查看完整文章以阅读更多