Hreflang Tags

Hreflang tags tell search engines which language and regional versions of a page exist. Wash automatically generates hreflang data for multilingual WordPress sites syncing to Shopify.

What are Hreflang Tags?

Hreflang is an HTML attribute that tells search engines:

Which language a page is written in
Which geographic region it targets
Where to find alternate language versions

Example Hreflang Tags

<link rel="alternate" hreflang="en" href="https://store.com/blogs/news/article" />
<link rel="alternate" hreflang="de" href="https://store.com/de/blogs/news/article" />
<link rel="alternate" hreflang="fr" href="https://store.com/fr/blogs/news/article" />
<link rel="alternate" hreflang="x-default" href="https://store.com/blogs/news/article" />

Why Hreflang Matters for SEO

Without Hreflang	With Hreflang
Search engines may show wrong language version	Correct language shown to each user
Duplicate content penalties possible	Search engines understand it's translations
Users land on wrong language pages	Users see content in their language
Wasted crawl budget	Efficient crawling of all versions

Supported WordPress Plugins

Wash extracts hreflang data from popular multilingual plugins:

Plugin	Support	Notes
WPML	Full	Language codes, translations, default language
Polylang	Full	Language slugs, translation links
TranslatePress	Full	URL-based language detection
Weglot	Partial	API-based translation URLs

Enabling Hreflang Sync

Step 1: Enable in WordPress

Go to Wash > Settings > Hreflangs
Toggle Enable Hreflang Sync to On
Select your multilingual plugin from the dropdown
Save Changes

Step 2: Configure in Shopify App

Open the Wash app in Shopify Admin
Go to Connection Settings > Hreflangs
Enable Hreflang Generation
Configure your default language

How It Works

WordPress (WPML/Polylang)
        ↓
Wash detects translations
        ↓
Hreflang data stored in metafields
        ↓
Shopify theme renders tags

Metafield Structure

Hreflang data is stored in article metafields:

Metafield Key	Type	Example Value
`hreflang_tags`	JSON	`[{"lang": "en", "url": "..."}, {"lang": "de", "url": "..."}]`
`content_language`	String	`en`
`default_language`	String	`en`

Displaying in Shopify Theme

Theme.liquid (in `<head>`)

{%- if template contains 'article' -%}
  {%- assign hreflangs = article.metafields.wash.hreflang_tags -%}
  {%- if hreflangs -%}
    {%- for tag in hreflangs -%}
      <link rel="alternate" hreflang="{{ tag.lang }}" href="{{ tag.url }}" />
    {%- endfor -%}
  {%- endif -%}
{%- endif -%}

With x-default Fallback

{%- if template contains 'article' -%}
  {%- assign hreflangs = article.metafields.wash.hreflang_tags -%}
  {%- assign default_lang = article.metafields.wash.default_language | default: 'en' -%}
  {%- if hreflangs -%}
    {%- for tag in hreflangs -%}
      <link rel="alternate" hreflang="{{ tag.lang }}" href="{{ tag.url }}" />
      {%- if tag.lang == default_lang -%}
        <link rel="alternate" hreflang="x-default" href="{{ tag.url }}" />
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
{%- endif -%}

Language Codes

Use ISO 639-1 language codes, optionally with ISO 3166-1 region:

Code	Language	Region
`en`	English	Global
`en-US`	English	United States
`en-GB`	English	United Kingdom
`de`	German	Global
`de-AT`	German	Austria
`fr`	French	Global
`es`	Spanish	Global
`x-default`	Fallback	No match

Shopify Markets Integration

If you use Shopify Markets for internationalization:

Configure market domains in Shopify Admin
Wash will use market URLs in hreflang tags
Each market's articles get correct language URLs

Example with Shopify Markets

// Shopify Markets configuration:
// - Primary: mystore.com (en)
// - Germany: mystore.com/de-de (de)
// - France: mystore.com/fr (fr)

// Generated hreflang:
<link rel="alternate" hreflang="en" href="https://mystore.com/blogs/news/article" />
<link rel="alternate" hreflang="de" href="https://mystore.com/de-de/blogs/news/article" />
<link rel="alternate" hreflang="fr" href="https://mystore.com/fr/blogs/news/article" />

Troubleshooting

Hreflang Tags Not Appearing

Verify hreflang sync is enabled in WordPress
Check that multilingual plugin is detected
Ensure article has translations in WordPress
Re-sync the article after enabling

Wrong Language Codes

Check your multilingual plugin's language settings
Verify ISO language codes are correct
Update Wash settings if codes changed

Validation Tools

Hreflang Tags Testing Tool
Google Search Console — International Targeting
Browser DevTools — Check <head> for link tags

Best Practices

Always include x-default — Fallback for unmatched languages
Use consistent URLs — Same URL format across all languages
Include self-referencing — Each page should reference itself
Bidirectional linking — All translations must link to each other
Canonical consistency — Canonical URL should match hreflang