Removing Trailing Slashes in IIS

We recently deployed Gatsby to replace the old CMS we had been using at my work. Unfortunately, the CMS we were using previously did not include trailing slashes in URLs, while Gatsby does. The reason Gatsby does this, as I understand, is to provide “pretty URLs” without the need for additional configuration in the majority of use cases. During Gatsby’s build process, directories are created for each page, with a single index.html inside. The benefit of this is that, by default, most webservers (IIS included) will serve up the index.html file if the parent directory is requested. For example, gatsbyjs.com/docs/ actually serves up gatsbyjs.com/docs/index.html

What’s the big deal with trailing slashes?

If you are starting a new site, it’s not a big deal. You can have http://<your-domain-here>/<some-directory-here> or http://<your-domain-here>/<some-directory-here>/ and Google won’t care either way in terms of SEO. The important thing is to pick one and be consistent.

It becomes an issue if you are migrating your site and don’t account for the difference in URLs. Google will treat the URL with a trailing slash as being a completely different page from the one without. You can retain a large portion of your link equity (90% to 99%) by including a 301 redirect from the old URL to the new one. If you aren’t willing to take the risk of hurting your ranking, the best solution is to just keep the URLs you had before.

gatsby-plugin-remove-trailing-slashes

Assuming you are using Gatsby, this is just one piece of the puzzle. gatsby-plugin-remove-trailing-slashes, will remove trailing slashes generated by Gatsby (such as in your sitemap if you are using gatsby-plugin-sitemap). This might be enough, depending on your hosting situation. However, if you are using IIS to host your site, there is still more to consider.

Editing the web.config

Unless you choose to manage this configuration through the IIS GUI, you will need to add a web.config file to your static directory. Gatsby’s documentation actually has a nice default configuration for IIS that we will use as our base.

The code block below shows what needs to be added.

      <!-- The rest of the web.config is up here -->
      </outboundRules>


      <!-- Add <rules> block directly after closing </outboundRules> block -->
      <rules>
        <!-- Converts all URLs to lower case -->
        <rule name="LowerCaseRule" stopProcessing="true">
          <match url="[A-Z]" ignoreCase="false" />
          <action type="Redirect" url="{ToLower:{URL}}" />
        </rule>
        <!-- Removes the trailing slash when URLs with the slash are requested -->
        <rule name="Remove trailing slash" stopProcessing="true">
          <match url="(.*)/$" />
          <action type="Redirect" redirectType="Permanent" url="{R:1}" />
        </rule>
        <!-- If requested URL is a directory (i.e. not a file) request index.html file for that directory -->
        <rule name="RewriteAllRequests" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
          </conditions>
          <action type="Rewrite" url="{R:0}index.html" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
    <!-- Disables IIS's "courtesy redirect for directory requests -->
    <defaultDocument enabled="false" />
  </system.webServer>
</configuration>=

If you are confused about what the difference between type="Rewrite" and type="Redirect" is, this blog post is helpful.

That’s it!

There isn’t much to it, but I really haven’t seen much online for handling this particular situation. Hopefully this helps you.