Hreflang Tags in Webflow: Step-by-Step Setup for International SEO

To add hreflang tags in Webflow, the easiest method is to use Webflow Localization (Site Settings → Localization). Webflow auto-generates hreflang tags for each enabled locale. For sites not using Localization, add hreflang tags manually in Page Settings → Custom Code → Inside head, with one <link rel="alternate"> per language variant plus an x-default fallback.

Hreflang tags tell Google which language and region each version of your page targets. They prevent duplicate content issues across language variants and ensure users see the right version of your site in their local search results. Webflow supports hreflang two ways: automatically through Webflow Localization, or manually via custom head code.

This guide covers both methods, the common mistakes to avoid, and how to validate your setup with Google Search Console.

What Are Hreflang Tags?

Hreflang tags are HTML attributes that specify the language and optional geographic targeting of web pages. The tag format looks like:

<link rel="alternate" hreflang="en-us" href="https://example.com/" />

How does hreflang help search engines?

Hreflang understands relationships between translated or localized content versions. When users in France search Google, hreflang tells Google to serve the French version rather than the English version of your page.

Language vs locale targeting distinction affects implementation:

• Language only (e.g., "en" for English): targets all English speakers globally.
• Language + locale (e.g., "en-us" for English-United States): Targets English speakers specifically in the US.
• Use language+locale when content differs by region (pricing, availability, cultural adaptation).

Duplicate content prevention occurs automatically through proper hreflang. Search engines understand translated pages aren't duplicates but intentional alternatives for different audiences, preventing SEO penalties.

Why Hreflang Matters for Webflow Sites

International market opportunity remains largely inactive. Only 25% of internet users speak English, meaning businesses without multilingual sites ignore 75% of potential global customers.

SEO benefits from hreflang:

• Better rankings in target language search results.
• Improved click-through rates from language-appropriate listings.
• Reduced bounce rates from properly targeted traffic.
• Higher user engagement from native-language content.

User experience enhancement through automatic language detection creates seamless international browsing. Users see content in their language without manual selection, improving satisfaction and conversion rate.

Revenue impact statistics demonstrate compelling business value. Businesses implementing proper multilingual SEO with hreflang see average revenue increases of 40-60% within the first year of international expansion.

Webflow's Native Localization vs Manual Implementation

Webflow Localization Feature (Automatic)

Native localization overview represents Webflow's enterprise-grade solution launched in late 2023, providing integrated multilingual capabilities directly in the Designer and CMS.

Automatic hreflang generation eliminates manual coding. Webflow creates proper hreflang tags automatically for all localized pages, maintaining bidirectional links and self-referencing requirements without developer intervention.

SEO-optimized subfolder structure (example.com/fr/, example.com/de/) consolidates domain authority while clearly indicating language targeting. This approach outperforms subdomains or separate ccTLDs for most businesses.

Benefits and limitations:

• Benefits: Zero coding required, automatic maintenance, performance optimized, integrated workflow
• Limitations: Requires CMS or Business+ plan, limited to Webflow-supported locales, less granular control (though April 2025 update improved this)

Manual Hreflang Implementation

When manual implementation:

• Sites on Basic plans without Localization access
• Multi-project setups (separate Webflow projects per language)
• Custom locale combinations not in Webflow's preset list
• Legacy sites requiring specific hreflang configurations

The custom code approach adds hreflang tags to page head sections through Webflow's custom code features. This method provides complete control but requires technical knowledge and ongoing maintenance.

The XML sitemap method centralizes hreflang in sitemap files rather than individual pages. Best for large multilingual sites where page-level tags would increase load times.

Multi-project scenarios complicate hreflang because different Webflow projects cannot directly communicate. Manual implementation coordinates hreflang across separate projects.

Method 1: How to add hreflang tags using Webflow Localization

Let's start with the first method using Webflow localization. Localization in Webflow refers to the process of adapting your website's content and design to suit different languages, cultures, and regional expectations.

Setting Up Webflow Localization

Set up the Webflow localization setting here.

