Fix SEO Open Graph Meta Tags and Thumbnail Images

[qisforq]

Objective:

The SEO implementation o is currently broken, resulting in thumbnail images not displaying when links are shared on social media platforms. This issue likely originated during the migration to Next.js version 14, which changed how images are handled.

Sub-tasks:

1. Investigate the current SEO implementation and identify how the Open Graph meta tags are being populated, especially the og:image tags.

2. Review the existing SEO config object and ensure that the correct image paths are being used for each page.

3. Update the code to properly generate the Open Graph meta tags, taking into account any necessary changes related to Next.js 14 and the next/image component.

4. Test the updated implementation thoroughly using tools like the Facebook Sharing Debugger and the Twitter Card Validator to ensure that thumbnail images are displaying correctly when links are shared.

5. If the application is using Server-Side Rendering (SSR) or Static Site Generation (SSG), verify that the generated meta tags are correct by inspecting the page source in a local development environment.

6. Optionally, consider implementing a fallback solution for pages that don't have a specific thumbnail image defined.

Note: Testing these changes in a live environment can be challenging, as the website needs to be publicly accessible for the link previews to work. If necessary, the changes can be merged into the main branch to facilitate testing, but this should be done with caution and coordination with the team.

[chef-louis]

@qisforq Ok so my understanding is that adding SEO is relatively straight forward with NextJS14. We just need to add a Metadata type from next and add the configs that we had before. We might want to consider adding keywords into the SEO metadata, for which I've done manually on the home page (not sure how much it matters on other pages but the video I watched suggests using keywords).

I was able to test locally to make sure that the description and title flow through from the metadata to the source code. It will be good to test the images as well by deploying my seo_nextjs14 branch to main. We can coordinate this either tomorrow or early next week.

[qisforq]

Oh weird

[chef-louis]

• Create a placeholder image for SEO of standard pages (eg. register, login, etc).

[qisforq]

Titles are working but images still are not

[chef-louis]

• Made a fix to move the description higher up in the metadata object and fix the formatting of the opengraph image file
• As an extra precaution, I've added the image file directly into the route to serve as the opengraph image PR is up to merge into main which we can then test the SEO functionality