Creative uses of the referer/referrer for SEO
In all the old-school SEO guides, they talk about the rel= attribute for <a> tags, that is, for links.
The rel attribute has several values:
If you want to dive deeper, I wrote a complete guide on link obfuscation and how to prevent Google from following links where I cover this topic in more detail. And as a short answer to what you're probably wondering, yes, Google interprets nofollow, ugc, and sponsored the same way.
However, I want to emphasize the Referrer for today's article, as it can have more uses for SEO nowadays than many professionals might expect.
The rel="noreferrer" attribute, as its name suggests, prevents the browser from sending the HTTP Referer header to the link destination. I wanted to start the introduction here because, for most SEOs, this is usually the first point of contact with the referrer concept and yet it's a commonly undervalued attribute that can offer us much more utility than one might initially expect.
Fun fact: While it's true that many modern browsers have noopener by default when it's target="_blank", it's also automatically added if you use noreferrer.
The referrer (or Referer) is an HTTP header that the browser sends to the destination server indicating the URL from which the request originated. It's commonly used to identify the traffic source, measure references between pages, and apply analytics, security, or access control logic.
Curious anecdote: You may have noticed that I've written referrer but also talked about referer. The reality is that it's officially spelled with double r. However, in the original HTTP standard, there was a typo and the header remained as Referer.
| Context | Correct spelling |
|---|---|
| HTML Attribute | rel="noreferrer" |
| HTTP Header | Referer |
| Security Policy | Referrer-Policy |
For me, it's much easier to see and understand with visual examples, so I'm going to show it through images. I'll show you 2 examples, one with referrer and one with noreferrer so you can see the difference.
If we go to ahrefs and examine a project, when we're in the overview, the link to the project we're examining appears at the top. In this case, in the tool we have an <a> tag that doesn't add any noreferrer.
If we click the link, the website will open in another tab (for the referrer, it's irrelevant whether it opens in the same tab or another).
If we open Chrome's console in that new tab.
Once opened (refresh with F5 without disabling the cache if nothing appears), we follow this process:
And this is what many well-known measurement tools use to know the origin of clicks, although you should be careful with bots to avoid false positives.
If we use that same method to check the click from the ahrefs dashboard, meaning from here to our project directly, we won't be able to see it since there's a noreferrer.
As expected, all this explanation wasn't simply to entertain you, but to give you real, often undervalued, and often unconsidered uses that can be a good solution.
It's clear that the most well-known use of the Referrer is analytics, and we'll start with it since it's the simplest and its main use, but we're going to give it a twist, since tools like GA4 or Ahrefs Web Analytics already incorporate this referrer.
With programming knowledge, a team of developers, or even with time and your code LLM and motivation, you can analyze and save information about certain very simple key aspects.
Have you obtained a link and want to know if it's worth it in terms of traffic? The possible impact on SEO is usually evaluated and nowadays on artificial intelligences, but the quality of a link can also be measured by whether it brings you traffic directly.
Example Prompt for WordPress:
Create a plugin for WordPress that saves in the DB every time a user accesses my website with a referrer from {whatever}.com or any of its subdomains. I want the date and time to be recorded in the DB. Create a table in the database with the code itself (and put a condition that if that table exists, don't create it again). Allow me to see the visit data in the WordPress backend with that code. Then briefly explain how to save the file, compress it to zip, and upload it in my WordPress panel.
And we'd have a basic, simple plugin with no impact on website speed that would work like this (I've used the example with links from ahrefs to a test page):
(you can complement it more if you want to add IP and user-agent blacklists and options to export and clean the tables, but this is to show you the concept).
You can also see records of everything that has entered your website by referrer previously if you have Logs enabled on your website, and then you can extract the information in various ways to analyze the traffic origin of your website with logs.
The good point is that you'll have all the information, the bad point is that having all the information means you then have to filter a lot to extract the data.
Most well-known LLMs allow you to analyze them through referrer. Additionally, in this case, the data is less muddied because since these are links generated for users, bots are less likely to generate them and click.
In some LLMs like ChatGPT it works, but there are exceptions like visits from iPhone on mobile (there are other ways to analyze it), but except for Deepseek, Openevidence, and a few others, all of them allow the referrer.
However, having the referrer as a base, you can play around quite a bit when it comes to showing visits that come through users via their LLM and analyze day, time, most visited pages, whether these pages return a correct response code, or any metric necessary for LLMs.
All this without the need for JavaScript or Cookie consent, being able to check thanks to the referrer and a bit of code, combined with other tools like brand radar if your strategies with LLMs are working.
And yes, with something as simple as the referrer you can improve a website's UX, with cases that people don't usually think of.
Imagine you're working on a project where one company has bought another or they've merged.
They work in the same sector, but they want to unify it under one brand.
Let's say there's website A and website B, and everything is going to be unified on website A.
In principle, if brand B has ceased to exist, it makes sense to redirect everything to website A, unify efforts, and grow brand A.
But it's quite possible that there were regular customers of website B.
The feelings that a customer of website B can have when redirected to a different brand can include:
In many possible scenarios, the user may end up doing another search on Google, a query in LLMs, or any situation where, given the disappearance of the website where they used to make their purchases/transactions, they end up landing on competitor pages when looking for alternatives.
With the referrer, we could make a very simple adjustment, since the referrer also travels through redirects.
We could make it so that if the user comes from website B, a Pop-Up appears on website A explaining the acquisition and telling them if they'll have the same services, prices, and giving them a personalized welcome explaining everything in a friendly way and greatly improving the experience.
By giving this warm welcome, we can significantly reduce the percentage of users who look for information about what happened outside the website, and we also don't have to "bother" with unnecessary information those who were already veterans of website A.
With the referrer, you can manage more dynamism between websites, whether through obtaining a link from a website with synergy or a target audience to whom you can offer a discount.
For example, on the Andalu-SEO website something special happens if you access from ahrefs.
This same example can be used for any idea you can think of for a website that mentions yours.
One of the most classic—yet also most undervalued—uses of the referrer is hotlinking prevention, that is, preventing third parties from directly loading resources from your website (mainly images, videos, or PDFs) from their own pages.
Hotlinking has two clear impacts:
This is where the referrer becomes an extremely useful and clean tool, as it allows you to know from which domain a resource is being requested, without the need for JavaScript, cookies, or user consent.
When a browser loads an image (<img>), a video (<video>), or any other resource, it sends the HTTP Referer header indicating from which page the request is being made.
With this information, you can apply conditional logic at the server level.
Some of the most common and effective strategies are:
1. Directly block the resource loading
If the referrer doesn't belong to your domain or a whitelist, you can return:
This prevents the resource from being displayed outside your website.
2. Replace the resource with another
Instead of blocking, you can:
This option is interesting when you want to maintain brand visibility even in cases of misuse.
3. Allow only certain referrers (whitelist)
You can explicitly allow:
This is especially useful when you collaborate with other media or when you need certain resources to be legitimately embedded.
Block requests directly:
# Prevent hotlinking - block requests
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?yourdomain\.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|webp|svg|pdf|mp4)$ - [F,NC,L]
Show alternative image:
# Prevent hotlinking - show alternative image
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?yourdomain\.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|webp)$ /images/hotlink-blocked.png [R,NC,L]
Whitelist specific domains:
# Prevent hotlinking - whitelist specific domains
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?yourdomain\.com [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?allowed-partner\.com [NC]
RewriteCond %{HTTP_REFERER} !^https?://.*google\. [NC]
RewriteRule \.(jpg|jpeg|png|gif|webp|svg)$ - [F,NC,L]
Block requests directly:
# Prevent hotlinking - block requests
location ~* \.(jpg|jpeg|png|gif|webp|svg|pdf|mp4)$ {
valid_referers none blocked server_names *.yourdomain.com;
if ($invalid_referer) {
return 403;
}
}
Show alternative image:
# Prevent hotlinking - show alternative image
location ~* \.(jpg|jpeg|png|gif|webp)$ {
valid_referers none blocked server_names *.yourdomain.com;
if ($invalid_referer) {
rewrite ^.*$ /images/hotlink-blocked.png redirect;
}
}
If you've ever tried to copy or download an image from Google and, despite filtering by large size, the quality was mediocre, but when accessing the source website the image looked perfect, it wasn't an error or a coincidence: it was done deliberately.
It's a practice allowed by Google and is done similarly to hotlinking but returning a 204 for images when the referrer is from Google.
Here we can see a practical example of how it looks:
It's the same image, but on the left we see the original and on the right the result in Google Images.
In this case, it makes a lot of sense, because this way the user is forced to enter the website and even have to view the ads to see the content they're looking for on the website.
Here's a guide on how to pixelate images in Google Images if you want to know how to do the technical implementation.
# Prevent hotlinking - whitelist + return 204 for Google Images
location ~* \.(jpg|jpeg|png|gif|webp)$ {
valid_referers none blocked server_names
*.yourdomain.com
*.google.com
*.google.es;
if ($invalid_referer) {
return 403;
}
# Optional: return 204 for Google Images specifically
if ($http_referer ~* "google\.com/imgres") {
return 204;
}
}
The referrer (or referer, in the context of the HTTP header) informs the destination page about the user's source page—in other words, where they came from.
While the source page can prevent this data from being sent, when we do receive it, we can put it to various uses as we have seen throughout this article, for example:
The best way to utilize it is by applying your imagination to the specific needs of your project. Information is power, and what the referrer provides is the insight into where your user is coming from.
I currently offer advanced SEO training in Spanish. Would you like me to create an English version? Let me know!
Tell me you're interested