Link obfuscation is a more and more common topic in order to improve SEO by masking the non-important links to provide more weight to others.
I’m looking for an efficient way to obfuscate links in WordPress, directly in the source code obviously, for example by adding a special class to my links.
It must turn the <a>
element into something else like a <span>
, with no more visible href attribute nor any actual URL, so that robots cannot see any link.
It must be done before rendering the source code, not overridden in JavaScript.
Example :
<a href="https://example.com">Hello</a>
turns into :
<span data-o="CRYPTEDLINK">Hello</span>
then some JS allows click on the element to redirect to the original link.
2
Answers
I ended up making my own system that allows me to obfuscate any link easily.
Add the following code to your child theme's functions.php file, then just add the class "obfuscate" to any element to obfuscate its link by replacing it with a element with no readable link.
Also be sure to edit styles above, or delet them and style the "akn-obf-link" class in your own CSS file, so that it looks like a link to the visitor.
I'm also sharing the code on this Pastebin: https://pastebin.com/cXEBSVFn
Consider checking the link just in case I updated the code on it and forgot to update it here
I suggest to modify the "detection" regular expression used with
preg_replace_callback
.First of all, you may add a question mark right after the group between the tags as a link having no text is valid according to W3C validator i.e.
<a href=...></a>
.A second suggestion is to add
(?<!w|-)
before and(?!w|-)
after the class name to detect. Otherwise, you get false detections with class names likedo-not-obfuscate_this
ornotobfuscated
.My third suggestion is to add
(?<=s)
before eachhref
andclass
word. To avoid matching custom attributes likedata-href=
orunclassify=
.My last suggestion is to remove
(?!<a)
from the end as the expression is non greedy (and nesting<a>
tags -the idea between this?- is not allowed). Thus,(.+(?!<a))</a>
should become(.+)</a>
. And this, as it should be combined to the suggestion one, should lead us to(.*)</a>
(no need for(.+)?</a>
).Finaly, the regular expression I use is:
'#<a[^>]+((?<=s)href=("|')([^"']*)('|")[^>]+(?<=s)class=("|')[^'"]*(?<!w|-)obfuscate(?!w|-)[^'"]*("|')|(?<=s)class=("|')[^'"]*(?<!w|-)obfuscate(?!w|-)[^'"]*("|')[^>]+(?<=s)href=("|')([^"']*)('|"))[^>]*>(.*)</a>#miUs'
You may be interested in checking the differences between your regexp and mine (check the unit tests).