dev-resources.site
for different kinds of informations.
Easy 301 Redirects For SEO
What Is A 301 Redirect and Why Would I Need One?
A 301 redirect is a permanent redirect from one URL to another. 301 is the HTTP status code given that tells browsers (and search engines) that this content is now located over at a new address. This also tells search engines like Google to pass along whatever domain or keyword authority the old URL had to the new one. Well, that's at least what is supposed to happen. Google sometimes will delay or even penalize sites who use redirects if it thinks there is anything shady going on like using expired domains or duplicate content in an attempt to inflate seo rankings. Convincing Google that you're simply moving a few URLs to a new domain or changing up the site structure needs to be done carefully to avoid any unwarranted site penalties.
So this Easy 301 Redirects for SEO article was originally featured on my blog before Google came out with their update that called out the method of using expired domains saying it was now a blacklisted tactic. Therefore I did not include that portion here. Feel free to check the original source if interested.
Why Choose a 301 Redirect?
You should use a 301 redirect when you want to permanently move a page or an entire website to a new URL. It’s the best choice for SEO because it transfers most of the link equity to the new page. In contrast, a 302 redirect is temporary and doesn’t pass as much link equity. Choose a 301 redirect when:
- You’re permanently changing your URL structure.
- You’re moving to a new domain
- You’re consolidating multiple pages or websites
Easy 301 Redirects With Your Web Server
So for all the different sources you can use to implement a 301 redirect, I will show you the same three different example scenarios so you can get a good idea of what you need to customize for your own needs.
Nginx
For Nginx, you’ll need to modify your server block in the Nginx configuration file (usually located at /etc/nginx/nginx.conf or /etc/nginx/sites-available/default).
Scenario 1: Updating a single URL on the same domain
server {
...
rewrite ^/blogone$ /blog/blogone permanent;
...
}
Scenario 2: Redirecting to a new domain
server {
...
rewrite ^/blogone$ https://example22.com/blogone permanent;
...
}
Scenario 3: Redirecting multiple pages to another domain’s root
server {
...
rewrite ^/blog/(.*)$ https://example22.com permanent;
...
}
After making any changes always test your nginx config files before reloading nginx:
nginx -t
sudo systemctl reload nginx
Apache
For Apache we’re going to be creating a file name ‘.htaccess’ and placing it in our websites root directory. Make sure it has the period in front of the name.
Scenario 1: Updating a single URL on the same domain
RewriteEngine On
RewriteRule ^blogone$ /blog/blogone [R=301,L]
Scenario 2: Redirecting to a new domain
RewriteEngine On
RewriteRule ^blogone$ https://example22.com/blogone [R=301,L]
Scenario 3: Redirecting multiple pages to another domain’s root
RewriteEngine On
RewriteRule ^blog/(.*)$ https://example22.com [R=301,L]
After making changes you might need to restart apache.
sudo systemctl restart apache2
Easy 301 Redirects Using Code
PHP
PHP redirects are server-side and can be implemented as follows:
Scenario 1: Updating a single URL
<?php
if ($_SERVER['REQUEST_URI'] === '/blogone') {
header("HTTP/1.1 301 Moved Permanently");
header("Location: /blog/blogone");
exit();
}
?>
Scenario 2: Redirecting to a new domain
<?php
if ($_SERVER['REQUEST_URI'] === '/blogone') {
header("HTTP/1.1 301 Moved Permanently");
header("Location: https://example22.com/blogone");
exit();
}
?>
Scenario 3: Redirecting multiple pages to another domain’s root
<?php
if (strpos($_SERVER['REQUEST_URI'], '/blog/') === 0) {
header("HTTP/1.1 301 Moved Permanently");
header("Location: https://example22.com");
exit();
}
?>
Javascript
So I’m including this next one because I’ve seen this in practice before but it really isn’t going to be recommended unless it’s your only choice. This is because sites like Google claim their web-crawlers don’t read javascript (even though we all know they actually do).
Scenario 1: Updating a single URL on the same domain
<script>
if (window.location.pathname === '/blogone') {
window.location.replace('/blog/blogone');
}
</script>
Scenario 2: Redirecting to a new domain
<script>
if (window.location.pathname === '/blogone') {
window.location.replace('https://example22.com/blogone');
}
</script>
Scenario 3: Redirecting multiple pages to another domain’s root
<script>
if (window.location.pathname.startsWith('/blog/')) {
window.location.replace('https://example22.com');
}
</script>
HTML Meta Refresh
So this is the old school way from back when you didn’t have access to making new files in the root directory or even seeing what the server config looked like. It’s not recommended if you have any other options but it will still work to an extent.
Here’s a few examples of the redirect, it’s pretty basic.
<meta http-equiv="refresh" content="0; URL='/blog/blogone'" />
<meta http-equiv="refresh" content="0; URL='https://example22.com/blogone'" />
<meta http-equiv="refresh" content="0; URL='https://example22.com'" />
Easy 301 Redirects To Your Blog/CMS
This is if you’d rather have your blog or CMS system handle it for you.
WordPress
Here are three completely free plugins that are all geared toward different types of 301 requirements.
Simple Website Redirection
This plugin was designed for one single purpose - to redirect the entire website (except the WordPress back-end) to somewhere else. You can also have it use a 302 redirect (temporary) to test your settings before switching it to a permanent 301.
Redirection
This is probably the most powerful of all the redirection plugins that are completely free. It was designed to be able to handle and remember thousands of different redirects and includes the ability to customize them all. From single pages to full directories it also has the ability to use regular expressions so you can create dynamic redirect patterns that it will follow. A cool feature on this one is it keeps track of every redirected visitor (ip/geo/referrer/header/browser) and allows you to also set redirection rules based on who is trying to access that page. Redirect only users with certain countries, browsers, referrers, if even if they have a certain cookie. It also has WP CLI enabled for automating the entire thing!
Ghost
You’ll first need to go into your admin panel to Settings then click on Labs. Under Redirects click the “Download current redirects” link and you should get a file named redirects.yaml. It has two types of redirects and they work as list headers, 301 and 302. Once you’ve edited the file all you have to do is go back to where you downloaded it and upload your new one. Removing the redirects is as simple as uploading an empty .redirects.yaml file.
Scenario 1: Updating a single URL on the same domain
301:
/old-postname/: /new-postame/
Scenario 2: Redirecting to a new domain
301:
domain.com/post-slug/: domain22.com/post-slug/
Scenario 3: Using regex to redirect multiple pages while preserving the post-slug. So instead of writing each one out like this:
301:
/article/article-1: /article-1
/article/article-2: /article-2
/article/article-3: /article-3
You could just have this one regex line and it would cover them all.
301:
^\/article\/([a-z0-9-]+)\/$: /$1
So it looks for the article directory and matches with whatever follows. The $1 is the article-1.
Hugo
So built-in to the core of Hugo is a page method called Aliases . To be completely honest I don’t think it was meant for any of the use case scenarios we’ve been coming up with as solutions for in this post. Luckily, as with everything in Hugo, you can override it by creating your own version in your layouts folder. So this was taken from Nick Herrig who did the leg work for us on this one.
So this is the original alias template that Hugo uses. We’re not going to use this but I wanted you to see how it uses the .Permalink and url variables.
<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}">
<head>
<title>{{ .Permalink }}</title>
<link rel="canonical" href="{{ .Permalink }}">
<meta name="robots" content="noindex">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url={{ .Permalink }}">
</head>
</html>
So what we are going to do is create our own alias template that’s better.
Put this in here: layouts/external-redirect/single.html
{{- template "_internal/alias.html" (dict "Permalink" .Params.url) -}}
Now whenever you want something redirected just put a file there with this frontmatter in it. Replace the URL parameter for where you’d like it to send the user.
---
type: "external-redirect"
url: "https://blog.roboflow.com/security-camera-monitoring/"
title: "Making Megadesk Smart"
date: "2024-03-17"
---
Easy 301 Redirects For IPFS Hosts (Cloudflare, Netlify, etc..)
So most IPFS hosts have an easy method to setup 301 redirects by putting a single file named _redirects in your root folder. This easy method has been fully embraced by Netlify and many other, lesser known hosts, however depending on your cache settings you might run into problems on Cloudflare (you should be using the cloudflare redirect rule anyways). So if you’re on Netlify or a host that offers ipfs hosting, you probably can just use this method.
/old-url /new-url 301
/another-old-url /another-new-url 301
/blog/aboutmycats.html https://mycatsaremylifeandyouknowit.com
Really Easy 301 Redirects With Cloudflare
So I run my own site using Hugo on Cloudflare pages. So far it’s been great, although it did take some messing around with the cache system to get it working the way I wanted it to. The beauty of using Cloudflare pages is that it comes with a lot of free utilities like a whole bunch of redirect options. The absolute easiest way to setup a 301 redirect in Cloudflare is with a Page Rule. You can add it by itself or if you have a bunch of other redirects for the same domain just add them all together as a single Bulk Redirect Rule. It just makes it 20x easier that way.
To set up a 301 Redirect via Cloudflare, log-in and select the domain involved. You should see towards the bottom of the left menu a category named Rules. Click on that and then on Page Rules. The incoming URI is the first option, in my case I only want to forward one specific URL so it’s pretty simple.
Featured ones: