Sapper: Add trailing slashes as routing option

[aubergene]

We export our site and our server is configured to add trailing slashes, so HTML page urls get redirected. It would be good to add a global option to add trailing slashes in Sapper so that the urls generates match that url and removes the redirect.

i.e. routes/about.html generates about/index.html but the link goes to about and then the user gets redirected to about/

This would only apply to html routes

[aubergene]

Hey, I'm having the same issue again. I can have a go at adding this feature perhaps. What clarification did you need?

[matt3224]

@aubergene i recently was made aware of this on a client site after an SEO audit and added i little middleware that redirects all trailing slashes to non. It would be useful if sapper or sapper-template handled this too under the umbrella of SEO improvements

[arxpoetica]

@matt3224 can you site this SEO audit rule? Effectively are you saying the original OP probably shouldn't be considered for SEO reasons, and always just default to no ending /?

[matt3224]

Here's a quick link to a tweet with a good breakdown. The rule is more general than this and revolves around not having 2 pages with the same content as search engines can look at trailing slash and non trailing slash as independent pages.

It appears to be good practice to enforce one or the other and that's what i'm suggesting we look into

https://twitter.com/JohnMu/status/943076424130363392

[arxpoetica]

Okay. Looks like / can traditionally mean different things, such as a folder, not a file. Sapper doesn't support folders or other conventions out of the gate, so that sort of thing would have to be expressly handled by Express/Polka middleware, and is outside the scope of Sapper proper.

My suggestion would be to have Sapper default to no slash, and anything above and beyond that should be handled by custom middleware written by the (non-Sapper-official) author.

[matt3224]

I use this in my projects:

export default function(req, res, next) {
   if (req.path.substr(-1) == '/' && req.path.length > 1) {
      const query = req.url.slice(req.path.length);
      res.statusCode = 301;
      res.setHeader('Location', req.path.slice(0, -1) + query);
      res.end();
   } else {
      next();
   }
}

[aubergene]

My origin request was for an option to add a trailing slash to the path for pages for export.

The links which are written out look like <a href="about"> and I want an option to make them <a href="about/">.

This is so that the server returns the content immediately, instead of returning a redirect which adds the slash to the url. This benefits the user as they get a faster response and benefits SEO as all links will point to the same non-redirected url.

[jlkiri]

I'm not sure this is the right issue to comment but I've noticed that when my site URLs are accessed directly, they are redirected if no trailing slash is present to a trailing slash version. However when the pages are navigated to on client by clicking links like /writing then redirect does not happen and URL remains without trailing slash. I'm not sure it actually negatively impacts SEO, since at least one version of a page is propely indexed, but looks like incosistency to me.