From 07c581f5b3aa55b5e69d91c8ead4ffabb42ad4c9 Mon Sep 17 00:00:00 2001
From: Omar Abdelrahman Abbas <tryomarabbas@gmail.com>
Date: Mon, 26 May 2025 17:04:43 +0300
Subject: [PATCH] feat(profile): add Open Graph meta tags for social sharing
 (@TryOmar) (#6598)

Add Open Graph meta tags to user profile pages to improve how they
appear when shared on social media platforms. This includes title,
description and URL meta tags.

Closes #6597

### Description

This PR adds Open Graph Protocol (OGP) meta tags to user profile pages
to fix the issue with LinkedIn and other social media platforms
incorrectly redirecting profile links to the homepage. The
implementation:

- Adds dynamic Open Graph meta tags for title, description and URL
- Updates tags whenever a profile page is loaded
- Uses the user's name in the title tag for better personalization

### Checks

- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

Closes #6597

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
---
 .../src/ts/controllers/page-controller.ts     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index 601701c6e..db91c32e4 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -23,6 +23,22 @@ type ChangeOptions = {
   data?: unknown;
 };
 
+function updateOpenGraphUrl(): void {
+  const ogUrlTag = document.querySelector('meta[property="og:url"]');
+  const currentUrl = window.location.href;
+
+  if (ogUrlTag) {
+    // Update existing tag
+    ogUrlTag.setAttribute("content", currentUrl);
+  } else {
+    // Create and append new tag if it doesn't exist
+    const newOgUrlTag = document.createElement("meta");
+    newOgUrlTag.setAttribute("property", "og:url");
+    newOgUrlTag.content = currentUrl;
+    document.head.appendChild(newOgUrlTag);
+  }
+}
+
 export async function change(
   pageName: PageName,
   options = {} as ChangeOptions
@@ -92,12 +108,15 @@ export async function change(
           }
           Focus.set(false);
           ActivePage.set(nextPage.id);
+
           await previousPage?.afterHide();
           await nextPage?.beforeShow({
             params: options.params,
             // @ts-expect-error for the future (i think)
             data: options.data,
           });
+
+          updateOpenGraphUrl();
         }
       );
     });