Add rel="nofollow noopener noreferrer" to external links in Sitecore

In many of the solutions we develop with Sitecore, for external links we need to add the nofollow noopener noreferrer values ​​of the rel attribute for the <a> tags, to have a final markup like this:

<a href="https://www.example.com" target="_blank" rel="nofollow noopener noreferrer">Go to the page</a>

These values allow us to:

• nofollow: Tells search engines not to follow the link.
• noopener: Stops the new page from controlling the original page.
• noreferrer: Hides the link source from the new page.

With this goal in mind, we are going to see in this tutorial a proposal to add the rel attribute in an elegant way in our solution.

Sitecore Link Attributes Settings Item

The goal will be to add the values ​​nofollow noopener noreferrer to the attribute, but it does not necessarily have to be for all external links, exceptions could surely be established according to the client's needs. Keeping these considerations in mind, in Sitecore we can define the following template, with its respective standard values:

Template:

Standard Values:

The logic on .NET side

To obtain the attribute and its values ​​to add to external links, we will use a helper that allows sending the URL to be analyzed as a parameter, and returning the expected attribute, or an empty string from a view.

C# Code

In the helper we will have to obtain the values ​​of the settings item specified above, and to have a better performance of this solution, we will add the setting values to cache to obtain them quickly later.

public static class LinkAttributesHelper
{
    private static LinkAttributesSettings _linkAttributesSettings = null;

    public static string GetLinkAttributes(string url)
    {
        if (Sitecore.Context.PageMode.IsExperienceEditor) return string.Empty;
        if(!IsAbsoluteUrl(url)) return string.Empty; 
        if (string.IsNullOrEmpty(url)) return string.Empty;

        var settings = GetLinkAttributesSettings();
        if(settings==null) return string.Empty;

        if (string.IsNullOrEmpty(settings.RelAttributeValues)) return string.Empty;
        if (string.IsNullOrEmpty(settings.WhitelistedDomains) || !settings.WhitelistedDomains.Split(' ').Any()) return string.Empty;

        var isWhitelistedDomain = false;

        foreach (var domain in settings.WhitelistedDomains.Split(' '))
        {
            if (url.Contains(domain))
            {
                isWhitelistedDomain = true;
            }         

            if(domain == "'self'" || domain == "self")
            {
                if (url.Contains(Sitecore.Context.Site.HostName))
                {
                    isWhitelistedDomain = true;
                }
            }
        }

        return !isWhitelistedDomain ? $"rel=\"{settings.RelAttributeValues}\"" : string.Empty;
    }

    private static bool IsAbsoluteUrl(string url)
    {
        return Uri.TryCreate(url, UriKind.Absolute, out _);
    }

    private static LinkAttributesSettings GetLinkAttributesSettings()
{
    var modelMapper = new ModelMapper(); // To get the values of an Item
    var cacheManager = ServiceLocator.ServiceProvider.GetService<ICacheManager>();

    var cacheKey = $"link-attributes-{<YourLinkAttributesSettingsItem>.ToShortID()}";

    _linkAttributesSettings = cacheManager.Get<LinkAttributesSettings>(cacheKey);
    if (_linkAttributesSettings == null)
    {
        _linkAttributesSettings = modelMapper.MapItemToNew<LinkAttributesSettings>(
            Sitecore.Context.Database.GetItem(<YourLinkAttributesSettingsItem>));

        cacheManager.Add(cacheKey, _linkAttributesSettings, TimeSpan.FromMinutes(30));
    }

    return _linkAttributesSettings;
}

public class LinkAttributesSettings
{
    [RawValueOnly]
    public string RelAttributeValues { get; set; }
    [RawValueOnly]
    public string WhitelistedDomains { get; set; }
}

cshtml View code

From the view of a component, we can have something like this:

<a href="@Model.Url" target="@Model.Target"
   @Html.Raw(LinkAttributesHelper.GetLinkAttributes(Model.Url))>
    @Model.Text
</a>

Note: For this example, we assume that Model object has the attributes of a General Link, that is, the Url and the Target.

Thanks for reading!

And that's it! With this proposed solution we can add nofollow noopener noreferrer values ​​to the rel attribute for external links in Sitecore. If you have any questions or ideas in mind, it'll be a pleasure to be able to be in communication with you, and together exchange knowledge with each other.

X / LinkedIn - esdanielgomez.com