How to Obfuscate a Link in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to obfuscate a link in Webflow

Why obfuscate a link?

Link obfuscation is used in SEO strategy mainly to control link equity flow and manage crawl budget. We can apply it directly to your site with our Webflow SEO agency, Gemeos. 

Here’s why it matters:

• Preserve link equity: By obfuscating certain links, especially external ones, you can prevent search engines from following them and potentially losing link equity from your site.
• Manage crawl budget: While it’s not explicitly mentioned in the context, link obfuscation can help manage crawl budget by keeping search engines from spending time on less important or irrelevant pages.
• Hide links from search engines: This technique makes certain links “invisible” to search engines while still letting users navigate normally. Useful in a SEO internal linking strategy.
• Avoid duplicate content issues: In some cases, link obfuscation can help prevent search engines from indexing multiple versions of the same page, which could lead to duplicate content issues.
• Protection against scraping : By hiding real URLs behind scripts or code, you make it harder for bots and scrapers to automatically collect links from your site.
• Reduce spam : Obfuscated links can discourage spammers from harvesting your URL addresses to use in spam campaigns, especially for sending unwanted emails.
• Reduce phishing attacks : If URLs are obfuscated, it’s harder for attackers to create deceptive copies of your site using your direct links, which can reduce the risk of phishing.

It’s important to note that link obfuscation should be used strategically and in line with search engine guidelines to avoid any potential penalties.

How do you obfuscate a link in Webflow?

To obfuscate a link in Webflow, we’re going to use an encoding technique that hides the URL while preserving functionality for the user.

Here’s how to do it:

‍

1. Link encoding

• Choose the link you want to hide, for example: www.gemeosagency.com/fr/mentions-legales
• Use an online Base64 encoding tool
• Copy the resulting string after encoding

‍

‍

2. Insert this code where you want your link to appear

‍

‍

Don’t forget to replace the value of the data-o attribute based on your encoding.

‍

3. Insert a script on the page

• Insert a custom script in the page or site settings
• This script will detect clicks on elements with the "obfusque" class, decode the URL, and redirect the user

‍

To optimize the user experience (UX) and improve the effectiveness of your hidden links, consider these subtle tweaks:

• Use an interactive cursor to signal that it’s clickable
• Add a hover effect to encourage interaction

By following these tips, you’ll be able to implement a link obfuscation strategy in Webflow that keeps navigation smooth while still supporting your SEO goals.

Publish, and you’re done