Umbraco SEO: Multilingual Sites

Optimizing Umbraco CMS for Multilingual Content: A Technical Guide with SEO Best Practices

Umbraco CMS is a powerful, flexible platform that allows developers to create feature-rich websites. Umbraco SEO: Multilingual Sites provide a number of features and configurations to ensure a seamless experience for both developers and content editors. Implement multilingual features in Umbraco, with considerations for SEO, with our expert advice for developers and SEO professionals working with Umbraco CMS.

Implementing Multilingual Features in Umbraco

To implement a multilingual site in Umbraco, you need to address two key aspects: content structure and language management. Below is a detailed breakdown of how to set up both.

1. Content Structure and Language Variants

Umbraco offers an in-built solution for managing content in multiple languages using Language Variants. Language variants allow you to define different versions of the same content node in different languages.

Steps to Set Up Language Variants:

1. Define Available Languages:

• Navigate to the Settings section.
• Under Languages, you can add the languages you wish to support (e.g., English, Spanish, French, etc.).
• Umbraco uses ISO codes to identify languages, which helps with search engines indexing the content correctly.

   ILocalizationService localizationService = Services.LocalizationService;
   ILanguage english = localizationService.GetLanguageByIsoCode("en-US");
   ILanguage spanish = localizationService.GetLanguageByIsoCode("es-ES");

2. Configure Content Nodes for Language Variants:
   Each content node can be edited in different languages. When you create a content node, you’ll see a language toggle on the editor screen. Switch between languages and provide the appropriate translations for each piece of content.
3. Fallback and Inheritance:
   Umbraco allows you to configure fallback rules, where content can fall back to a default language if a translation isn’t available. This is essential to maintain UX continuity, preventing blank pages when content is missing in a particular language.

   var content = contentService.GetById(nodeId);
   var cultureVariant = content.GetValue<string>("propertyAlias", "es-ES");

4. Custom Domain Setup:
   For each language, you may set up unique domains or subdomains (e.g., es.yourwebsite.com for Spanish). This not only makes it easier to manage languages but also aids in SEO by associating different languages with unique URLs.

2. Multi-Site Approach (If Needed)

For more complex cases, you might need to set up multiple sites within the same Umbraco instance. This is especially useful for region-based differences in content beyond just translations (e.g., different legal requirements or promotions for different regions).

To implement this, you can create different root nodes for each country or language and assign specific domains to them:

var contentRoot = contentService.CreateContent("Spanish Site", parentId, "homepage", "es-ES");
contentService.Save(contentRoot);

3. Translation Management

Managing translations can be challenging. Umbraco offers integration with external translation services. You can export content in XLIFF format (an XML-based standard for translation data exchange) to translation providers and re-import the translated content back into Umbraco.

Consider using the best Umbraco SEO packages like:

• Translation Manager: Automates workflows for translating content across multiple languages. Translation Manager is currently compatible with Umbraco 13+ (as of 9/16/24).

Umbraco SEO: Multilingual Sites

A well-structured multilingual site is essential not only for user experience but also for SEO. Google and other search engines rely on structured data and specific guidelines to understand language variations.

1. Hreflang Implementation

One of the most critical aspects of multilingual SEO is correctly implementing the hreflang attribute, which tells search engines which version of a page to show to users based on their language preferences.

In Umbraco, you can automate the generation of hreflang tags by using a custom macro or a headless CMS approach. Here’s an example of how you might implement hreflang tags programmatically:

@{
    var languages = Umbraco.LocalizationService.GetAllLanguages();
    foreach (var lang in languages)
    {
        <link rel="alternate" hreflang="@lang.IsoCode" href="@Url.Action("Index", new {lang = lang.IsoCode})" />
    }
}

Make sure that each page includes a hreflang tag for all the language versions it supports, and also provide a fallback (usually your default language).

2. Canonical Tags

When managing multilingual content, you may encounter duplicate content issues. To avoid being penalized by search engines, ensure that each page includes a canonical tag pointing to the primary language version, or use self-referencing canonical tags for each language-specific version.

<link rel="canonical" href="@Url.Action("Index", new {lang = "en"})" />

3. URL Structures and Slugs

SEO-friendly URLs are essential for ranking well. In Umbraco, you can configure language-specific slugs for each page. For example, your English URL might be /about-us, while the Spanish version would be /acerca-de.

Umbraco allows you to control these URLs directly within the content editor interface, making it easier to optimize each language version.

Ensure that you avoid using auto-generated or machine-translated slugs, as they often result in errors or non-optimized URLs.

4. XML Sitemap

A multilingual site should have an XML sitemap for each language version, ensuring that search engines can index all your pages correctly. You can create an XML sitemap in Umbraco either by using a package or by generating it manually. Note: not all Umbraco packages for generating XML sitemaps support multilingual or multisite implementations in Umbraco.

Here’s a basic example of generating a language-specific sitemap:

var sitemapNodes = Umbraco.ContentAtRoot().Where(x => x.Culture == "en-US");
foreach (var node in sitemapNodes)
{
    <url>
        <loc>@Url.Action("Index", new { lang = node.Culture })</loc>
        <lastmod>@node.UpdateDate.ToString("yyyy-MM-dd")</lastmod>
    </url>
}

Technical SEO Considerations for Multilingual Umbraco Sites

1. Performance Optimization:
   Multilingual sites tend to have a higher load due to the increased number of pages and resources. Make use of content caching and output caching in Umbraco to ensure fast page load times.

   Umbraco.Core.CacheHelper.GetCacheItem("cachedContentKey", () => GetContentById(id), TimeSpan.FromMinutes(10));

2. Content Workflow:
   Use Umbraco’s Content Approval Workflow to ensure that translated content is thoroughly reviewed before publishing. You can set up roles to ensure that editors for each language have appropriate permissions. Additionally, custom dimensions in Google Analytics can help when a site does not have separate language paths for each language (e.g., /en/, /es/).
3. Analytics and Tracking:
   Set up Google Analytics and other tools to track the performance of each language version. Typically, for a multilingual site you will want to create separate GA views with filters for each language, or region.
4. Use Google Tag Manager to add language-specific event tracking to better understand user behavior in different regions.

Optimizing Umbraco SEO: Multilingual Sites

Optimizing Umbraco CMS for multilingual content requires careful planning and execution. By leveraging Umbraco’s powerful language variant features and implementing best SEO practices like hreflang canonical tags, and localized slugs, you can create a multilingual website that performs well both in terms of user experience and search engine ranking.

For developers, a strong focus on structured content management, translation workflows, and caching will ensure your multilingual Umbraco site scales efficiently. On the SEO front, paying attention to the details like URL structure, alternate language tags, and localized content will keep your site well-optimized for global search results.