mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-06 05:26:54 +08:00
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! :) -->
This commit is contained in:
parent
1826948886
commit
07c581f5b3
1 changed files with 19 additions and 0 deletions
|
@ -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();
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Add table
Reference in a new issue