DEV Community

Daniel Gomez
Daniel Gomez

Posted on

2 1 1 1

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>
Enter fullscreen mode Exit fullscreen mode

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; }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay