如何在 WordPress 中添加 hreflang 標籤

已發表: 2023-02-12

您正在構建一個支持多種語言和地區的網站嗎? 多語言網站可以成倍地擴大您的潛在受眾,但也似乎難以管理。

好消息是添加 hreflang 標籤可以改善您網站的搜索引擎優化 (SEO) 和用戶體驗 (UX)。 這並不難實現,您可以快速開始從增加的流量和參與度中獲益。

在本文中,我們將了解什麼是 hreflang 標籤,以及使用它們的一些最佳實踐。 然後,我們將揭示可用於在您的 WordPress 網站上實施這些標籤的方法。 讓我們開始工作吧!

目錄
1.什麼是hreflang?
2. hreflang 和您的多語言站點:最佳實踐
3.如何在WordPress上實現hreflang標籤
3.1. hreflang 插件
3.2. 將 hreflang 添加到 <head>
3.3. 將 hreflang 添加到 XML 站點地圖
4.如何在 WordPress 上驗證 hreflang
5.繼續學習 WP Engine

什麼是 hreflang?

hreflang 標籤是 HTML 代碼,它告訴 Google 為某些語言和地區顯示哪個版本的網頁。 這是該代碼的示例:

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

每個標籤都包括語言和位置詳細信息的組合,例如“en-us”代表英語和美國,“fr-fr”代表法語和法國。

雖然 Google 可以檢測網頁的語言,但沒有 hreflang 標籤仍然會損害您的搜索排名。 這是因為如果沒有這些標籤,您的不同語言的頁面最終可能會相互競爭以獲得最高排名。 雖然 hreflang 標籤本身並不是排名因素,但它們確實可以幫助 Google 為用戶提供正確的頁面。

hreflang 和您的多語言網站:最佳實踐

您可以通過 WordPress 多語言網站覆蓋更廣泛的受眾,但您需要實施某些最佳實踐才能獲得結果。 此類網站的最佳做法之一是使用 hreflang 標籤,但也有其他智能技術。

為了獲得最佳用戶體驗,明智的做法是使用母語人士編寫的內容,而不是機器翻譯的文本。 另一個最佳實踐是對不匹配的語言使用可選的 x-default 標籤。 這應該用在主頁上,用戶可以在主頁上選擇他們想要的位置和語言。

如果您的網站使用規範標籤,則在添加 hreflang 標籤時也需要小心。 這兩種類型的標籤可能會發生衝突,向 Google 發送有關應顯示哪個頁面的混合信號。 雖然您可以在具有規範標籤的頁面上保留 hreflang 標籤,但最好小心地簡單地添加語言標籤。

如何在 WordPress 上實現 hreflang 標籤

hreflang 標籤在 WordPress 網站上是無價的,但前提是正確實施。 您可以使用三種方法將這些標籤添加到您的網站。 插件是最簡單和最常用的方法。 但是,您也可以更新網站的標頭,或編輯其 XML 站點地圖。 讓我們看看這三種技術。

hreflang 插件

hreflang 實現的最簡單方法是使用 WordPress 插件。 像 MultilingualPress 這樣的插件會自動為你添加 hreflang 標籤,並且不會導致任何性能問題:

MultilingualPress 還有一個翻譯功能,可以在帖子編輯器中找到。 當您接受翻譯時,該插件會將適當的 hreflang 標籤添加到您網站的標題中。 翻譯功能不僅限於帖子,還適用於標籤和類別,同時還可以與 Yoast 和 WooCommerce 等插件很好地同步。

hreflang 實現的另一個插件選項是 Polylang:

Polylang 是一種流行的免費工具,可幫助您管理多種語言的 WordPress 網站。 您可以照常創建內容,然後為其分配一種語言。 之後,Polylang 將為您處理 hreflang 標籤。

將 hreflang 添加到 <head>

通過更新header.php文件,您可以在沒有插件的情況下將 hreflang 標籤添加到您的 WordPress 網站。 要訪問此文件,您需要導航至外觀>主題編輯器,或使用文件傳輸協議 (FTP)。

打開文件後,您需要查找<head>打開器並粘貼此代碼:

<link rel="canonical" href="http://example.com/content"/>
<link rel="alternate" hreflang="x-default" href="http://example.com/content"/>
<link rel="alternate" hreflang="en-us" href="http://example.com/content"/>
<link rel="alternate" hreflang="es-es" href="http://example.com/es/content"/>
<link rel="alternate" hreflang="fr-fr" href="http://example.com/fr/content"/>

在此示例中,需要將標籤添加到英語內容。 x-default 和英文 hreflang 標籤也指向英文內容頁面。

另一方面,西班牙語和法語 hreflang 標籤重定向到頁面的正確語言版本。 當然,您可以為網站上使用的任何其他語言添加更多 hreflang 標籤。

將 hreflang 添加到 XML 站點地圖

如果您不想編輯header.php文件,則可以改為更新站點的 XML 站點地圖。 使用此方法可確保 Google 找到您的替代語言頁面並正確索引它們。 更新站點地圖還可以減小網頁的大小,從而縮短加載時間。

XML 站點地圖的 hreflang 標籤略有不同:

<url>
<loc>http://www.example.com/content</loc>
<xhtml:link rel="alternate" hreflang="es-es" href="http//www.example.com/es/content"/>
<xhtml:link rel="alternate" hreflang="fr-fr" href="http//www.example.com/fr/content"/>
</url>
<url>
<loc>http://www.example.com/es/content</loc>
<xhtml:link rel="alternate" hreflang="en-us" href="http//www.example.com/content"/>
<xhtml:link rel="alternate" hreflang="fr-fr" href="http//www.example.com/fr/content"/>
</url>

雖然編輯 XML 站點地圖有助於建立索引,但它也會變得複雜。 如果您的網站很大,站點地圖可能會變得臃腫。 將 hreflang 標籤添加到站點地圖也可能比使用上述其他方法花費更長的時間。

如何在 WordPress 上驗證 hreflang

即使包含在內,hreflang 標籤在多語言網站上的實施也經常不正確。 驗證您的 hreflang 標籤可以幫助您確定是否已正確添加它們。

要驗證標籤,您可以使用各種在線工具。 這些工具提供類似的信息,但以不同的方式呈現。 Sitrix 的 hreflang 標籤測試工具會在您的網站上顯示標籤,並讓您知道是否有任何錯誤:

Merke 的 hreflang 標籤測試工具還提供了您網站上標籤和錯誤的分類:

但是,如果您只想查看錯誤,SALT.agency 的 hreflang 標籤測試工具是另一種選擇。

繼續學習 WP Engine

如果您的網站包含多種語言的內容,hreflang 標籤將幫助 Google 將正確的頁面提供給正確的訪問者。 幸運的是,有多種方法可以將 hreflang 標籤添加到您的網站,最簡單的選擇是安裝專用插件。

如果您在運行多語言網站的任何其他方面遇到困難,WP Engine 致力於幫助您找到所需的資源。 看看我們今天的計劃!