Enabling localization in site settings:

1. Open your Webflow project.
2. Navigate to Site Settings (gear icon).
3. Select "Localization" in left sidebar.
4. Click "Enable Localization" button.
5. Accept localization requirements and confirmations.

Adding language locales:

1. Click "Add locale" in Localization settings.
2. Select a language from the dropdown (50+ languages supported).
3. Optionally specify a regional variant (en-US, en-GB, en-AU).
4. Configure the locale display name for the language switcher.
5. Repeat for all target language.

Configuring primary language:

1. Select a primary locale from existing options.
2. Primary becomes "x-default" in hreflang tags.
3. All other locales reference primary as alternate.
4. Content in the primary language serves as a translation base.

Setting up language switcher:

1. Drag the "Locale Switcher" component from the Add panel.
2. Style dropdown or custom design.
3. Webflow handles redirect logic automatically.
4. Test switcher functionality across pages.

How Webflow Generates Hreflang

Let's generate the Webflow hreflang here.

The automatic tag generation process:

1. Webflow analyzes enabled locales.
2. Creates hreflang tags for each localized page.
3. Adds tags to the HTML `<head>` section automatically.
4. Maintains proper bidirectional linking.
5. Updates tags when locales change.

Subfolder URL structure:

• Primary language: `example.com/about/`
• French version: `example.com/fr/about/`
• German version: `example.com/de/about/`
• Spanish version: `example.com/es/about/`

Self-referencing tags appear on every localized page:

<!-- On English page (example.com/about/) -->
<link rel="alternate" hreflang="en" href="https://example.com/about/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/about/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about/" />

The x-default implementation uses the primary language as a fallback for users whose language isn't available.

How to add hreflang tags manually in Webflow (without Localization)

Here is the second method of hreflang implementation.

Adding Hreflang to Page Head Section

Accessing custom code settings:

1. Select the page in Webflow Designer.
2. Open Page Settings (gear icon).
3. Navigate to "Custom Code" tab.
4. Scroll to "Head Code" section.

HTML head code example:

<!-- English US page -->
<link rel="alternate" hreflang="en-us" href="https://example.com/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

Complete hreflang tag structure includes:

• `rel="alternate"`: Indicates alternate version exists
• `hreflang="LANG-REGION"`: Specifies language and optional region
• `href="URL"`: Full URL to alternate version.

Self-referencing requirements mandate each page include a tag pointing to itself plus all alternates.

Hreflang Tag Syntax and Format

Language-only codes use ISO 639-1 two-letter codes:

• `en` = English (all regions).
• `fr` = French (all regions).
• `de` = German (all regions).
• `es` = Spanish (all regions).
• `ja` = Japanese.

Language + locale codes combine ISO 639-1 language with ISO 3166-1 Alpha-2 country:

• `en-us` = English for United States
• `en-gb` = English for United Kingdom
• `en-ca` = English for Canada
• `fr-fr` = French for France
• `fr-ca` = French for Canada
• `es-es` = Spanish for Spain
• `es-mx` = Spanish for Mexico

X-default tag implementation designates fallback version:

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

Use x-default for:

• Global homepage without specific targeting
• Default language when user's language unavailable
• Primary market or most common visitor language.

Alternate tag relationships must be bidirectional. Every page in the hreflang cluster must reference all other pages, including itself.

Dynamic CMS Page Implementation

Collection template custom code enables hreflang on dynamic pages:

1. Open Collection Template in Designer
2. Access Collection Page Settings
3. Navigate to Custom Code > Head Code
4. Add hreflang tags with CMS field dynamic values

Dynamic hreflang with CMS fields approach:

<!-- Assuming CMS fields: english-url, french-url, german-url -->
<link rel="alternate" hreflang="en" href="[DYNAMIC: english-url]" />
<link rel="alternate" hreflang="fr" href="[DYNAMIC: french-url]" />
<link rel="alternate" hreflang="de" href="[DYNAMIC: german-url]" />
<link rel="alternate" hreflang="x-default" href="[DYNAMIC: english-url]" />

