[CAL-933] on cal.com, add canonical metatag for cal.com/<username> pages

[PeerRich]

right now we have both: https://app.cal.com/peer and https://cal.com/peer

we need a canonical meta tag in that page that says the default URL is cal.com/peer to prevent duplicate content

_CAL-933

[PeerRich]

on self-hosters this should be {BASE_URL}?

[PeerRich]

https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls

[PeerRich]

something like

<link rel="canonical" href={"https://cal.com/"+ username} />

and

<link rel="canonical" href={"https://cal.com/"+ username + "/" + slug} />

for the cal.com/peer/30min event-type link

or is there a better way?

[emrysal]

TODO:

• [ ] Add canonical from https://app.cal.com/[user]/[type]
• [ ] Add canonical from https://app.cal.com/[user]
• [ ] Add canonical from https://app.cal.com/team/[team]/[type]
• [ ] Add canonical from https://app.cal.com/team/[team]

[p6l-richard]

TODO:

• [ ] Add canonical from https://app.cal.com/[user]/[type]
• [ ] Add canonical from https://app.cal.com/[user]
• [ ] Add canonical from https://app.cal.com/team/[team]/[type]
• [ ] Add canonical from https://app.cal.com/team/[team]

@emrysal Since I couldn't find any page that exists on app.cal.com that doesn't also exist on cal.com, what about defining the canonical everywhere to be https://cal.com?

E.g. something like this: https://github.com/calcom/cal.com/pull/6693/files#diff-7a6e13bc35f6130398aea815a3973fd34c2327f124c1d0ba57880dbf67f0d28fR77-R78

//  components/head-seo
export const HeadSeo = (props: HeadSeoProps): JSX.Element => {
  // build the canonical url to ensure it's always cal.com (not app.cal.com)
+  const router = useRouter()
+  const defaultUrl = (`https://cal.com` + (router.asPath === "/" ? "": router.asPath)).split("?")[0];// cut off search params
-  const defaultUrl = getBrowserInfo()?.url;
  const { title, description, siteName, canonical = defaultUrl, nextSeoProps = {}, app, meeting } = props;
// ...

Note: I don't know why the PR is getting linting issues on parts of the code that I haven't even touched tbh (I'm unable to inspect the vercel deployments because of missing authorization).

[p6l-richard]

on self-hosters this should be {BASE_URL}?

changed to:

  // build the canonical url to ensure it's always cal.com (not app.cal.com)
  const router = useRouter();
  const calcomUrl = (`https://cal.com` + (router.asPath === "/" ? "" : router.asPath)).split("?")[0]; // cut off search params
  const defaultUrl = IS_SELF_HOSTED ? getBrowserInfo()?.url : calcomUrl;

[PeerRich]

btw. there is a variable isCalcom that checks for https://cal.com/ + (router.asPath === "/"

now that you mention it, I don't think there are any side-effects to have all canonical links point to cal.com

[PeerRich]

packages/lib/isCalcom.ts

[p6l-richard]

Here is a Google Sheet that contains pages that haven't been indexed by Google.

Now, that we have the canonical implemented, these are perfect to see if Google respects our tag.

[PeerRich]

amazing!