Post
Ask Question

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

Template

Standard Values

Standard Values:

The logic on the .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 the 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; }
}

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 the 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 and 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 communicate with you and exchange knowledge with each other.


Similar Articles