Daniel GomezIn 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.
