von Christoph Kaun Wednesday, 29th July 2015

Umbraco: How can I create a multilingual page and redirect the user to the favored language?

Let's create a website with two languages: Our mainsite will be German and our second page will be English. All examples are shown with the Internet Information Services 8 by Microsoft with the module URL Rewrite 2.0.

The parameter that is crucial is the favored browser language of the user. The user is able to change the language of every browser. The only exception is Internet Explorer that is using the operating System language.

What is our goal?

 

The remote address in my example is: "http://www.lundp.de".

When a user's browser language is German: Redirect the user to German page ("http://www.lundp.de").

When the browser language is not German: Redirect the user to the English page ("http://www.lundp.de/en").

Preparing our Umbraco BackOffice

 

We need a German and an English Umbraco page. I will simply use Umbraco's starterkit "Fanoe" and copy the "Home"-node and rename them to "Home_de" and "Home_en". Right-click on our "Home_de"-node and choose "Culture and Hostnames". I can add new domains to this page.

 

Domain names for our rewrite rule

 

Our german page has four domains. We need to edit the domains of our English page. We right-click the "Home_en"-node and select "Culture and Hostnames". We are able to add "www.lundp.de/en" and "lundp.de/en" as Domains. We don't need to edit the language of our domains. It's not relevant for our rewrite rule.

Why do we need those two extra domains on our german page?

 

The user should have the option to change from our English page to the German page manually. For this reason we create an anker-tag in the upper right corner on our Lewald & Partner page.

 

multilingual anker for umbraco

 

The anker redirects to "http://www.lundp.de/de". Later, when we set up the rewrite rule, we only would like the rule to be triggered on "http://www.lundp.de". Without the extra "/de" in our anker, the rule would be re-executed and the user would be redirected to the English page.

Why not Javascript/jQuery?

 

When I build the Lewald & Partner website, I used firstly a script to redirect the user but I run into two problems:

 

  • Some users have installed script block add-ons or have completely deactivate javascript
  • The script needs to be put on a page. If we put it on our German page the browser of an English user will first load parts of our german page and then direct him to the English one. We also can create a blank landing page with the script only and some <noscript> though this isn't he best solution either.

URL Rewrite Module for Microsofts Internet Information Services (IIS)

 

Here comes the URL Rewrite 2.0 module which gives us a server sided option to set up redirect rules for our server.

Installation of URL Rewrite 2.0 module

 

When we open the IIS, we select the "Web Platform Installer" (see green square) and search for "URL Rewrite". The first result should be the URL Rewrite 2.0 module. After we've downloaded and installed the module, we'll find it in our IIS (see blue sqare).

 

installation of url rewrite module for iis 8

To create our rule: If the language is not German, redirect to English page.

 

When working with the URL Rewrite module, we should be aware of the following:

We can create a rewrite rule only for one website or for our entire server. If we create a rule for our entire server, the rule will be applied to every website.

Later, the user will get directed to a sub-URL "/en" when his language is not German. If we have more than one website on our server and not everyone has a subpage with a "/en" address, the user will be still redirected and will get a 404-not-available http-error. I recommend to create this rewrite rule for one website only.

 

Let's create our rule: Open the URL Rewrite interface and click on "Add Rule(s)" and create a blank rule.

 

Rewrite Rule for multilingual webpage in umbraco

 

The pattern gets compared with the URL. Let's say our page has the address "http://www.lundp.de/lovely-blog-post". Our host address would be "www.lundp.de" and our URL "/lovely-blog-post".

The rule should only be executed on our host address. The URL needs to be empty.

 

"^" stands for "Beginning of string".

"$" stands for "End of string".

 

Basically "^$" means "At the beginning of string to the end of string should be nothing".

 

rewrite conditions for multilingual umbraco page

 

Now, we create our conditions:

 

When "{HTTP_ACCEPT_LANGUAGE}" does not match the pattern "^de" rewrite URL to "/en".

The server variable "{HTTP_ACCEPT_LANGUAGE}" returns a string of languages. The prefered one is at the beginning.

 

An example: We have an user from Austria and she speaks German as well as English. Her string "{HTTP_ACCEPT_LANGUAGE}" would be "de-AT,en-EN".

 

We already learned that "^" means "Beginning of string". We only check if "de" is at the beginning.

The action property should be a "Rewrite" to the URL "/en".

 

rewrite rule code

 

All changes and rules you create with URL Rewrite will be set inside of the web.config file. If you would like to add the code for the rule above, here you go:

<rewrite>
<rules>
<rule name="ToEnglishPage" enabled="true" stopProcessing="true">
<match url="^$"></match>
<conditions>
<add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^de" negate="true"></add>
</conditions>
<action type="Redirect" url="/en"></action>
</rule>
</rules>
</rewrite>
Send us a comment, feedback or a question.



Follow us legal notice Contact info@lundp.de | +49-5131-4932-0