How to build a multilingual site in Umbraco

How languages work in Umbraco

Umbraco keeps one content tree. Each page holds a version per language (Umbraco calls them cultures). Editors switch language at the top of the editor, and every language gets its own URL.

Step 1: Add your languages

Go to Settings › Languages › Create, and add each language, for example English (United Kingdom) and Danish. Choose which one is the default.

Step 2: Let content vary by culture

1. Open each document type under Settings › Document Types.
2. In the Settings view, turn on Allow vary by culture.
3. On each property that should be translated, such as titles and body text, turn on Vary by culture. Leave it off for things that are the same everywhere, such as a product SKU or an image.
4. Save.

Editors now see a language switcher in the content editor and can publish each language separately.

Step 3: Give each language its own URL

Open the actions menu (…) on your home page, choose Culture and Hostnames…, and add a hostname per language:

example.com/en   → English (United Kingdom)
example.com/da   → Danish

Or use separate domains, such as example.co.uk and example.dk. Our domains tutorial covers DNS and hosting.

Step 4: Translate fixed text with the Dictionary

Some text lives in templates, not content, such as "Read more" or a copyright line. Put it in the Dictionary:

1. Go to the Translation section and create an item called Footer.Copyright.
2. Enter the text for each language.
3. Use it in Razor:

<p>@Umbraco.GetDictionaryValue("Footer.Copyright")</p>

Step 5: A language switcher

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@inject Umbraco.Cms.Core.Services.ILanguageService LanguageService
@{
    var languages = await LanguageService.GetAllAsync();
}
<ul class="languages">
    @foreach (var language in languages)
    {
        if (Model.Cultures.ContainsKey(language.IsoCode))
        {
            <li><a href="@Model.Url(language.IsoCode)" hreflang="@language.IsoCode">@language.CultureName</a></li>
        }
    }
</ul>

Model.Cultures only contains languages the page is published in, so the switcher never links to an untranslated page.

Don't forget SEO

Add hreflang links in your <head> so search engines show the right language to the right people:

@foreach (var culture in Model.Cultures.Keys)
{
    <link rel="alternate" hreflang="@culture" href="@Model.Url(culture, Umbraco.Cms.Core.Models.PublishedContent.UrlMode.Absolute)">
}