I’m building my Gatsby site via Gatsby Cloud and hosting it on Netlify.
The site url: https://imechyperspectral.netlify.app/en
Throughout my site I’m always using links without a trailing slash.
When you visit an url /en/page, Netlify will redirect to /en/page/ after which Gatsby will ones again remove the trailing slash. That behavior causes issues for page speed and SEO.
I’m using the remove trailing slashes plugin for Gatsby and on the gatsby cloud hosting everything behaves as expected.
I’ve tried deploying the site with and without the ‘Pretty URLs’ asset optimization option, but that doesn’t seem to have any effect.
Any idea’s on how I can tackle this issue?
2 Likes
When I’m building + deploying directly on Netlify the problem does not occur when I disable all asset optimizations.
This is a test site which builds with the same codebase, but directly on Netlify: https://blocks.netlify.app/en
Does Netlify CLI take the asset optimization configurations into account when creating new deploys? Or does it behave differently from a build created on Netlify directly?
Scott
August 20, 2020, 10:23am
3
Hey there, @dmerckx !
I’ve posted the same advice to your Helpdesk ticket but, for posterity, the best I can offer is this guidance.
Because everybody does it differently, it’s tricky to find a one size fits all solution. Although this is Nuxt, the same principles apply!
Hey @arekk ,
I understand the frustration here and I can sympathise! There isn’t a clean and preferred way of achieving this. Every framework, person, will handle trailing slashes a little differently.
We have an open feature request for exactly this – allowing you to decide whether to opt in or out of trailing slashes – and I’ve added this conversation to the request list. Though, I can’t promise if/when this is delivered.
There are some methods of achieving this though they’re not very intel…
Scott
August 20, 2020, 10:25am
4
As for your follow-up RE: CLI, I’m unfortunately not the best person to ask. Hopefully one of my colleagues or a CLI may be able to follow up else you’re always welcome to create an issue over on the CLI repo!
So basically the only current option is to start using trailing slashes across the website? The issue with that is that all historical links for my websites are written without trailing slashes, both internally and (more important) externally. So I feel that could have a very negative impact on SEO.
Any progress on the open feature request you mentioned? Can you link it here perhaps so I can follow up?
Hey Scott,
Thanks for your reply.
Is this a question you could forward to someone of your CLI team?
Because I feel it’s not so much a bug or feature request, but more a general question on how your CLI works with regards to asset optimizations (and in particular the whole trailing slash behaviour).
perry
August 21, 2020, 7:58pm
7
hey @dmerckx ,
your best bet for CLI questions is actually to open an issue on this repo:
and the folks who work most closely with that code can take a look as time allows. thanks!
dmerckx
September 3, 2020, 11:03am
8
I finally got this working.
Thanks to these comments:
opened 04:45PM - 02 Jul 19 UTC
closed 12:07AM - 14 Dec 19 UTC
type: question or discussion
stale?
Hey all,
Before Gatsby integration we had our URLs as non trailing slash: /mo… rtgage-calculator
Since remaking certain pages in Gatsby my team have said that Gatsby 'forces' a trailing slash: /mortgage-calculator/
We previously had a server side redirect setup (nginx) to remove the trailing slash.
If you go to the '/' URL version, you get redirected to the non '/':
![image](https://user-images.githubusercontent.com/51830873/60530557-e9329080-9cf0-11e9-8c59-53ccac7b79a0.png)
However in the address bar, the URL still has a '/'
![image](https://user-images.githubusercontent.com/51830873/60530576-f485bc00-9cf0-11e9-8c0f-923a6b55dc83.png)
The fact that this '/' doesn't seem to be getting picked up seems to be confirmed by checking the HTTP status code of the non '/' URLs: /mortgage-calculator
![image](https://user-images.githubusercontent.com/51830873/60530149-0f0b6580-9cf0-11e9-91bc-0a83595d35ea.png)
Can anyone advise what is happening here? I thought '/' were forced but currently this '/' seems more like a 'cosmetic' '/' and not an actual coded '/'
Apologies in advance for any newbie language and thank you for any help!
opened 11:40AM - 18 Oct 18 UTC
closed 09:49AM - 27 Nov 20 UTC
type: bug
help wanted
type: upstream
## Summary
URLs with no trailing slash on sites hosted by Netlify lead to an … immediate 301 redirect to the page with a trailing slash.
``foo.com/bar`` --> ``foo.com/bar/``
This has a performance cost and implications for SEO.
_Is there a Netlify configuration that resolves these URLs without redirecting?_
## Relevant information
While this question is specific to Netlify, I did a quick review of other Gatsby sites featured in the Showcase and saw the same behaviour in many, but not all cases, for example:
[Hopper /company](https://www.hopper.com/company) - 301 redirect (Netlify)
[Impossible Foods /mission](https://impossiblefoods.com/mission) - 301 redirect (unknown)
[Cajun Bow Fishing /bows](https://cajunbowfishing.com/category/bows) - 301 redirect (Netllify)
[Braun /shavers-for-men](https://ca.braun.com/en-ca/male-grooming/shavers-for-men) - 200 no redirect (unknown)
### Environment (if relevant)
Same behaviour in Gatsby v1 and v2.
I'm using [gatsby-plugin-remove-trailing-slashes](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-remove-trailing-slashes) and [gatsby-plugin-netlify](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify).
Within the project all Links point to the non-trailing slash version.
So something very weird is going on with the netlify UI.
The only way to skip the redirect is to ‘Disable asset optimization’ but also explicitly check all the boxes except for ‘Pretty URLs’:
Simply checking ‘Disable asset optimization’ without checking the other boxes does not work, the redirect still occurs.
The problem is unrelated to whether I build from Gatsby Cloud or Netlify directly.
I got all my sites working correctly as soon as I configured this.
3 Likes
fool
September 9, 2020, 4:58pm
9
Thanks for the follow-up! So glad to hear you got things working. We have some discussion around planning work to refactor that config widget to be a bit more obvious since as you note the effects of different checkbox configurations is downright confusing.
mlenser
September 21, 2020, 5:57am
11
Unchecking all checkboxes seems to prevent pretty urls:
Checking “Disable asset optimization” at the top level visually appears to disable pretty URLs, but that is not the case.
Once this change has been made, I no longer receive a 301 to the trailing slash urls.
1 Like
This issue is still happening. It was driving me crazy, thanks. Your solution worked.
1 Like
If you want your website to not have any trailing slash and also work with Netlify you can use the gatsby-plugin-netlify
and in gatsby-node.js
add
const replacePath = path => (path === `/` ? path : path.replace(/\/$/, ``))
exports.onCreatePage = ({ page, actions }) => {
const { createRedirect } = actions
if(!page.path.includes('.html') && page.path !== '/') {
createRedirect({ fromPath: `${page.path}/`, toPath: page.path, isPermanent: true })
}
}
this will redirect all trailing slash to non-slash paths with 301 status code.
Note if you are also using createPages
Gatsby node API you’ll need to add it there also
exports.createPages = async ({ actions, graphql }) => {
const { createPage, createRedirect } = actions
// ...
pages.forEach(page => {
// ...
createRedirect({ fromPath: `${page.path}/`, toPath: page.path, isPermanent: true })
})
})
}
2 Likes
Thanks for sharing this, @Hazem3500 ! This will definitely be beneficial for future Forums members who encounter this