如何基于Shopify页面主URL正确配置hreflang标签？

你的核心问题在于：代码里直接使用canonical_url变量，但Weglot默认会将主语言（德语）的URL设为canonical地址，导致无论当前页面是英文还是德文版本，所有hreflang标签的href都基于德语URL生成，最终造成德语版URL成为所有标签的默认值。另外你的代码里存在笔误，比如hreflang="de-ch"对应的href错误写成了.com/de-us。

方案1：利用Weglot内置变量生成（推荐） #

Weglot会在Shopify模板中注入weglot对象，包含当前语言、各语言对应页面URL等信息，用它可以自动生成准确的hreflang标签，无需手动拼接：

{% if weglot %}
  <!-- 遍历所有配置的语言，生成alternate标签 -->
  {% for lang in weglot.languages %}
    <link rel="alternate" hreflang="{{ lang.code }}" href="{{ lang.url }}" />
  {% endfor %}
  <!-- 设置x-default为德语主站（可根据需求调整） -->
  <link rel="alternate" hreflang="x-default" href="{{ weglot.original_url }}" />
{% endif %}

这个方法的优势是Weglot会自动维护各语言的URL映射，避免手动拼接出错，同时适配所有页面（包括产品页、博客页等动态页面）。

方案2：手动判断当前语言路径 #

如果不想依赖Weglot变量，可以通过判断当前URL是否包含英文路径/en，动态获取页面的基础URL，再拼接各语言路径：

{% capture base_page_url %}
  {% if request.path contains '/en' %}
    {{ canonical_url | replace: '/en', '' }}
  {% else %}
    {{ canonical_url }}
  {% endif %}
{% endcapture %}

<!-- 生成各语言的hreflang标签 -->
<link rel="alternate" hreflang="de" href="{{ base_page_url }}">
<link rel="alternate" hreflang="en" href="{{ base_page_url }}/en">
<link rel="alternate" hreflang="x-default" href="{{ base_page_url }}">
<link rel="alternate" hreflang="de-ch" href="{{ base_page_url }}/de-ch">
<link rel="alternate" hreflang="en-ch" href="{{ base_page_url }}/en-ch">
<link rel="alternate" hreflang="de-gb" href="{{ base_page_url }}/de-gb">
<link rel="alternate" hreflang="en-gb" href="{{ base_page_url }}/en-gb">
<link rel="alternate" hreflang="de-us" href="{{ base_page_url }}/de-us">
<link rel="alternate" hreflang="en-us" href="{{ base_page_url }}/en-us">

注意：该方法需要确保Weglot的语言路径配置和你拼接的一致（比如英文是/en，德语瑞士是/de-ch等），同时修正了之前的笔误。

额外提示 #

Weglot后台本身自带自动生成hreflang标签的功能，你可以进入Weglot的SEO设置页面，开启「自动添加hreflang标签」选项，这样无需手动编写代码就能完成配置，是最省心的方式。

内容的提问来源于stack exchange，提问作者Ariful Islam