facebook / facebook/docusaurus

SEO issue: do not use useLocation() to compute canonical urls

Aperta
#9,170 9 commenti 2 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
66.2k
Fork
10k
Merge medio
1g 3h
PR unite (30g)
52

Descrizione

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

The way we compute the canonical url today:

```tsx
function useDefaultCanonicalUrl() {
const {
siteConfig: {url: siteUrl, baseUrl, trailingSlash},
} = useDocusaurusContext();
const {pathname} = useLocation();
const canonicalPathname = applyTrailingSlash(useBaseUrl(pathname), {
trailingSlash,
baseUrl,
});
return siteUrl + canonicalPathname;
}
```

Using `useLocation().pathname` works in most cases but it is a bad idea because it is a dynamic value that depends on the current browser URL. This means the static canonical URL might be ok in the html files, but once React hydrates, the canonical URL is updated to something else that can depend on the browser URL.

Notably, if you use your CDN/reverse proxy to configure aliases, if a doc exists at `/doc1` and you also make it available at `/doc1alias`, then if you go to `/doc1alias` and after React hydrates, the canonical URL will be `/doc1alias` instead of `/doc1` (ie 2 canonical URLs for the same doc).

I'm not sure it's a big deal for SEO, considering crawlers probably try to extract the static canonical URL in the page which is correct before React hydration, but we should still rather try to find a solution.

Note doing such reverse proxy alias might be common, and we also discuss it as part of this issue as a good solution if you want to have docs version aliases: see also https://github.com/facebook/docusaurus/issues/9049

Similarly, hreflang values depend on useLocation and can be wrong on aliased documents.

Related to https://github.com/facebook/docusaurus/issues/9128

### Reproducible demo

_No response_

### Steps to reproduce

We don't have any doc alias in our prod website, but the 404 case is a great example.

Take a look at https://docusaurus.io/not/found/path
- before hydration, canonical URL is `https://docusaurus.io/404.html`
- after hydration, canonical URL is `https://docusaurus.io/not/found/path`

### Expected behavior

The canonical url, hreflang and other metadata using pathname should always be the same before/after React hydration

### Actual behavior

The values are different before/after hydration

### Your environment

_No response_

### Self-service

- [X] I'd be willing to fix this bug myself.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.