HTML - hreflang 属性_HTML 菜鸟教程

HTML hreflang 属性用于指定链接文档或 URL 的语言。

仅当指定了 href 属性时，它才起作用，否则不会。HTML hreflang 标签用于告诉搜索引擎不同语言的同一页面的不同版本。这有助于搜索引擎根据用户的语言偏好向他们提供正确版本的页面。

语法

<a hreflang = "value"></a>

其中 value 是语言的两个字母代码。

适用于

下面列出的元素允许使用 HTML hreflang 属性

元素	描述
<a>	HTML <a> 标签用于通过链接到网页来附加外部资源。
<link>	HTML <link> 标签指定当前文档与外部资源之间的关系。
<area>	HTML <area> 标签指定了图像的区域、可以单击的映射或通过超链接链接到的活动区域。

HTML hreflang 属性示例

以下示例将说明 HTML href 属性，我们应该在何处以及如何使用此属性！

使用 hreflang 指定英语语言

在以下示例中，我们将在 <a> 元素中使用 HTML hreflang = 'en' 属性来指定提供的超链接语言为英语。

<!DOCTYPE html>
<html lang="en">

<body>
	 <h3>Example of HTML 'hreflang' attribute</h3>
	 <p>
			Below link will redirect 
			you to QikepuCom
	 </p>
	 <a href="/index.htm" hreflang="en">
			Click here!
	 </a>
</body>

</html>

hreflang 属性指定样式表的语言

考虑到另一种情况，我们将使用带有链接标签的 hreflang 属性来将 CSS 样式表的语言指定为英语。

<!DOCTYPE html>
<html lang="en">
	 <head>
	 <title>Example of hreflang Attribute</title>
	 <link rel="alternate" 
				 hreflang="en" 
				 href="styles.css" />
	 </head>
</html>

style.css

* {
	 margin: 0;
	 padding: 0;
	 border: 0 solid transparent;
	 }
	 
	 html {
	 -webkit-text-size-adjust: 100%;
	 }
	 
	 body {
	 min-height: 100vh;
	 line-height: 1;
	 text-rendering: optimizeSpeed;
	 }

Hreflang 属性内部区域标签

在这个例子中，我们在区域地图中使用 hreflang 属性，我们根据点击的图像部分进行重定向。这里 hreflang 的所有值都是英文（en），因为我们重定向的所有网站也是英文的。

<!DOCTYPE html>
<html lang="en">

<body>
	 <h1>Welcome to our interactive map!</h1>
	 <p>
			Click on a region to visit the 
			respective language page:
	 </p>
	 <img src="/html/images/lang.jpg" 
				usemap="#langmap" 
				alt="World Map" />

	 <map name="langmap">
			<area shape="rect" 
						coords="0,0,180,165" 
						alt="HTML" 
						href="html/index.htm" 
						target="_blank" 
						hreflang="en" />
			<area shape="rect" 
						coords="180,0,375,167" 
						alt="JavaScript" 
						href="javascript/index.htm" 
						target="_blank" 
						hreflang="en" />
			<area shape="rect" 
						coords="0,166,180,338" 
						alt="PHP" 
						href="/php/index.htm" 
						target="_blank" hreflang="en" />
			<area shape="rect" 
						coords="180,165,375,338" 
						alt="ReactJS" 
						href="reactjs/index.htm" 
						target="_blank" 
						hreflang="en" />
	 </map>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - href 属性 HTML - http-equiv 属性 >>