Hreflang tags help Shopify Plus stores show the right content to users based on their language and location. If your store targets multiple regions or languages, these tags ensure visitors see the correct version of your site, improving their experience and boosting SEO.
Key Benefits of Hreflang Tags:
- Direct users to region-specific content (e.g., en-AU for Australia, en-NZ for New Zealand).
- Show accurate pricing, shipping, and product details for each market.
- Improve search visibility for localised content.
How to Add Hreflang Tags:
- Manual Method: Insert tags into the
<head>section of your theme files. - Dynamic Method: Use Shopify Liquid code to generate tags automatically.
- Test Tags: Validate using Google Search Console and other tools.
Common Mistakes to Avoid:
- Missing self-referential and return links.
- Using incorrect language-region codes.
- Inconsistent URLs or tag placement.
Hreflang tags are essential for stores targeting global markets. Proper implementation ensures customers see the right content, driving better engagement and sales.
What Hreflang Tags Do
Hreflang tags are HTML attributes that tell search engines which language and regional version of your Shopify Plus store’s content to show users. They ensure visitors are directed to the right version of your site based on their location and language settings.
Basic Structure and Function
Hreflang tags follow a specific HTML format that includes both language and region codes. Here’s an example:
<link rel="alternate" hreflang="en-AU" href="https://example.com.au/product" />
<link rel="alternate" hreflang="en-NZ" href="https://example.com.nz/product" />
Each tag includes:
- rel=”alternate”: Indicates an alternate version of the page.
- hreflang: Specifies the language and region (e.g., “en-AU” for English in Australia).
- href: Points to the URL for that specific language-region version.
This setup helps search engines connect users to the right content for their preferences.
Advantages for Shopify Plus Stores
- Better search visibility: Search engines can display the right language-region version in search results.
- Improved user experience: Visitors are shown content that matches their language and location.
Shopify Plus’s multi-store setup works well with hreflang tags. For instance, a product page can feature localised language variations, such as regional spellings, ensuring content aligns with the audience’s expectations. This approach boosts both search accuracy and user satisfaction.
Next, we’ll cover how to add these tags to your Shopify Plus store.
How to Add Hreflang Tags to Shopify Plus
Before You Start
Make sure you have the following ready:
- A list of all market variations
- URLs for each market
- Access to your theme files
- A clear mapping of content to markets
Manual Tag Implementation
To manually add hreflang tags, follow these steps:
- In your Shopify admin, go to Online Store > Themes > Actions > Edit code.
- Open the
theme.liquidfile. - Locate the
<head>section and add your hreflang tags before the closing</head>tag.
Here’s an example for an Australian store targeting multiple regions:
<head>
<!-- Your existing head content -->
<link rel="alternate" hreflang="en-AU" href="https://yourstore.com.au{{ request.path }}" />
<link rel="alternate" hreflang="en-NZ" href="https://yourstore.co.nz{{ request.path }}" />
<link rel="alternate" hreflang="x-default" href="https://yourstore.com{{ request.path }}" />
</head>
Dynamic Tag Generation
For a more flexible approach, use Shopify Liquid to dynamically generate hreflang tags:
{% if template contains 'product' %}
{% assign current_handle = product.handle %}
{% elsif template contains 'collection' %}
{% assign current_handle = collection.handle %}
{% endif %}
{% for market in shop.enabled_markets %}
<link rel="alternate"
hreflang="{{ market.language.iso_code }}-{{ market.country.iso_code }}"
href="{{ market.url }}{{ current_handle }}" />
{% endfor %}
This method ensures your tags automatically update based on your store’s active markets, making international targeting easier to manage.
Testing Your Tags
After implementation, test your hreflang tags using these methods:
- Manual Check
- Confirm all language-region tags are present and their URLs are correct.
- Ensure the x-default tag is correctly placed.
- Technical Validation
- Use Google Search Console’s International Targeting report.
- Check tags using browser developer tools.
- Test with online hreflang validation tools.
- Functional Testing
- Ensure tags update correctly as you navigate your site.
- Verify the URLs are valid.
- Check that region-specific content loads correctly.
Once your tags are tested and working, review best practices to avoid common errors.
sbb-itb-19747f8
Guidelines and Common Mistakes
Key Rules for Hreflang Tags
To ensure hreflang tags work as intended, follow these important rules:
- Self-Referential Links: Each page should include a self-referential hreflang tag. For example, the Australian page should have an
en-AUtag pointing to itself. This helps search engines correctly index each version. - Return Links: All hreflang tags must be bidirectional. If Page A links to Page B, Page B must also link back to Page A.
- Language-Region Specificity: Use precise language-region codes for better targeting. For instance, an Australian store should use:
<link rel="alternate" hreflang="en-AU" href="https://example.com.au/products" />
- X-default Usage: Use the
x-defaulttag for pages that don’t target a specific language or region, such as a global landing page:
<link rel="alternate" hreflang="x-default" href="https://example.com/products" />
Mistakes to Avoid
Even with the right approach, these common errors can undermine your efforts:
- ISO Language and Country Codes: Always use standardised codes. Here’s how to get it right:
| Incorrect Format | Correct Format | Example URL |
|---|---|---|
| en-aus | en-AU | yourstore.com.au |
| english-AU | en-AU | yourstore.com.au |
| en_AU | en-AU | yourstore.com.au |
- URL and Reference Consistency:
- Don’t skip self-referential tags.
- Ensure URLs match exactly across hreflang tags, including trailing slashes, protocols (http/https), and whether or not to use “www.”
- Technical Implementation:
- Place hreflang tags inside the
<head>section of your HTML. - Avoid duplicate language-region combinations.
- Don’t leave out any language version; all must be accounted for.
- Place hreflang tags inside the
- Market-Specific Considerations:
- Don’t mix currency selectors with language targeting.
- Set up proper redirects tailored to specific markets.
- Ensure every market has full language coverage.
- Provide alternate URLs for all landing pages.
Paying attention to these details ensures your international SEO strategy stays effective.
Advanced Hreflang Techniques
Expanding on manual and dynamic methods, these advanced approaches can improve the efficiency of your international SEO strategy.
Automatic Tag Management
Use automation to keep hreflang tags accurate and up-to-date. Here’s an example of Liquid code for Shopify:
{% if template contains 'product' %}
{% for variant in product.variants %}
{% if variant.metafields.custom.hreflang %}
<link rel="alternate" hreflang="{{ variant.metafields.custom.hreflang }}"
href="{{ variant.metafields.custom.alternate_url }}" />
{% endif %}
{% endfor %}
{% endif %}
Add this code to your theme’s theme.liquid file in the <head> section. Make sure your Shopify Markets settings are in sync with these updates.
Working with Shopify Markets
Proper Shopify Markets configuration is key to aligning with your hreflang setup. Here’s an example:
| Market Region | Language Code | Domain Structure | Currency |
|---|---|---|---|
| Australia | en-AU | .com.au | AUD |
| New Zealand | en-NZ | .co.nz | NZD |
| Singapore | en-SG | .com.sg | SGD |
Steps for each market:
- Set up specific domains or subdomains
- Configure the appropriate currencies and languages
- Map URLs to match your hreflang strategy
- Enable automatic language detection for a smoother user experience
Once configured, ensure regular updates to maintain performance.
Regular Tag Maintenance
Stay on top of hreflang tags with a structured approach:
Weekly Tasks:
- Confirm reciprocal tag relationships
- Check for crawl errors in Google Search Console
- Review any newly added markets
Monthly Tasks:
- Ensure URL structures remain consistent
- Update language-region mappings
- Double-check tag syntax across all templates
Quarterly Tasks:
- Evaluate international traffic trends
- Measure performance in different markets
- Adjust automation rules if necessary
Set up alerts for key changes, such as:
- Adding new markets
- Modifying URL structures
- Updating language variants
- Implementing redirects
To validate your hreflang setup, use tools like:
- Google Search Console
- Screaming Frog SEO Spider
- DeepCrawl
Keep a detailed log of all changes to your hreflang setup. This will help you track the impact on international SEO and quickly resolve any issues.
Wrapping Up
Getting hreflang tags right on your Shopify Plus store plays a big role in improving international SEO and delivering localised content to your audience. While setting them up takes careful attention, the long-term rewards make it worth the effort.
After the initial setup, keeping things running smoothly requires regular maintenance. Monitoring and using automated tools to manage tags can help keep your strategy on track.
Here are some key points to keep in mind:
- Ensure the tag syntax is correct and reciprocal relationships are properly set up.
- Align your hreflang tags with your Shopify Markets settings.
- Check for tag consistency and crawl errors on a weekly basis.
- Analyse international traffic and market data every quarter.
Are you ready to elevate your online business to the next level? With automation, easy customisation, and multi-channel adaptability, Alinga’s Shopify Plus integration will help grow your e-commerce business. Our team of experts ensures that your setup is smooth future-ready, and fits every requirement. Let’s explore how Alinga can transform your Shopify platform into an effective sales tool, get in touch with us right away!
