BlogDeploy

Create your own vanity link cloaking with Netlify redirects

Written by Codemzy on June 27th, 2022

After discovering link cloaking (and various services that manage, cloak and shorten affiliate links), I thought it would be pretty easy to set something basic up in Netlify for a static site. It was, and here's how you can do it!

I was browsing the internet the other day and came across an affiliate link like none I had seen before. Instead of the usually long and complex URL with a bunch of random characters and parameters like…

https://www.othersite.com/refer?product=5h4j3595h?affiliate=4327346hjfkhgh?random=othertext?what=evenmore

It looked short, simple, and shareable, like…

https://www.yourdomain.com/refer/product-name

And it wasn't a one-off. I checked throughout the site, and all the links followed the same format.

I've seen affiliate links pop up everywhere, but I've never this done before. Maybe I've been living under a rock, and I've never done any affiliate marketing so I'm probably way out of the loop. But this sent me down a bit of a rabbit hole.

We're going to cloak our links with vanity links. But first, what is this, and why would you do it?

Turns out this is a thing known as vanity links. Or even link management.

The link you share, and what the user clicks, is a nice URL that you control. You decide how it looks, and it's on your domain (ideally).

Then it redirects to the original URL (that long and complex affiliate link you started with).

Other than looking good, vanity links solve a few problems.

  • shorter links
  • more shareable links
  • branded links

Vanity links are much more shareable. Not such a big deal on your blog, but for posting on social media etc, you can create shorter links that feel nicer to share.

When you share the link, it includes your domain instead of the website you are referring to. Since you're the person making the referral, this seems to make sense. If you are referring someone to another website you can include the other brand in the link too.

https://www.you.com/refer/them

You are also cloaking or hiding the final URL. You want the user to end up at the final URL (and hopefully they do too!), but you send them somewhere else first. This doesn't sound very good, because even though a redirect can happen in milliseconds, it's still an extra jump.

But it turns out, in addition to looking pretty, link cloaking can have some pretty big benefits too.

  • Better link management
  • Protecting your affiliate links

I've often wondered how affiliate marketers deal with updating links in multiple places. Like, say you promoted the heck out of a product, it's dotted all over multiple blog posts, social media posts, and other places. But now something has changed, or the link is broken, or it's out of stock, or the product is available at another place that is better, or cheaper.

But some of those links (like on social media) can't be updated. If the link is broken, now when people click, they don't get what they want (and you don't get any commission!).

If you have cloaked the link with a URL that you control, then you only need to update your redirect.

This means you can just update the URL in one place. The link the user sees (and clicks) doesn't need to change at all. Just the redirect. So you don't have to go hunting through content, updating the link here, there, and everywhere.

Apparently, affiliate link theft is a thing. Again, this is new to me, since I haven't done any affiliate marketing before.

Commission theft commonly happens via malware loaded unsuspectingly on people's computers. This malware monitors the pages those people visit, finds affiliate links on those pages, replaces an affiliate's unique affiliate ID code with their own affiliate ID code, and thereby steals that affiliate's commissions.

- Thirsty Affiliates What Is Link Cloaking?

A vanity link is just a redirect. A user clicks on the link, and it redirects them to the place/service/product you are recommending.

https://www.you.com/refer/them → https://www.them.com/product-name?affiliate=your-affiliate-id

The important thing to remember is that you're not masking or hiding the final URL. The URL in the link (which possibly most users don't even look at) is yours, but the final URL that displays in the browser once the user clicks the link will be the original one.

Providing the links are clear, I think so.

To maintain user trust, it's a good idea to make it obvious you are referring them somewhere else. So put refer or link in the URL.

It's good to keep a consistent structure, for you (managing the links) and for users (clicking the links). You both know what to expect.

Another good tip is to make it clear where the referral is going. If your link is in a blog, then you'll probably be recommending a product or service, but if you can also be transparent with this in the link, it's more likely to get clicked.

Personally, I'd be more likely to click:

https://www.you.com/refer/some-cool-product

Compared to:

https://www.someoneelse.com/cat/product-4352342?affiliate=4327346hjfkhgh

Ok, now you know some of the benefits, you might want to know how to set this up. A few WordPress plugins do this, but if you can set up redirects, you can do it yourself.

If you have a static site built on Netlify, you can run your redirects from a _redirects file, or your netlify.toml file.

Here's how it would look in the _redirects file:

/refer/some-cool-site   https://www.somecoolsite.com?affiliate=4327346hjfkhgh
/refer/some-cool-product   https://www.somecoolsite.com/cat/product-4352342?affiliate=4327346hjfkhgh

And here's how you can do it in netlify.toml:

[[redirects]]
  from = "/refer/some-cool-site"
  to = "https://www.somecoolsite.com?affiliate=4327346hjfkhgh"
  status = 301
[[redirects]]
  from = "/refer/some-cool-product"
  to = "https://www.somecoolsite.com/cat/product-4352342?affiliate=4327346hjfkhgh"
  status = 301

You could do something very similar with other hosting providers if you know how to set up a redirect.

For example, on Vercel, you can set redirects up for the domain through your account, or use in-application redirects.

{
  "redirects": [
    { 
      "source": "/refer/some-cool-site",
      "destination": "https://www.somecoolsite.com?affiliate=4327346hjfkhgh", 
      "statusCode": 301
    },
    { 
      "source": "/refer/some-cool-product",
      "destination": "https://www.somecoolsite.com/cat/product-4352342?affiliate=4327346hjfkhgh", 
      "statusCode": 301
    }
  ]
}

If you run a server and use a .htaccess file, something like this should work:

Redirect 301 /refer/some-cool-site https://www.somecoolsite.com?affiliate=4327346hjfkhgh
Redirect 301 /refer/some-cool-product https://www.somecoolsite.com/cat/product-4352342?affiliate=4327346hjfkhgh