Apache, Nginx, PHP, JavaScript and Meta redirects

There are two main redirect options 301 for a permanent redirect. Use this when the redirect is pointing to the new version of an old/outdated page. And, 302, used for designating the temporary movement of a page for example a holding page. Where you see 301 or 302 in the code below they can be used interchangeably depending on usage.

Apache .htaccess

If your website is running on Apache, these are some standard redirects which can be added to the .htaccess file:

Simple redirect one page to another:

Redirect 301 "/old-web-page" "https://example.com/new-web-page"

Recirect from one domain (oldsite.com) to a new domain (example.com) keeping the rest of the URI intact.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^oldwebsite.com$ [OR]
RewriteCond %{HTTP_HOST} ^www.oldwebsite.com$
RewriteRule (.*)$ http://www.example.com/$1 [R=301,L]

Force HTTPS on a domain:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Redirect from www to non-www:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.example.com$
RewriteRule (.*)$ http://example.com/$1 [R=301,L]

 

Nginx .conf

The following code can be added to the configuration file at /etc/nginx/sites-enabled/default updating the old and new URLs to match your requirements.

A single page redirect from one URI to another:

Location path_pattern {        
     rewrite ^/the-old-url$ https://www.example.com/the-new-url redirect; 
}

Recirect from one domain (oldsite.com) to a new domain (example.com) keeping the rest of the URI intact.

server {
      listen 80;
      hostname oldurl.com www.oldurl.com;
      rewrite ^ http://www.example.com$request_uri? permanent;
}

Force HTTPS on a domain:

server {
listen 80 default_server;
server_name _;
return 301 https://$host$request_uri;
}

Redirect from www to non-www:

server {
    server_name www.example.com;
    return 301 $scheme://example.com$request_uri;
}

 

PHP

A PHP Redirect can be used to point one resource to another using the HTTP headers. A simple PHP redirect will look like this:

header('Location: http://www.example.com/');

You will need to ensure the code appears before any output, so no HTML or white space should appear before this line. Anything in the code after this point won’t be visible to the user.

You can also specify the type of redirect, useful if you want to temporarily redirect a page:

header('Location: http://www.example.com/', true, 302);

 

JavaScript

JavaScript can be useful if you need to redirect the page while the user is interacting with something else on the page. The following code can be used to redirect automatically by placing it on its on in your web page or as part of another interaction with the user.

A simple redirect would look like:

window.location.href = "https://example.com/";

If you would like to redirect without the browser remembering the page with the redirect use:

window.location.replace("https://example.com/");

 

Meta

If you don’t have access to the other options, you may add a Meta tag to the <head> section of your web page. This will allow you to set the URL and the number of seconds between the page loading and the redirect happening.

<meta http-equiv="refresh" content="0; url=https://example.com/">

A Meta redirect is often used as a last resort, or a fall back option for one of the other redirects. It isn’t recommended for SEO, but can be useful if a user has turned off their JavaScript and you were relying on it to preform the redirect.

Hello, I'm Keith, a website developer in Belfast, Northern Ireland working with PHP, Magento, Shopify and WordPress.

I've been building websites for over 10 years, from custom website development to bespoke web applications, Shopify and Magento ecommerce and Online Leaning Environments. I've worked on a range of projects and am always looking out for the next interesting project.

Related Notes Posts

Latest web image formats

There are a number of new image formats that have been developed in recent years to improve the performance and quality of images on websites.... March 2023 · Notes

Using OpenAI tools in ecommerce environments

OpenAI is a leading artificial intelligence (AI) research organization that has the potential to revolutionise the ecommerce industry. By leveraging OpenAI's cutting-edge AI technologies, ecommerce... February 2023 · Notes

Mobile-first Web Design

Mobile-first web design Mobile-first web design is a design approach that prioritises mobile devices when designing a website. Instead of designing a website for desktop... January 2023 · Notes

More Notes Posts...