前端设计

使用hrefang属性助力多语言网站

2025-11-08

如何使用hrefang属性助力多语言网站。因为合理使用hrefang属性对管理和优化不同语言版本的网站,以及用户体验上,起到非常重要的效果。


一、hrefang原理

1、什么是hrefang

hrefang是一种html属性,使用在link标签里面,用来指定网页的语言和目标区域。

简单来说,就是当不同国家境内用户访问你的网站时,为了给客户最好的用户体验,通过hrefang属性设置,网站自动展示相应语言版本的页面给用户,让客户更好的访问网站内容。

同时,你在不同地区进行Google搜索时,搜索结果展示的title和description以及URL地址都是当地语言。


2、hrefang工作原理

假设你的网址是:www.example.com

那么你在德国使用Google搜索网站

或者进入网站时,

URL会显示网站的德语网址为:

www.example.com/de/

或者de.example.com

具体的URL展示形式取决于你如何设置。

当你在美国使用Google搜索网站

或进入网站时,

URL会显示网站的美式英语网址为:

www.example.com/en-us/

或者us.example.com


二、hrefang使用方式

hrefang使用方式有三种。

1、在html中使用

我们直接通过案例分析:

<link rel="alternate"

hreflang="lang_code" href="url_of_page" />

①、案例中rel="alternate",代表该链接为此页面的备用版本。

②、案例hreflang="lang_code"中的属性值"lang_code"是举例,指语言/区域版本代码,由一个或两个可选的值组成,两个值之间用“-”符号分隔,并且此属性在使用中,切记必须要填写。

I、例如:

hrefang=“en” 代表英语;

hrefang=“en-US”代表在美国境内使用的英语版本,即美式英语;

hrefang=“en-GB”代表在英国境内使用的英语版本,即英式英语;

道理类似于我们中文的简体和繁体的意思,主要是便于用户访问浏览网站内容。


II、lang_code的值中,还可以使用x-default,主要是当网站的语言/区域与用户的浏览器设置不匹配时,系统会使用保留值x-default,这时,我们可以使用x-default,让用户跳转到相应的语言选择页面,然后进行选择语言浏览。

使用方法如下:

<link rel="alternate"  href="https://example.com/en-gb" hreflang="en-gb" />

<link rel="alternate"  href="https://example.com/en-us" hreflang="en-us" />

<link rel="alternate"  href="https://example.com/en-au" hreflang="en-au" />

<link rel="alternate"  href="https://example.com/country-selector"   hreflang="x-default" />


③、案例href="url_of_page"中,url_of_page这里是举例,具体代表你网站相应语言/区域的url网址。


2、在http标头中使用

这种方法,常用于非html文件,例如pdf,我们继续通过案例来看:

Link: <https://de.example.com/file.pdf>;

rel="alternate"; hreflang="de",

<https://example.com/file.pdf>;

rel="alternate"; hreflang="en"

通过这种方法,我们就可以让面向德语和英语的用户访问相对应的pdf文件。


3、在xml网站地图中使用

这种方法可以把所有网址的所有语言和区域写入进去,并且能快速让Google知道。

下面我们引用官方案例来解释:

假设添加下面三个页面到xml网站地图中:


I、以英语用户为目标用户:

www.example.com/english/page.html


II、以德语用户为目标用户:

www.example.de/deutsch/page.html


III、以瑞士境内的德语用户为目标用户:

www.example.de/schweiz-deutsch/page.html


使用方法如下:

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"

xmlns:xhtml="http://www.w3.org/1999/xhtml">

<url>

<loc>https://www.example.com/english/page.html</loc>

<xhtml:link rel="alternate" hreflang="de" href="https://www.example.de/deutsch/page.html"/>

<xhtml:link rel="alternate" hreflang="de-ch" href="https://www.example.de/schweiz-deutsch/page.html"/>

<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/english/page.html"/>

</url>


<url>

<loc>https://www.example.de/deutsch/page.html</loc>

<xhtml:link rel="alternate"  hreflang="de" href="https://www.example.de/deutsch/page.html"/>

<xhtml:link rel="alternate" hreflang="de-ch"  href="https://www.example.de/schweiz-deutsch/page.html"/>

<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/english/page.html"/>

</url>


<url>

<loc>https://www.example.de/schweiz-deutsch/page.html</loc>

<xhtml:link rel="alternate" hreflang="de" href="https://www.example.de/deutsch/page.html"/>

<xhtml:link rel="alternate" hreflang="de-ch" href="https://www.example.de/schweiz-deutsch/page.html"/>

<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/english/page.html"/>

</url>


</urlset>


总结:

道理还是和hrefang的原理是一样的,具体使用,就记住

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"  xmlns:xhtml="http://www.w3.org/1999/xhtml">*解释:把这个理解成规则,所有的内容要在规则里使用,并且有结束标签。


<url>*解释:这里理解成一个页面url地址设置开始的标记,不需要填写任何东西在此处,记住有开始就有结尾,对应好即可。

<loc>*解释:这里是放网站原本url地址子元素,并且只能放一个url地址,有结尾,需注意对应!

<xhtml:link rel="alternate" hreflang="语言/区域代码1" href="相应的语言url地址1"/>*这里是使用方法,并且记住至少放一个

<xhtml:link rel="alternate" hreflang="语言/区域代码2"

href="相应的语言url地址2"/>

...

</loc>*解释:这是结尾,对应开头loc标签

</url>*解释:这是结尾,对应开头url标签

</urlset>*解释:这是结尾,对应开头urlset标签