HTML - hreflang 属性

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 Tutorialspoint
   </p>
   <a href="/index.htm" hreflang="en">
      Click here!
   </a>
</body>

</html>

hreflang 属性用于指定样式表的语言

考虑另一种情况，我们将使用 hreflang 属性与 link 标签一起指定 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;
   }

area 标签内的 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>

支持的浏览器

属性
hreflang	是	是	是	是	是

html_attributes_reference.htm

打印页面