Country / Language Redirects Not Working Correctly

Support
, , ,
1

Hi! I hope you are all doing well :slight_smile:

First off, kudos to the entire Netlify team on an incredible product/platform. While I admittedly struggled at first to figure out how exactly everything works, I have gotten used to things, and I love it all.

I have a silly question, because I feel like I must be doing something wrong here and the answer is obvious but I am overthinking it hahaha.

Long story short, I have configured a few different redirects on my site (i.e. en-gb, en-ca, en-us, etc.). I have included two examples from my Netlify.toml file at the bottom of this post. Every redirect I have in there is configured in the exact same manner.

The issue I realized is if someone matches one of the redirect rules, it is impossible for them to visit a different country-specific or language-specific version of the site.

For example, someone in the United Kingdom will be redirected to domain.com/en-gb. But if they want to visit the Canadian or American versions of the site, they can’t. As if they use the country / language switcher, they will be redirected to domain.com/en-gb/en-ca.

With all that said, am I doing something wrong here and if so, is there a way for this to be fixed with Netlify? If not, do you know if it is possible through a DNS provider like Cloudflare for example?

I guess what I essentially need, using that above example again, is to switch en-gb to en-ca. Instead of having en-gb being appended before en-ca.

I feel like this must be possible. Otherwise, sites like Stripe and Shopify which have a country/language switcher would run into this same issue. Though I fully realize they more than likely have miles of code that control their respective solutions.

Thank you SO much in advance for your help!

[[redirects]]

    from = "/*"
    to = "/en-gb/:splat"
    status = 301
    force = false
    conditions = {Country = ["UK"]}

[[redirects]]

    from = "/*"
    to = "/en-us/:splat"
    status = 301
    force = false
    conditions = {Language = ["en"], Country = ["US"]}
3

The only (easy) way I can think of to handle this is that, use links relative to the root of the site. For example:

If you have this structure:

/en-gb/about/index.html
/en-ca/about/index.html
... and so on

In your site, always make sure you link to /about/ on all pages! So, /en-gb/some-page/ would also have the link pointing to /about/ and /en-ca/some-page/ would also have the link pointing to /about/. The /about/ page would actually not exist, and it would only exist as /en-gb/about/index.html and /en-ca/about/index.html.

Why this would work:

Whenever you send a request to /about/, our redirects engine would try to detect the language and redirect to /code/about/ just like you’ve specified in your redirect rules.

If you wish to allow someone to change this language without relying on automatic language detection, you need to make sure that you set the nf_lang cookie as soon as someone changes the language and then you send a request to Netlify to process this.

1 Like
4

Hey @hrishikesh!

Thank you so much for the quick response; my apologies for my delayed reply.

I think I have figured it out, but I was hoping you could have a look to make sure everything is good. As I feel like something might be off, but I just might not be looking in the wrong place haha.

This is the link to a page where I currently have the redirect: Webhook Generator - Evil Twins.

You will notice in the top left that is the dropdown which allows the user to switch their language/country. I have two different types of conditional redirects, one based on language only (i.e. Italian) and one based on language and country (i.e. French Canada).

This is the code I have for the dropdown: https://codepen.io/nocodebenny/pen/oNyvoVR?editors=0010. Figured it would be easier to share it as a Codepen, instead of making this post really long.

You will notice I structured it as an if statement so that if a user selects just a language (i.e. Italian), only the nf_lang cookie is set.

However, I noticed that if I have webhook.html in the root of my domain, then the redirects no longer work, unless I set force to true for the redirects. But that in turn creates a new issue where the links to all the assets break.

So as of right now, I have deleted the webhook.html file in the root and set a fallback redirect rule where if a user doesn’t match any rules, they are sent to /en-us/webhook.

My question is, in your opinion, is this the best approach? I was hoping to have this - /webhook - as the default/fallback page instead of - /en-us/webhook. But, it isn’t the end of the world if I’m stuck having the latter one as my default/fallback page.

I’m assuming if I really want to have /webhook as my default/fallback page, then my only option is to have my assets served from a subdomain (i.e. cdn.eviltwins.studio). So that when I set the redirects to force = true, the asset links are not rewritten. Looking at the code of websites like Stripe, Shopify and Square, they do this as well.

Of course, the other option is to duplicate all the assets and put them in their respective lang/country folders. But I’m sure you would agree that would make doing styling, imaging, etc., updates a long process.

Admittedly, I’m only hesitant to have my assets under a subdomain because I like the speed bonus associated with a user’s browser only needing to make a single request. But I now feel like the difference would be so small that a user could not really notice.

7

Hey @nocodebenny,

There can be multiple ways to handle this. For example:

You can put the webhook.html file inside path/webhook.html and instead, add a redirect like this at the end:

[[redirects]]
  force = false
  from = "/webhook"
  to = "/path/webhook"
  status = 200

OR

Simply redirect users to a fallback language (like en-US) if they don’t match any other condition.

OR

Put all your assets in a single folder and add a redirect rule like this on the top:

[[redirects]]
  force = true
  from = "/assets/*"
  to = "/assets/:splat"
  status = 200
1 Like
8

Hey @hrishikesh,

Thank you so much for providing all those solutions.

I realized I have another issue that will undoubtedly cause any site I have to run into issues with search engines.

Ideally, I would like to set up a redirect like this with the force set to true - /*, so every page is redirected accordingly. Otherwise, I will end up needing hundreds of redirects in my netlify.toml file for each individual page.

But, something I realized is a redirect like that would make it impossible for search engine crawlers to get the sitemap.xml and robots.txt pages. As those pages would no longer be reachable from my root domain, whatever country the crawlers originate from would be redirected (i.e. domain.com/en-us/sitemap.xml). I was thinking I could simply have those two pages in each folder, but that would make it challenging to update each one and you are heavily penalized for having multiple sitemaps. Do you know by any chance of a way around this?

Thank you so much for your help thus far with everything.

9

Did you try to add a redirect like:

[[redirects]]
  force = true
  from = "/sitemap.xml"
  to = "/sitemap.xml"
  status = 200

and see if it works?

10

Hey @hrishikesh!

Sorry for the delayed reply, I wanted to configure things on my end first. I think I have figured it out? haha.

Here is the link: Webhook Generator - Evil Twins. Is there any way you can check the Netlify.toml file from your end to double check everything is configured as it should be?

I did what you suggested and added a 200 redirect from /webhook → en-us/webhook, at the bottom so it comes after the language / country redirects.

I also added a forced redirect below that rule, that sends any visitor from /en-us/* → /:splat.

Please correct me if I’m wrong, but going forward:

  • If I would like to have a page be redirected based on the lang/country (i.e. eviltwins.studio/en-ca/webhook), then I should add a copy to each of the respective path folders.

  • If I do NOT want the page to be redirected, then simply adding the file to the root will cause no redirect to take place since the force is set to false.

  • If I want BOTH to take place, then I should follow how things are currently configured. Add the page to each of the respective path folders, do not have it present in the root, and add a 200 redirect at the bottom.

Please let me know if I have that correct and thank you so much for all your help with this.

11

Hey @nocodebenny , we’ve taken a look at your netlify.toml file and as far as we can tell, things look like they’re set up correctly. Please let us know if you see any issues or need help with anything else!

1 Like
12

Thank you SO much, @amelia!