Reference field approach links related language versions:

1. Create reference field in collection pointing to same collection
2. Name field descriptively (e.g., "french-version", "german-version")
3. Link each item to corresponding language versions
4. Use reference field URLs in hreflang tags dynamically.

Bulk implementation strategies for large CMS collections:

1. Use consistent URL patterns across languages.
2. Implement programmatic hreflang generation.
3. Export CMS, add hreflang URLs in spreadsheet, reimport
4. Consider API for large-scale automation.

Code Examples and Templates

Basic hreflang cluster example (3 languages):

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

<!-- On French page -->

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

Multi-language implementation (5+ languages):

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

Regional variant examples:

<!-- English variants -->
<link rel="alternate" hreflang="en-us" href="https://example.com/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/" />
<link rel="alternate" hreflang="en-ca" href="https://example.com/ca/" />
<link rel="alternate" hreflang="en-au" href="https://example.com/au/" />

<!-- Spanish variants -->
<link rel="alternate" hreflang="es-es" href="https://example.com/es/" />
<link rel="alternate" hreflang="es-mx" href="https://example.com/mx/" />
<link rel="alternate" hreflang="es-ar" href="https://example.com/ar/" />

<!-- French variants -->
<link rel="alternate" hreflang="fr-fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="fr-ca" href="https://example.com/fr-ca/" />

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

Method 3: XML Sitemap Implementation

Here is the third method of hreflang implementation.

When to Use Sitemap Method

Large-scale multilingual sites (100+ pages per language) benefit from sitemap hreflang to avoid excessive HTML `<head>` tags that slow page load.

Performance optimization through the sitemap method reduces per-page overhead. Instead of dozens of hreflang tags per page, consolidate all annotations in a central sitemap.

Centralized management benefits simplify maintenance. Update the sitemap once rather than modifying hundreds of individual pages.

Creating Hreflang Sitemap

XML sitemap structure with hreflang annotations:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  
  <url>
    <loc>https://example.com/page/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/page/" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/page/" />
    <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/page/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/page/" />
  </url>
  
  <url>
    <loc>https://example.com/fr/page/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/page/" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/page/" />
    <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/page/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/page/" />
  </url>
  
</urlset>

‍

Hreflang annotation format in sitemaps requires xhtml namespace declaration and bidirectional entries for all language versions.

Using Screaming Frog to generate hreflang sitemap:

1. Crawl all language versions of site
2. Use Screaming Frog's Hreflang feature
3. Export XML sitemap with hreflang annotations
4. Upload to Webflow hosting via custom sitemap

Uploading custom sitemap to Webflow:

1. Create custom XML sitemap file
2. Host file at /sitemap.xml or subdirectory
3. Reference in robots.txt
4. Submit to Google Search Console
5. Monitor for errors

Hreflang Best Practices for Webflow

Essential Hreflang Implementation Rules

Bidirectional linking requirement means every page must link to all alternates, including itself. If the English page links to French, French must link back to English.

Self-referencing tags on every page include hreflang pointing to page itself:

<!-- On English page at example.com/ -->
<link rel="alternate" hreflang="en" href="https://example.com/" />

X-Default Tag Strategy

The purpose of x-default is to provide a fallback for unmatched language/region combinations. When a visitor's language is unavailable, search engines serve the x-default version.

Choosing fallback language considerations:

• Primary market language.
• Most internationally understood language (often English).
• Language with the most complete content.
• Homepage or language selector page.

Global audience targeting through x-default:

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

URL Structure for International SEO

Subfolder vs Subdomain vs ccTLD

Subfolder advantages (example.com/fr/):

• Consolidates domain authority.
• Easier to manage and maintain.
• Better for most businesses.
• Webflow native localization uses this approach.
• Cost-effective (single domain).

Subdomain considerations (fr.example.com):

• A separate subdomain is treated as a separate site by Google.
• Dilutes domain authority.
• More complex management.
• Useful for completely separate regional operations.
• Third-party tools often use subdomains.

