Understanding Trailing Slash for Better URL Management and SEO

Posted on January 28, 2025 by vero

Introduction to Trailing Slash

A trailing slash (/) at the end of a URL is often a source of confusion for many developers.
It is important to understand its significance for SEO and URL management. The trailing slash
in a URL can affect the way web servers handle requests and how URLs are resolved, which
ultimately impacts search engine optimization.

What is a Trailing Slash?

A trailing slash is the forward slash (/) that appears at the end of a URL. For example:

With trailing slash: https://example.com/page/
Without trailing slash: https://example.com/page

Although these URLs might look similar, they can be treated as different addresses by web
servers and search engines.

API Examples on Trailing Slash Handling

Apache Configuration

  <Directory "/var/www/html">
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_URI} !/$
      RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1/ [L,R=301]
  </Directory>

NGINX Configuration

  server {
      listen 80;
      server_name example.com;

      location / {
          try_files $uri $uri/ =404;
      }
      
      if ($request_uri !~ /$) {
          return 301 $request_uri/;
      }
  }

Express.js Middleware

  const express = require('express');
  const app = express();

  app.use((req, res, next) => {
      if (req.path.substr(-1) !== '/') {
          res.redirect(301, req.path + '/');
      } else {
          next();
      }
  });

  app.get('/page/', (req, res) => {
      res.send('This is the page with a trailing slash.');
  });

  app.listen(3000, () => {
      console.log('Server is running on port 3000');
  });

Complete Application Example

  const express = require('express');
  const app = express();

  // Middleware to ensure trailing slashes
  app.use((req, res, next) => {
      if (req.path.substr(-1) !== '/') {
          res.redirect(301, req.path + '/');
      } else {
          next();
      }
  });

  // API Endpoints
  app.get('/api/users/', (req, res) => {
      res.json([{ id: 1, name: 'John Doe' }]);
  });

  app.get('/api/products/', (req, res) => {
      res.json([{ id: 101, name: 'Product A' }]);
  });

  app.get('/api/orders/', (req, res) => {
      res.json([{ id: 1001, user_id: 1, product_id: 101 }]);
  });

  app.use((req, res) => {
      res.status(404).send('Page not found');
  });

  app.listen(3000, () => {
      console.log('Server is running on port 3000');
  });

In the above example, we have created an Express.js app that enforces trailing slashes
on all routes and has several useful API endpoints.

Hash: 573d0a7c4112151412aca3523d9cf5150f019ac40056c9bf58d47d936265dd61

Leave a Reply Cancel reply