Double Slash URL Demo

❌ Links with double slashes (detectable in HTML source)

• Blog post with double slash /blog//how-to-optimise-your-site
• Product page with double slash /products//widget-pro
• Service page with double slash + trailing slash /services//seo-consulting/
• Multiple double slashes /category//technology//ai/

How double slashes are generated

// ❌ Common template bug — baseUrl already ends with /
const baseUrl = "/blog/";
const post = "/how-to-optimise";
const link = baseUrl + post;  // → "/blog//how-to-optimise"

// ❌ CMS breadcrumb bug
const categoryPath = "/products/";
const slug = "/widget-pro";
return `<a href="${categoryPath}${slug}">`;  // → /products//widget-pro

// ✅ Fix — strip leading slash from slug OR trailing slash from base
const link = baseUrl + post.replace(/^\//, "");  // → "/blog/how-to-optimise"
// OR use a URL builder that normalises slashes
const link = new URL(post, "https://example.com" + baseUrl).pathname;

Fix via _redirects (server-side normalisation)

# Cloudflare Pages _redirects does not support regex.
# In production, a Cloudflare Worker handles this with a regex rule:

// Worker: catch double slashes and 301 to normalised URL
export default {
  fetch(request) {
    const url = new URL(request.url);
    const cleaned = url.pathname.replace(/\/{2,}/g, "/");
    if (cleaned !== url.pathname) {
      url.pathname = cleaned;
      return Response.redirect(url.toString(), 301);
    }
    return fetch(request);
  }
};

← Back to demo home