Logo

dev-resources.site

for different kinds of informations.

Easy 301 Redirects For SEO

Published at
1/15/2025
Categories
webdev
tutorial
beginners
seo
Author
brentter
Categories
4 categories in total
webdev
open
tutorial
open
beginners
open
seo
open
Author
8 person written this
brentter
open
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;
    ...
}
Enter fullscreen mode Exit fullscreen mode

Scenario 2: Redirecting to a new domain

server {
    ...
    rewrite ^/blogone$ https://example22.com/blogone permanent;
    ...
}
Enter fullscreen mode Exit fullscreen mode

Scenario 3: Redirecting multiple pages to another domain’s root

server {
    ...
    rewrite ^/blog/(.*)$ https://example22.com permanent;
    ...
}
Enter fullscreen mode Exit fullscreen mode

After making any changes always test your nginx config files before reloading nginx:

nginx -t
sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

Scenario 2: Redirecting to a new domain

RewriteEngine On
RewriteRule ^blogone$ https://example22.com/blogone [R=301,L]
Enter fullscreen mode Exit fullscreen mode

Scenario 3: Redirecting multiple pages to another domain’s root

RewriteEngine On
RewriteRule ^blog/(.*)$ https://example22.com [R=301,L]
Enter fullscreen mode Exit fullscreen mode

After making changes you might need to restart apache.

sudo systemctl restart apache2 
Enter fullscreen mode Exit fullscreen mode

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();
}
?>
Enter fullscreen mode Exit fullscreen mode

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();
}
?>
Enter fullscreen mode Exit fullscreen mode

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();
}
?>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Scenario 2: Redirecting to a new domain

<script>
if (window.location.pathname === '/blogone') {
    window.location.replace('https://example22.com/blogone');
}
</script>
Enter fullscreen mode Exit fullscreen mode

Scenario 3: Redirecting multiple pages to another domain’s root

<script>
if (window.location.pathname.startsWith('/blog/')) {
    window.location.replace('https://example22.com');
}
</script>
Enter fullscreen mode Exit fullscreen mode

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'" />
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

Scenario 2: Redirecting to a new domain

301:
  domain.com/post-slug/: domain22.com/post-slug/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

You could just have this one regex line and it would cover them all.

301:
  ^\/article\/([a-z0-9-]+)\/$: /$1
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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) -}}
Enter fullscreen mode Exit fullscreen mode

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"
---
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Cloudflare redirect page rule screen

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.

tutorial Article's
30 articles in total
Tutorials offer step-by-step instructions to help learners grasp concepts and complete tasks in various domains.
Favicon
Creating a live HTML, CSS and JS displayer
Favicon
Build Your First AI Application Using LlamaIndex!
Favicon
Creating Arrays with Reference Variables
Favicon
How To Build Beautiful Terminal UIs (TUIs) in JavaScript 2: forms!
Favicon
Chronicles of Supermarket website
Favicon
Easy development environments with Nix and Nix flakes!
Favicon
ruby -run
Favicon
Основы изучения Python: Руководство для начинающих
Favicon
How to Use JavaScript to Reduce HTML Code: A Simple Example
Favicon
SQL Performance Tuning: Best Practices for Faster Queries
Favicon
Php Base64 encode/decode – best practices and use cases
Favicon
10 Must-Bookmark Open Source Projects for Developers
Favicon
Easy 301 Redirects For SEO
Favicon
ruby -run, again
Favicon
🚀 New Book Release: "Navigate the Automation Seas" – A Practical Guide to Building Automation Frameworks
Favicon
Top Kubernetes CI/CD Tools in 2025
Favicon
340+ Websites every developer should know
Favicon
Survival Manual: How to Create and Manage a Project in Git
Favicon
Strong Female Role Models in the Sector: Oya Narin
Favicon
Test Scenarios vs. Test Cases: Understanding the Differences
Favicon
Angular validation common functions
Favicon
KDE vs GNOME vs Others: Choosing the Best Linux Desktop Environment in 2025
Favicon
NXP i.MX8MP Platform Porting Driver Tutorial
Favicon
Response Handling Best Practices
Favicon
Why AWS Matters: A Beginner's View
Favicon
How the Internet Works: OSI Model, DNS, TCP vs. UDP, and Essential Concepts for Beginners
Favicon
Resolving Auto-Scroll issues for overflow container in a Nuxt app
Favicon
#131 — Use Association Table to Handle Interval Association
Favicon
Deferred loading with @defer: Optimize Your App's Performance
Favicon
Psychotherapy Technology Advancements

Featured ones: