Hreflang 实现深度解析:面向开发者的技术指南

Hreflang 实现是国际化 SEO 中技术难度最高的环节之一。本指南面向开发者,涵盖实现方法、校验、调试与自动化。

Hreflang 的三条规则

  1. 双向性:如果页面 A 引用了页面 B,那么页面 B 也必须引用页面 A
  2. 自引用:每个页面都必须包含一个指向其自身的 hreflang 标签
  3. 完整性:每个语言版本都必须引用所有其他版本,包括其自身

实现方法

方法一:HTML link 标签

<head>
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="de" href="https://example.com/de/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

方法二:XML 站点地图

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/en/product-a</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/product-a" />
    <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/produkt-a" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/product-a" />
  </url>
</urlset>

方法三:HTTP 响应头

HTTP/1.1 200 OK
Link: <https://example.com/en/>; rel="alternate"; hreflang="en",
      <https://example.com/de/>; rel="alternate"; hreflang="de",
      <https://example.com/>; rel="alternate"; hreflang="x-default"

在 Node.js 中自动生成 Hreflang

function generateHreflang(baseUrl, locales, currentPath) {
  const hreflangTags = locales.map(locale => {
    const href = `${baseUrl}/${locale}${currentPath}`;
    return `<link rel="alternate" hreflang="${locale}" href="${href}" />`;
  });
  hreflangTags.push(
    `<link rel="alternate" hreflang="x-default" href="${baseUrl}/en${currentPath}" />`
  );
  return hreflangTags.join("\n  ");
}

Hreflang 校验脚本

import requests
from bs4 import BeautifulSoup
import json

class HreflangValidator:
    def __init__(self, base_url, locales):
        self.base_url = base_url
        self.locales = locales
        self.issues = []

    def validate_page(self, url):
        try:
            resp = requests.get(url, timeout=15)
            soup = BeautifulSoup(resp.text, "html.parser")
            hreflang_tags = []
            for link in soup.find_all("link", rel="alternate"):
                hreflang = link.get("hreflang")
                href = link.get("href")
                if hreflang:
                    hreflang_tags.append({"lang": hreflang, "href": href})
            return self._check_issues(url, hreflang_tags)
        except Exception as e:
            self.issues.append({"url": url, "error": str(e)})
            return False

    def _check_issues(self, url, tags):
        langs = {t["lang"] for t in tags}
        if "x-default" not in langs:
            self.issues.append({"url": url, "issue": "Missing x-default"})
        for tag in tags:
            if tag["href"] and not tag["href"].startswith("http"):
                self.issues.append({"url": url, "issue": "Relative URL in hreflang"})
        return len(self.issues) == 0

结语

完美的 hreflang 实现需要一套系统化的方法:选择正确的实现方式、自动化生成,并定期校验。