Ever searched for something and landed on a website in a language you don’t understand? That’s what happens to your customers when hreflang tags aren’t set up correctly. These simple bits of code tell Google which version of your store to show based on someone’s language or location.
If you sell in multiple languages or regions, getting this right means more customers see your store in their preferred language—and fewer bounce away in confusion.
Good News: Shopify Often Handles This Automatically
Before diving into manual setup, check if you even need to do anything. Shopify automatically adds hreflang tags in these situations:
- You’re using Shopify Markets with multiple languages
- You’ve added languages through Shopify’s built-in translation features
- Your store is on the Basic plan or higher with a compatible theme
Shopify also includes all published languages in your sitemaps automatically.
When you DO need manual hreflang tags:
- You have multiple separate Shopify stores for different countries (not using Shopify Markets)
- You’re using a third-party translation app that doesn’t handle hreflang
- Google Search Console is showing hreflang errors
How Hreflang Tags Work (Plain English)
Hreflang tags are lines of code that say: “This page exists in other languages/regions—here’s where to find them.”
For example, if you have a product page in English, Spanish, and French, you’d have three hreflang tags on each version pointing to all three. This tells Google:
- “Show the English version to English speakers”
- “Show the Spanish version to Spanish speakers”
- “Show the French version to French speakers”
Without these tags, Google might show the wrong version, or worse, think your translated pages are duplicate content.
How to Add Hreflang Tags Manually
If you’ve confirmed you need manual tags, here’s how to add them:
Step 1: Access Your Theme Code
- Go to Online Store → Themes
- Click the three dots (…) next to your theme and select Edit code
- Find and open
theme.liquidin the Layout folder
Step 2: Add the Tags
Find the <head> section and add your hreflang tags. Here’s what they look like:
<!-- English version (default) -->
<link rel="alternate" hreflang="en" href="https://your-store.com/products/example-product" />
<!-- Spanish version -->
<link rel="alternate" hreflang="es" href="https://your-store.com/es/products/example-product" />
<!-- French version -->
<link rel="alternate" hreflang="fr" href="https://your-store.com/fr/products/example-product" />
<!-- Default fallback for other languages -->
<link rel="alternate" hreflang="x-default" href="https://your-store.com/products/example-product" />Understanding the codes:
en= English (any region)en-GB= English for UK specificallyes= Spanish (any region)es-MX= Spanish for Mexico specificallyx-default= The fallback version for anyone not matching other tags
Step 3: Make It Dynamic (Recommended)
Hard-coding URLs for every page isn’t practical. For a real store, you’d use Shopify Liquid to generate these dynamically. This is more complex and typically requires a developer, but here’s the concept:
{% for locale in shop.published_locales %}
<link rel="alternate" hreflang="{{ locale.iso_code }}" href="{{ canonical_url | replace: request.locale.iso_code, locale.iso_code }}" />
{% endfor %}This automatically creates hreflang tags for all your published languages.
The Easier Option: Use an App
Manual hreflang implementation is error-prone and time-consuming. If you have multiple stores or complex language setups, consider apps that handle this automatically:
- GWA Hreflang Manager — connects multiple Shopify stores and manages hreflang between them
- Weglot — translation app that includes automatic hreflang
- Langify — another translation option with hreflang support
Apps cost money but save hours of manual work and reduce the risk of errors that could hurt your SEO.
How to Check If Your Hreflang Tags Are Working
Method 1: View page source
- Visit any page on your store
- Right-click and select “View Page Source”
- Search for “hreflang” (Ctrl+F or Cmd+F)
- You should see your hreflang tags in the
<head>section
Method 2: Google Search Console
- Go to Google Search Console
- Use the URL Inspection tool
- Enter a page URL and click “Test Live URL”
- Check “More info” for hreflang details
Method 3: Free online tools
Tools like Ahrefs’ free hreflang tag checker or Merkle’s hreflang tag testing tool can validate your implementation.
Common Mistakes to Avoid
- Missing return tags: If page A points to page B, page B must also point back to page A
- Wrong language codes: Use ISO 639-1 codes (en, es, fr)—not full words
- Forgetting x-default: Always include a fallback for visitors who don’t match any specific version
- HTTP vs HTTPS mismatch: URLs in hreflang tags must exactly match your actual URLs
A Note About the Future
Google has hinted at potentially moving toward automatic language detection rather than relying on hreflang tags. Nothing is confirmed yet, but it’s worth knowing that the landscape may change. For now, proper hreflang implementation remains the recommended approach for international SEO.
For more detailed guidance, check Shopify’s multilingual store documentation and Google’s official hreflang documentation.
Author
