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

列印頁面