Improve SEO on your Multi-Language Sitecore Website with rel="alternate" hreflang="x"

If your Sitecore website has content in multiple languages, there is a simple customization you can make to improve the way your search results are displayed in the major search engines. Most search engines use the rel="alternate" hreflang="x" attributes to serve the correct language or regional URL in search results.

Add this code on your main MVC layout:

@{
        var contextItem = RenderingContext.Current.ContextItem;

        var languages = Sitecore.Data.Managers.LanguageManager.GetLanguages(contextItem.Database);
        foreach (var language in languages)
        {
            var cultureItem = contextItem.Database.Items[RenderingContext.Current.ContextItem.ID, language];

            if (cultureItem != null && cultureItem.Versions.Count != 0)
        {
                var options = Sitecore.Links.LinkManager.GetDefaultUrlOptions();
                options.LanguageEmbedding = Sitecore.Links.LinkManager.LanguageEmbedding;
                options.LanguageLocation = Sitecore.Links.LinkManager.LanguageLocation;
                options.UseDisplayName = Sitecore.Links.LinkManager.UseDisplayName;
                options.EncodeNames = Sitecore.Links.LinkManager.GetDefaultUrlOptions().EncodeNames;
                options.AlwaysIncludeServerUrl = Sitecore.Links.LinkManager.AlwaysIncludeServerUrl;
                options.AddAspxExtension = Sitecore.Links.LinkManager.AddAspxExtension;
                options.ShortenUrls = Sitecore.Links.LinkManager.ShortenUrls;
                options.AlwaysIncludeServerUrl = true;
                options.Language = language;

                @Html.Raw(string.Format("<link rel='alternate' hreflang='{0}' href='{1}' />", language.Name, Sitecore.Links.LinkManager.GetItemUrl(cultureItem, options)))
            }
        }
    }

The code iterates through each configured language for the context item, and if there is a content version for that language it will render an rel="alternate" hreflang="x" attribute to the page. So, if you have a page on your site that has been translated into three languages (German, English and Spanish, for example), this code will produce HTML output on the page like so:

<head>
    <link rel='alternate' hreflang='de-DE' href='https://www.mywebsite.com/de-DE/mypage' />
    <link rel='alternate' hreflang='en' href='https://www.mywebsite.com/en/mypage' />
    <link rel='alternate' hreflang='es-ES' href='https://www.mywebsite.com/es-ES/mypage' />
</head>

Now, in search engine results, the correct link will be shown depending on the language you are browsing in.

For this to work it's important that your language codes be correctly formatted. Make sure that all language codes you use identify the language are in ISO 639-1 format, and optionally the region in ISO 3166-1 Alpha 2 format of an alternate URL. Specifying the region alone is not valid.

According to Google, the order of the hreflangs on the page doesn't matter.

This is just my quick-and-easy way of accomplishing this, but I'm sure there are other ways (perhaps including sitemaps). And I'll bet there are ways to improve my code too. Please share your ideas!

~David

Comments (2) -

  • You did a great job. Much easier to work after reading this post. Loved it

Add comment

Loading