fix: og:image tags for /area/ and /climbs/

[julianlam]

What type of PR is this?(check all applicable)

• refactor
• feature
• bug fix
• documentation
• optimization
• other

Description

• og:image tags for areas do not work (invalid URL)
• og:image tags for climbs do not work (shows default south africa image)
  • Same issue as below, router is called twice, but og:image is not properly retrieved the first time due to null uid
• og:image tags for profiles do not work (arguments are double escaped)
  • Upstream issue: head > meta > content escaping issue facebook/react#13838
  • Passing in restricted characters like & cause them to be escaped. There are workarounds but none that look simple (or maintainable) enough to implement.
  • When a user profile is loaded, useUserProfileSeo is called to load the photos for og:image
  • This is called by the react router, but the router is called twice. Once with a null uid (causing the og:image tag to be the default image), and a second time in-client causing the tags to be properly set in DOM. However, that is too late for link-preview services, because they don't parse js.

What this PR achieves

Fixed the above issues.

Screenshots, recordings

Notes

Query parameters are being escaped but I can't work around them. e.g. ?w=600&q=75 has the & replaced with & which isn't read correctly by the image server. (full quality image is sent)

[clintonlunn]

@julianlam just to point out I think the change you made to useClimbSeo only applies to the (soon to be deprecated/removed) /climbs/ page. The new /climb/ page does not have a generateMetadata() function yet, but should be added (out of scope for this issue). it is inheriting from

open-tacos/src/app/(default)/layout.tsx

Lines 13 to 21 in 4f4c7ba

	export const metadata: Metadata = {
	title: 'OpenBeta',
	description: 'Free rock climbing platform',
	openGraph: {
	description: 'OpenBeta is a free climbing platform. Join the community and share your knowledge today.',
	images: '/south-africa-og.jpeg'
	},
	metadataBase: new URL(`https://${process.env.VERCEL_URL ?? 'http://localhost:3000'}`)
	}

[julianlam]

@clintonlunn Correct, I realized that earlier, which is why I made the commit. There still is an extra slash there, so having it removed is better, as the image 404s otherwise.

[clintonlunn]

[clintonlunn]

This looks good to me. There are some discrepancies between the image url generation in useClimbSeo() (/climbs/ page) and the metadata for /area/ page maybe we can improve on that in the future since we're still seeing errors about an incorrect aspect ratio.