Setting up hreflang for a Webflow CMS multi-locale site
Three ways to get hreflang right on a Webflow store with CMS-driven multi-locale pages. Code-ready snippets, the slug-prefix trap, and how to verify Google is reading your tags.
Your Webflow store has a German version. The German pages exist. You assume Google will figure out that /product/blue-mug and /product/de-blue-mug are the same product in two languages.
This post walks through what hreflang is, three ways to add it to a Webflow CMS multi-locale site, the slug-prefix trap that breaks the obvious approach, and how to verify Google is actually reading your tags.
What hreflang is and why Google needs it
Hreflang is an HTML link tag that lives in your page's <head>. Its job is to tell Google: "this
page has a German alternate version over there, a Dutch alternate over there, a French alternate over there, and the
English source is here."
It looks like this:
<link rel="alternate" hreflang="en" href="https://your-site.com/product/blue-mug" />
<link rel="alternate" hreflang="de" href="https://your-site.com/product/de-blue-mug" />
<link rel="alternate" hreflang="nl" href="https://your-site.com/product/nl-blue-mug" />
<link rel="alternate" hreflang="x-default" href="https://your-site.com/product/blue-mug" />Three things to notice:
- Every locale, including the source, gets a tag.
- The tag lives on every page in the set. The German page also lists itself plus the English and Dutch alternates.
x-defaultis the fallback for users whose locale doesn't match any of your tagged ones.
- Google treats your German page as a duplicate of the English page and refuses to rank either.
- Google shows the English page to a German searcher because it doesn't know there's a German version, costing you the click.
- Ranking signals (backlinks, time-on-page) get split across the two pages instead of consolidated.
Hreflang fixes all three. It's a non-negotiable for multi-locale SEO.
Three ways to add hreflang on Webflow
All three are valid. Pick based on how you've structured your multi-locale site.
Method 1: Webflow's native Localization (automatic)
The catch: as of mid-2026, Webflow's native Localization doesn't cover Ecommerce products or SKU variants. So for static and CMS pages it handles hreflang natively; for your product catalog you need one of the other two methods.
Method 2: StoreLingo Automatic mode (no code, no manual paste)
<link rel="alternate"> tags into the head. You don't write the code. You don't paste anything into Designer.
Add a locale in StoreLingo, publish, the script auto-updates on the next page render with the new locale included.
Google does honour JS-injected hreflang. The indexing is slightly slower than server-rendered tags (days instead of hours), which is essentially never a meaningful difference for ecommerce SEO timelines. If you want server-rendered tags specifically, see Method 3.
More detail: SEO and hreflang.
Method 3: Hand-rolled in Webflow Designer Custom Code
The DIY path. Open Webflow Designer, click your CMS Collection page in the Pages panel, go to Custom Code, paste the
hreflang block into the <head> code box. Use Webflow's "Add field" picker to interpolate the current
CMS item's slug.
The raw snippet (before Webflow field interpolation):
<link rel="alternate" hreflang="en" href="https://your-site.com/product/SLUG" />
<link rel="alternate" hreflang="de" href="https://your-site.com/product/de-SLUG" />
<link rel="alternate" hreflang="nl" href="https://your-site.com/product/nl-SLUG" />
<link rel="alternate" hreflang="x-default" href="https://your-site.com/product/SLUG" />
Replace every SLUG with the Slug field via Webflow's Add Field picker. Webflow will substitute the current
item's slug at render time.
de-), Webflow interpolates the CURRENT slug,
which is already de-blue-mug. The hreflang for German becomes /product/de-de-blue-mug,
which doesn't exist.
Three fixes, in order of cleanness
- Conditional visibility on the link tags. Add a Webflow conditional that hides the wrong-prefix link
when the slug starts with
de-,nl-, etc. Tedious but works. - A separate Webflow Collection just for locales. Create a "Locales" collection with one item per locale.
Use a Collection List inside the head code that emits one
<link>per locale. Now adding a locale = adding a Locales row, no code change. - Use Method 2. StoreLingo's script handles the slug-stripping logic automatically. The slug-prefix trap is the reason Method 2 exists.
Which method should you pick?
| If you... | Pick |
|---|---|
| use Webflow's native Localization for static pages | Method 1 (automatic) |
| translate products with StoreLingo | Method 2 (automatic) |
| want server-rendered tags and have time to wire it | Method 3 |
| have a small static site, no Ecommerce | Method 1 |
| care about indexing speed more than anything else | Method 1 or 3 |
How to verify hreflang is working
Three quick checks:
1. View source on a translated page
https://your-site.com/product/de-blue-mug in your browser. Right-click, View Page Source. Search for
alternate. You should see at minimum two link tags: one pointing at the English alternate, one pointing
at itself.
For Method 2 (StoreLingo Automatic) you'll see a <script> tag in the source AND the alternate link
tags injected after JS runs. View Source shows only the script; DevTools Elements panel shows the live DOM including the
link tags.
2. Submit to Google Search Console
In GSC, submit your sitemap. Within a few days, the URL Inspection tool will show whether Google has read your hreflang annotations and whether they're "valid."
The "International Targeting" report in GSC (under Legacy Tools) shows hreflang errors at the site level. If you see "no return tag" errors, your alternate pages don't list each other back. Fix by ensuring every page in the set has the full link block.
3. Use a hreflang validator
Tools like Aleyda's hreflang tester or hreflang.org let you paste a URL and see if the tags are present, valid, and reciprocating.
What hreflang doesn't do
Hreflang tells Google which version to show to which audience. It does not:
- Improve your content quality. Bad German translation will still rank badly.
- Replace your sitemap. You still need every locale's URLs in
sitemap.xml. - Fix canonical conflicts. If your German product has a canonical pointing at the English URL, hreflang can't save you.
- Boost rankings in absolute terms. It distributes existing rankings to the right locale; it doesn't create new rankings.
Common mistakes we see
- Forgetting to include self-referencing tags. The German page must list itself as the German alternate.
- Wrong locale code. Use ISO 639-1 (
de, notger). Regional codes useen-GB, noten_GB. - Hreflang on pages that have a canonical override. If your German page's canonical points at the English URL, hreflang gets ignored.
- Same hreflang block on every page regardless of slug. Each page should reference the per-item slug.
- Trusting the tool blindly. View source on one product after first publish. Five minutes of verification beats a month of bad rankings.
Hreflang is one of those SEO requirements that's invisible when it works and painful when it doesn't.
We build StoreLingo: a Webflow Marketplace app for Ecommerce localization that writes real translated CMS rows back into the customer's own Webflow site. Everything in this post comes from shipping the product: actual Webflow Data API behavior, actual bugs we tripped on (and fixed), actual decisions we had to make about Strategy A duplicate-row architecture vs runtime overlay. We have no relationship with Weglot, Linguana, or Webflow other than as developer-API consumers. If we got something wrong, email hello@storelingo.com and we will fix the post within a business day.
Translate your Webflow store. Own every word of it.
StoreLingo writes real translated CMS rows into your own Webflow site. Flat pricing. Automatic hreflang. SKU variants done right. Pages survive uninstall.