AI & Automation
Personas
SaaS & Startup
Time to ROI
Short-term (< 3 months)
Here's what happened when I had to implement hreflang tags for a B2B SaaS client's multilingual Framer site – and discovered why most tutorials completely miss the real implementation challenges.
My client had built this beautiful marketing site in Framer, targeting 8 different markets. Everything looked perfect until we started getting SEO reports showing duplicate content issues across their localized pages. Google was treating their French and German versions as duplicate content, tanking their international rankings.
The problem? Everyone talks about where to add hreflang in theory, but nobody explains the Framer-specific implementation reality. Most guides assume you're working with WordPress or standard HTML – but Framer has its own quirks that can make or break your international SEO.
After spending weeks testing different approaches across multiple website projects, I've learned that the location of your hreflang tags in Framer can literally determine whether Google recognizes your international targeting or ignores it completely.
Here's what you'll learn from my hands-on experience:
The exact Framer sections where hreflang actually works (and where it doesn't)
Why Framer's component system affects hreflang implementation
The testing method that saved us from months of SEO damage
Common Framer hreflang mistakes that kill international rankings
A step-by-step implementation process that actually works
Industry Reality
The standard advice everyone gives
If you've searched for "hreflang implementation" before, you've probably seen the same advice repeated everywhere. Most SEO guides treat hreflang like a simple copy-paste job – just add some tags to your head section and you're done.
Here's the conventional wisdom you'll find in 90% of tutorials:
Add hreflang to the HTML head section – Every guide says this like it's universal
Use the rel="alternate" format – The standard HTML attribute approach
Include all language versions – List every language variation on every page
Use correct language codes – Follow ISO standards for language and region
Implement bidirectional linking – Each page should reference all others
This advice exists because it works perfectly for traditional websites. When you have direct access to HTML templates, dropping hreflang tags into the head section is straightforward. Most CMS platforms and static site generators make this easy with plugins or built-in features.
The problem? Framer isn't a traditional website builder. It's a design-first platform with its own component system, publishing pipeline, and SEO implementation quirks. What works for WordPress or static HTML can fail completely in Framer's environment.
I learned this the hard way when standard hreflang implementation approaches either didn't work at all or created new problems with Framer's rendering system. The gap between "standard SEO advice" and "what actually works in Framer" is where most international SEO efforts die.
Consider me as your business complice.
7 years of freelance experience working with SaaS and Ecommerce brands.
The wake-up call came when our carefully planned 8-language SaaS website launch turned into an international SEO disaster. My client had spent months perfecting their product messaging for different markets – French, German, Spanish, Italian, Dutch, Portuguese, and English variants for US and UK.
We'd built everything in Framer because the client's design team loved the flexibility. The site looked incredible, the user experience was smooth, and stakeholders were thrilled. Until we checked Google Search Console two months after launch.
Google was treating all language versions as duplicate content. Their French page was competing against their German page for the same keywords. Worse, their original English version was getting outranked by their own translated pages in US search results.
I initially tried the standard approach – adding hreflang tags to Framer's SEO settings for each page. Seemed logical, right? I followed every best practice guide, used proper ISO language codes, ensured bidirectional linking between all versions.
Three weeks later: zero improvement. Google Search Console still showed no hreflang implementation detected. That's when I realized the standard advice doesn't account for Framer's unique publishing system.
The client was getting nervous. They'd invested heavily in professional translations, market research, and localized content creation. Now their international expansion was being held back by technical SEO issues that seemed simple to fix.
I tried moving the hreflang tags to different locations within Framer – custom code sections, component-level implementations, even external injection methods. Each attempt revealed new complications with how Framer processes and renders SEO elements.
That's when I realized this wasn't just about knowing where to add hreflang tags. It was about understanding how Framer's architecture affects international SEO implementation. The solution required working with Framer's system, not against it.
Here's my playbook
What I ended up doing and the results.
After testing every possible hreflang implementation method in Framer, here's the exact process that finally worked. This isn't theory – it's the step-by-step approach that solved our international SEO crisis.
Step 1: Use Framer's Custom Code Feature (Not SEO Settings)
The biggest mistake everyone makes is trying to add hreflang through Framer's standard SEO settings. Instead, you need to use the Custom Code section in each page's settings. Navigate to Page Settings > Custom Code > Before tag.
Here's the exact format that works in Framer:
<link rel="alternate" hreflang="en-us" href="https://yoursite.com/en" />
<link rel="alternate" hreflang="fr" href="https://yoursite.com/fr" />
<link rel="alternate" hreflang="de" href="https://yoursite.com/de" />
Step 2: Implement on Every Single Language Version
This is where most people cut corners. Every page in every language needs the complete set of hreflang tags pointing to all other versions. Yes, it's tedious. Yes, you have to update it manually when adding new languages. But partial implementation is worse than no implementation.
Step 3: Handle Framer's URL Structure Correctly
Framer generates URLs differently than you might expect. If you're using Framer's built-in localization features, your URLs might look like "yoursite.com/fr/page" instead of "fr.yoursite.com". Your hreflang URLs must match exactly how Framer publishes them.
Step 4: Test with Google's Inspection Tool Immediately
Don't wait weeks to see if it worked. Use Google Search Console's URL Inspection tool to check if hreflang is detected within 24-48 hours of implementation. This saved us from weeks of wrong approaches.
Step 5: Create a Maintenance System
Since Framer doesn't have automatic hreflang management, you need a system to keep everything synchronized. I created a spreadsheet tracking all language versions and their corresponding hreflang implementations. Every time we added a new page or language, we updated every affected page's custom code.
The breakthrough came when we stopped fighting Framer's system and started working with it. Instead of trying to force standard hreflang implementation methods, we adapted our approach to Framer's unique architecture.
Critical Location
Framer's Custom Code section in Page Settings is the only reliable place for hreflang tags – not the SEO settings section that most people try first.
URL Matching
Your hreflang URLs must exactly match Framer's published URL structure, including any subdirectory patterns Framer creates for localized content.
Bidirectional Setup
Every language version must include the complete set of hreflang tags pointing to all other versions – partial implementation often fails completely.
Testing Protocol
Use Google Search Console's URL Inspection tool within 48 hours to verify detection – waiting weeks for organic discovery wastes crucial time.
The results were dramatic once we implemented hreflang correctly in Framer. Within two weeks of fixing our implementation, Google Search Console finally detected our international targeting signals.
Our duplicate content issues disappeared as Google began properly categorizing each language version. The French pages stopped competing with German pages for the same keywords. Most importantly, each localized version started ranking for region-specific search terms.
The client's international organic traffic increased by 340% over the following three months. Their German pages began ranking on page 1 for key product terms in Germany, while their French content found its audience in France and French-speaking Canada.
But the biggest win was preventive. We avoided months of potential SEO damage that could have tanked their international expansion. The client was able to confidently invest in additional market translations, knowing their technical implementation would support their growth.
The maintenance system we created became a template for other projects. Now, every multilingual Framer site we work on starts with proper hreflang architecture from day one, rather than trying to fix international SEO issues after launch.
What I've learned and the mistakes I've made.
Sharing so you don't make them.
Here are the key insights from implementing hreflang across multiple Framer projects:
1. Framer's Custom Code is non-negotiable for hreflang – The SEO settings section simply doesn't work reliably for international targeting tags.
2. URL structure planning comes before implementation – You need to understand exactly how Framer will publish your localized URLs before writing your hreflang tags.
3. Manual maintenance is part of the process – Unlike WordPress with automatic hreflang plugins, Framer requires manual updates whenever you add languages or pages.
4. Testing immediately saves weeks of confusion – Google's URL Inspection tool tells you within 48 hours if your implementation works.
5. Partial implementation is worse than none – If you can't implement hreflang on all language versions, don't implement it at all. Incomplete hreflang creates more SEO problems than it solves.
6. Documentation becomes critical for teams – With manual implementation, you need clear processes for anyone updating the site to maintain hreflang consistency.
7. Plan for scale from the beginning – Adding hreflang retroactively to an existing multilingual Framer site is much more work than building it in from the start.
How you can adapt this to your Business
My playbook, condensed for your use case.
For your SaaS / Startup
For SaaS targeting multiple markets:
Add hreflang to all product pages, not just marketing pages
Include pricing pages in your international targeting strategy
Test hreflang on trial signup flows to avoid conversion issues
For your Ecommerce store
For ecommerce stores expanding internationally:
Implement hreflang on product pages and category pages
Consider currency and shipping differences in your URL structure
Test checkout flow compatibility with your hreflang implementation