Is there a way to make a Overlay / Modal link open via data attribute for SEO improvement that also works in the RTE?

Question

Possibly this isn't an SXA specific question, but I would like to know if there is a way to set a hyperlink in the Sitecore RTE (Rich text editor) on a data attribute instead of the standard href attribute?

I have figured out how to make SXA overlays show via data attribute, but the editing experience becomes bad as if you change the link URL, it reverts the data attribute back to href.

Example:

1. Open RTE and set a link. Html looks like:

<a href="~/link.aspx?_id=247BB73FC91541F7B12226435637FB97&amp;_z=z" class="btn-md">Click here to open modal</a>

2. Manually modify it to be a data attribute:

<a data-overlay-target="~/link.aspx?_id=247BB73FC91541F7B12226435637FB97&amp;_z=z" role="button">Click here to subscribe</a>

3. If I change the link in the RTE it reverts back to be like 1. It does keep the previously selected link though which is great. I just need it to not revert the href.

The SEO impact here is some modal pages are not to be crawled by search engines on their own.

Answer 1

One solution would be to create a custom renderField pipeline processor like this:

public void Process(RenderFieldArgs args)
{
    Assert.ArgumentNotNull(args, "args");
        
    if (Sitecore.Context.Site.DisplayMode == Sitecore.Sites.DisplayMode.Edit)
        return;
        
    var field = Sitecore.Data.Fields.FieldTypeManager.GetField(args.GetField());
    if (args.FieldTypeKey == "rich text")
    {
        if (!string.IsNullOrEmpty(args.Result.FirstPart))
        {
            args.Result.FirstPart = SetRichTextAttributes(args.Result.FirstPart);
        }
        if (!string.IsNullOrEmpty(args.Result.LastPart))
        {
            args.Result.LastPart = SetRichTextAttributes(args.Result.LastPart);
        }
    }
    else if (field is LinkField)
    {
        LinkField linkField = (LinkField)field;
        
        if (linkField.LinkType.ToLower() == "internal")
        {
            if (linkField.TargetItem == null)
                return;
        
            // Add your custom parameters (HTML attributes) here
            args.Parameters.Add("data-overlay-target", linkField.GetFriendlyUrl());
        }
    }
}  
      
protected string SetRichTextAttributes(string html)
{
    var doc = new HtmlDocument();
    doc.LoadHtml(html);

    if (doc.DocumentNode == null)
        return html;

    var links = doc.DocumentNode.SelectNodes("//a[@href]");
    if (links == null)
        return html;

    foreach (var link in links)
    {
        // Add your custom parameters (HTML attributes) here
        link.Attributes.Add("data-overlay-target", "yourcustomvalues");
    }

    return doc.DocumentNode.OuterHtml;
} 

You would need to patch it to the <renderField> section that is defined in /App_Config/Sitecore.config. You can also take a look at the approach described Set Data Attributes for Links to Certain Items which also covers the sitecore link fields aswell as parsing the rich text editor links and setting custom data attributes.