Tidying Up URLs: Removing Trailing Slashes in Azure Static Web Apps

Introduction

In the ever-evolving digital landscape, the importance of clean, well-structured URLs cannot be overstated. A well-crafted URL not only improves user experience, but it also boosts your website's SEO ranking. One common issue web developers and content creators face is the presence of trailing slashes in their URLs, which can lead to duplicate content issues and negatively impact search engine performance.

In this blog post, we'll share a practical solution based on a recent customer engagement, where we helped them create a file that effectively removes trailing slashes from their URLs. Through guidance, you'll learn implement this solution on your own website, ensuring a seamless browsing experience for your users and maintaining your site's SEO health. Whether you're a seasoned developer or a beginner, our easy-to-follow tutorial will empower you to take control of your website's URL structure and elevate your online presence.

Process Description:

Original Issue:

When migrating your Web Sites between Cloud Providers or even just different hosting options there are a few small settings that we may need to modify. The option below was to fix a WordPress site that was migrated from AWS to Azure Static Web Apps.

Example: 

This didn't work…

wernerrall_0-1683126727375.png

But this did

wernerrall_1-1683126744953.png

Solution:

Thankfully the wonderful people from the Azure Static Web Apps team have thought of this (Read More Here) and now I only had to translate something that would be simple for any Web Developer or Administrator into a 3 picture example.

1. In the root of your website create a file called: staticwebapp.config.json

wernerrall_3-1683127024728.png

2. Using your favorite code editor open the file

wernerrall_4-1683127141219.png

3. Cope the below piece of code into the file

{
“trailingSlash”: “auto”
}

4. Commit to your repo / Update your website (I am using GitHub Actions) and voila!

wernerrall_5-1683127478648.png

But wait, there isn't a trailing slash?

We configured the trailingSlash to auto! This means the site will only add it when it is required to work correctly. Our other options are always and never and these options are explained in detail here.

Thank you for reading!

Disclaimer

The sample are not supported under any Microsoft standard support program or service. The sample or Power BI Dashboards are provided AS IS without warranty of any kind. Microsoft further disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample and documentation remains with you. In no event shall Microsoft, its authors, or anyone else involved in the creation, production, or delivery of the scripts or Power BI Dashboards be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the sample scripts or documentation, even if Microsoft has been advised of the possibility of such damages.

 

This article was originally published by Microsoft's Core Infrastructure and Security Blog. You can find the original article here.