How to obfuscate a link in Webflow

Why obfuscate a link?

Link obfuscation is used in SEO optimization primarily to control the flow of link equity and manage the crawl budget.

Here's why it's important:

• Maintaining a fair relationship: By obfuscating some links, especially external links, you can prevent search engines from following them and potentially losing your site's link equity.
• Manage the crawl budget: Although not explicitly mentioned in the context, obfuscating links can help manage the crawl budget by preventing search engines from spending time on less important or irrelevant pages.
• Hide links from search engines: This technique makes some links “invisible” to search engines while still allowing users to navigate normally.
• Avoid duplicate content issues: In some cases, obfuscating links can help prevent search engines from indexing multiple versions of the same page, which could lead to duplicate content issues.
• Scraping protection : By hiding real URLs behind scripts or code, you're making it harder for bots and scrapers to automatically collect links on your site.
• Spam reduction : Obfuscated links can discourage spammers from harvesting your URLs for use in spam campaigns, especially for sending unwanted emails.
• Reducing phishing attacks : If URLs are obfuscated, it's more difficult for attackers to create misleading copies of your site using your direct links, which can reduce the risk of phishing.

It is important to note that link obfuscation should be used strategically and in accordance with search engine guidelines to avoid potential penalties.

How do I hide a link in Webflow?

To hide a link in Webflow, we will use an encoding technique that allows the URL to be hidden while maintaining the 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/en/legal-information
• Use an encoding tool by Base64 online
• Copy the character string obtained after encoding

In our case d3D3LMDLbwvvc2fnzw5jEs5jEs5jB20VzNivbWvudglvbnMTBGVNYWxLcwo=

‍

‍

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

‍

<span class="obfusque" data-o="d3d3LmdlbWVvc2FnZW5jeS5jb20vZnIvbWVudGlvbnMtbGVnYWxlcwo=">
Mentions légales
</span>

‍

Remember to replace the value of the data-o attribute according to your encoding.

‍

4. Insert a script on the page

• Insert a custom script into the page or site settings
• This script will detect clicks on items with the “obfusc” class, decode the URL, and redirect the user

<script>
jQuery(document).ready(function(e){          
    jQuery('.obfusque').click(function(e){
        var t = jQuery(this);    
        var link = atob(t.data('o'))
        window.open(link)
    })
})
</script>

‍

To optimize the user experience (UX) and make your hidden links more effective, consider these subtle adjustments:

• Apply an interactive slider to signal clickability
• Incorporate a visual effect into the hover to encourage interaction

By following these tips, you will succeed in implement a link obfuscation strategy in Webflow that maintains the fluidity of navigation while meeting your SEO goals.

Publish and you're done