Country-code TLD approach (.fr, .de, .co.uk):

• Strongest geographic signal.
• Requires separate domain purchases.
• Complex management across multiple domains.
• Necessary for some government or regulatory scenarios.
• Most expensive option.

Webflow's Subfolder Implementation

SEO authority consolidation through subfolder structure concentrates all language versions' SEO value into a single domain, strengthening overall site authority.

Easy management benefits from maintaining all languages in a single Webflow project. Update designs once, and deploy across all locales simultaneously.

Localized slug configuration allows custom URL slugs per language:

• English: `/products/blue-widget/`
• French: `/fr/produits/widget-bleu/`
• German: `/de/produkte/blaues-widget/`
• Improves local SEO and user experience

URL structure best practices:

• Keep slugs descriptive in target language
• Use hyphens, not underscores
• Avoid special characters
• Maintain consistent patterns
• Keep URLs short when possible

Advanced Hreflang Examples

Multiple Languages Same Country

Targeting en-ca and fr-ca for the Canadian market requires both English and French versions with country-specific locale codes.

Regional language preferences like Switzerland (de-ch, fr-ch, it-ch) or Belgium (nl-be, fr-be) require multiple versions for a single country.

Implementation method:

<!-- Canada - English and French -->
<link rel="alternate" hreflang="en-ca" href="https://example.com/ca/" />
<link rel="alternate" hreflang="fr-ca" href="https://example.com/fr-ca/" />
<link rel="alternate" hreflang="en-us" href="https://example.com/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

User language detection through browser language or IP-based geolocation can automatically serve appropriate version.

Same Language Multiple Countries

English for US, UK, AU requires regional variants when content differs (pricing, availability, legal).

Spanish for ES and LATAM distinguishes European Spanish from Latin American variants.

When locale matters:

• Different pricing or currency
• Regional product availability
• Legal/regulatory variations
• Cultural adaptation needs

X-default strategy for same-language scenarios:

<link rel="alternate" hreflang="en-us" href="https://example.com/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/" />
<link rel="alternate" hreflang="en-au" href="https://example.com/au/" />
<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

Conclusion

Implementing hreflang tags in Webflow unlocks global market opportunities by ensuring search engines serve correct language versions to target audiences. The three methods covered—Webflow Localization automatic generation, manual custom code implementation, and XML sitemap approaches—serve different needs and complexity levels.

Webflow Localization provides the most streamlined path for new multilingual sites, handling hreflang automatically with optimal subfolder structure. The April 2025 update added flexibility with custom base URL URLs disable options, addressing advanced use cases.

Manual implementation serves legacy sites, multi-project scenarios, and situations requiring granular control. While more complex, manual hreflang provides complete flexibility for custom international SEO strategies.

Ready to expand globally with hreflang implementation that drives international visibility and revenue growth? theCSS Agency specializes in comprehensive international SEO for Webflow, combining technical expertise with strategic market understanding. Our proven process ensures flawless hreflang implementation while maximizing ROI from international expansion.

‍Schedule your international SEO consultation today and discover how professional hreflang implementation can unlock your global market potential and deliver measurable international growth.

FAQs

1. Does Webflow add hreflang tags automatically?

Only if you're using Webflow Localization. With Localization enabled, Webflow injects hreflang tags into every page's head automatically and keeps them in sync with your enabled locales. Without Localization, you must add hreflang tags manually in each page's custom head code.

2. What's the difference between hreflang and the lang attribute in Webflow?

The HTML lang attribute (on the <html> tag) declares the language of a single page for accessibility tools and browsers. Hreflang tags tell search engines about all language variants of the same page. Both are needed for international SEO they serve different purposes.

3. How do I validate hreflang tags in Webflow?

After publishing, use the Google Search Console "International Targeting" report to detect hreflang errors, or run your URLs through Merkle's free Hreflang Tags Testing Tool. The most common issues are missing reciprocal tags and using country codes (like UK) instead of ISO codes (like GB).