SEO links obfuscation and accessibility problems

I found an e-commerce website that I didn’t know. As usual, I looked for the legal information page in the footer to find the company’s SIRET number and search for it on societe.com (a directory of French companies).

I was on a product page so I wanted to open this link in a new tab but I couldn’t do it. So I went into the code and found a fake link: an HTML span element was used instead of an a element with an href attribute. The code was as follows:

<span data-link="/legal-information">Legal information</span>

This fake link is therefore not accessible at all via the keyboard, nor via a screen reader, nor via voice control. As a result, many disabled people find themselves unable to access the pages behind these false links. And for the others who are not handicapped by this fake link, there is still a definite usability defect with the impossibility to choose to open this link in a new tab, the impossibility to access the usual contextual menu for links, the impossibility to see the URL at the bottom left of the browser, the impossibility to drag this link into our bookmarks, etc.

This practice is called “links obfuscation”; it is an SEO (Search Engine Optimization) practice that allows to hide a link from search engines while leaving it, in theory, usable for humans. Basically, it is used to avoid indexing the page, to prevent search engines from accessing the page, or to optimize the distribution of what is called “SEO juice” (the popularity transmitted by a link). The rel="nofollow" attribute placed on a link does not seem to be sufficient anymore (French article).

Note that this practice is most likely not approved by Google at all since it is biasing their algorithm so if you use it, it is at your own risk (or at the risk of your clients, in this case).

So on Twitter, I asked what evidence there is that this practice works because I can find plenty of articles that explain what it’s for, but it’s hard to find articles that prove it’s actually useful. No one has given me any formal proof (studies, you know) so I don’t know if that means they really don’t exist.

In short, given the lack of evidence of effectiveness for SEO at this time and the problems this technique poses for accessibility and usability, the simple and effective solution for humans is: don’t obfuscate links and use real HTML links.

An idea to obfuscate links in an accessible way

If you are nevertheless a person who believes that links obfuscation is a thing to do, then you must not do it in any way to keep it accessible to disabled people.

There are two things to know about links:

1. A link must be reachable by keyboard, or via a screen reader that lists the links, or via voice control;
2. A link must have a link role in order to let people using a screen reader or voice control know that it is a link and to allow assistive softwares to list these links as links.

Ok, this probably doesn’t mean anything to you but, as a result, some people will tell you that you just need to add role="link" tabindex="0" attributes on these spans and you’re done. This code is the result:

<span data-link="/legal-information" role="link" tabindex="0">Legal information</span>

In this code, the role="link" attribute gives the element the link role and the tabindex="0" attribute gives access to this link with keyboard and thus makes it effectively clickable. However, this does not solve the usability problems mentioned above (contextual menu, opening in a new tab, etc.). So this solution is absolutely not optimal because it will still cause difficulties.

While discussing with Romain Gervois last evening, he found an idea that seems interesting because it better takes into account the usability flaws even if it’s not perfect (a real link from the beginning will always be much better). So we studied it more in detail together and I present here the result of these thoughts.

The default HTML code

In the HTML code, the idea is as follows:

1. Use an HTML element a;
2. Do not use, by default, the href attribute to place the URL but use a data-href attribute (put what you want after data-);
3. Add a role="link" attribute to it so that it has the role of a link despite the absence of an href attribute (yes, an a element without an href attribute is not a link);
4. Add a tabindex="0" attribute to it so that it can be reached with the keyboard (an a element without href attribute is not reachable with keyboard).

The result is this:

<a data-href="/legal-information" tabindex="0" role="link">Legal information</a>

The JavaScript interactions to be expected

Of course, this HTML code allows us to say that it is a link and we can reach it with the keyboard. However, in order for it to be functional and get us to the page, we need to add some JavaScript interactions.

1. First of all, we’ll get all our fake links in a variable;
2. Then, on hovering over the document (and not the link), we will transform all the fake links into real links by replacing the data-href attribute with href. Why on hovering over the document? Because this will allow us to benefit from the display of the URL at the bottom left of the browser. People browsing with the mouse will therefore have access to real links;
3. We will do the same thing when any element in the document is focused (focusin) so that people browsing with the keyboard will have access to real links;
4. Finally, we will add a click event for each fake link in order to transform the fake links into real links: this will allow people using voice control without using a mouse or a keyboard to activate these links.

Of course, I quickly coded you a demo (with jQuery, yes!):

Demo on CodePen

Then, you are free to encode the URL at the beginning and then decode it when transforming the data-href attribute into an href attribute if you think it is useful…

Each of the steps described is absolutely essential and none of them must be forgotten in order to be accessible.

It’s up to you to test the SEO side

Of course, I’m not the SEO specialist. I’m presenting an idea here. I let you test it to see if it works as desired from an SEO point of view. Feel free to give me your feedback in comments and I may modify this chapter accordingly.

Vigilance on the maintainability and robustness of the code

This kind of practice also causes a serious problem for the code’s maintainability. Anyone who doesn’t know anything about it and needs to modify the code could remove a piece of it and break either the accessibility-specific implementation or the SEO-specific implementation. If you use it, document each point well throughout the code!

Also, the practice of links obfuscation relies on JavaScript being enabled. So, if JavaScript is disabled on the user’s browser or if the browser is not loading the JavaScript file or if this one contains an error, then the links will no longer be available. As you can read in this article, Martin Splitt, from Google, recommends not to remove the href attribute and not to encode the URL. Moreover, if links are obfuscated in an article, they will not work in the browsers’ reading mode or in the RSS feed readers.

The point of view of Myriam Jessier, SEO expert

Accessibility is coming to the forefront of Google’s approach in recent years. The Page Rank Experience (PRE) element introduced by the search engine means some tactics previously used to control Google bot are no longer compatible with a solid SEO foundation in the long run.

In addition, Google’s robot has a sophisticated crawling process that no longer requires these kinds of practices.

At the end of the day, the bot is a user like any other and Google has been clear that doing things with the sole purpose of impacting the bot is not a good practice, especially, if it impacts humans.

Myriam Jessier

So I conclude that using a classic HTML link will always be the best solution, the most accessible, the most usable, the most reliable, the most robust, the most maintainable.

Thank you to all the people who gave me constructive answers that enhanced my thinking.