Building multilingual sites in Umbraco with Vorto
I am currently planning out how to build a multilingual site in Umbraco. The site will be in English and Spanish, with 1:1 translation for each piece of content with a language picker that will link matching content for each page. Also, for SEO purposes, this will be hosted on a single domain with sub-directories for each language (sitename.com/en and sitename.com/es) instead of separate subdomains (en.sitename.com and es.sitename.com).
In the past I designed multilingual Umbraco sites in which each language had a home node and the entire structure was replicated. For linking matching content, I used relationships to link matching content. For this project, I decided to go with Vorto.
Vorto is a property editor wrapper (meaning it wraps any existing property editor) and converts it into a multilingual property by allowing you to enter multiple values per language enabled on the site. Ultimately, it's THE property editor for doing 1:1 translations in Umbraco.
As this is a new approach for us, I decided to build out a ‘proof-of-concept’ site to make sure that it will work as needed.
Vorto itself is very easy to use. After installing Vorto and adding Spanish as the second language (the normal Umbraco language settings in Settings > Language), I created Vorto data types to wrap each data type I planned to use and then I added them to a test Document Type. Vorto has a nice user interface with a small menu for switching between languages.
Typically one defines a culture for each hostname when adding hostnames to the home node (right click on home node and select “Culture and Hostnames” to add a domain with a language). In this scenario, you just need to update your templates to call GetVortoValue(), an extension method of IPublishedContent). Vorto will automatically return the value based on the current culture as determined by the domain. You can also pass in the culture name as a parameter to get a specific value.
In my case, I cannot rely on the culture of the hostname setting, because I need to host the different languages as sub-directories on the same domain. It might be possible to set the hostnames setting for the home node as “sitename.com/en” and “sitename.com/es” but the Umbraco UI warns against it and I’m not sure how it would handle the domain root.
The method I used, which seems to work well, is to create a ContentFinder that sets the correct culture and content node based on the path. The implementation turns out to be relatively simple and involves looking at the first segment of the request path to determine the correct culture and then using the rest of the path to get the correct IPublishedContent.
There is one potential problem with this implementation which is that both languages are using the same node names for their paths. For instance, while I may want the English version of a news page to be “/en/news”, I would ideally use the Spanish word noticias for the Spanish version (“/es/noticias”). I have some ideas how I might solve this problem, but I’m going to check with our SEO expert to see if it is really needed for my current project. It may not be as I believe the focus of our SEO is on English content. If it is needed, I’ll hopefully post a follow up with a clever solution.