feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598

Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom
TryOmar:master
May 26, 2025
Merged

feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom
TryOmar:master

Conversation

@TryOmar

@TryOmarTryOmar commented May 26, 2025

Copy link
Copy Markdown
Contributor

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

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

Closes#6597

@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer

fehmer commented May 26, 2025

Copy link
Copy Markdown
Member

hi @TryOmar ,

thank you for your contribution.

I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.
That means we cannot use client-side rendering to set the ogp headers.

I created a demo but i don't have linkedin. Can you test this for me?

https://fehmer.info/linkedin/?profile=Bob

The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.

@TryOmar

TryOmar commented May 26, 2025

Copy link
Copy Markdown
ContributorAuthor

hi @TryOmar ,

thank you for your contribution.

I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.

I created a demo but i don't have linkedin. Can you test this for me?

https://fehmer.info/linkedin/?profile=Bob

The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.

Hi @fehmer, thanks for the smart way of testing!

Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!

I think the tags might be the reason it worked.

<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4

@TryOmar

TryOmar commented May 26, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Also, here's a helpful LinkedIn help post:

"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928

I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).

@fehmer

fehmer commented May 26, 2025

Copy link
Copy Markdown
Member

the title is still the default title so it doesnt fully work. Maybe we only set the og:url.

What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.

Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.

@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge added the frontend User interface or web stuff label May 26, 2025
@TryOmar

TryOmar commented May 26, 2025

Copy link
Copy Markdown
ContributorAuthor

the title is still the default title so it doesnt fully work. Maybe we only set the og:url.

What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.

Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.

Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.

fehmer
fehmer requested changes May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts Outdated
Comment threadfrontend/src/ts/controllers/page-controller.ts Outdated
@github-actionsgithub-actionsBot added the waiting for update Pull requests or issues that require changes/comments before continuing label May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot removed the waiting for update Pull requests or issues that require changes/comments before continuing label May 26, 2025
fehmer
fehmer approved these changes May 26, 2025
View reviewed changes

@fehmerfehmer left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks

Miodec
Miodec approved these changes May 26, 2025
View reviewed changes

@MiodecMiodec left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

@Miodec
Miodec merged commit 07c581f into monkeytypegame:masterMay 26, 2025
@TryOmar

TryOmar commented May 26, 2025

Copy link
Copy Markdown
ContributorAuthor

For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603

Feedback and insights from the team are very welcome!

Miodec pushed a commit to byseif21/monkeytype that referenced this pull request May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees

No one assigned

Labels

frontendUser interface or web stuff

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly

4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598
Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
May 26, 2025
Merged
feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
Conversation
@TryOmar
@TryOmarTryOmar
commented
May 26, 2025

Copy link


Copy Markdown

Contributor
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
  •  Check if any open issues are related to this PR; if so, be sure to tag them below.
  •  Make sure the PR title follows the Conventional Commits standard.
  •  Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.
Closes#6597
@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.

That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
Hi @fehmer, thanks for the smart way of testing!
Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!
I think the tags might be the reason it worked.
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4
@TryOmar
TryOmar
commented
May 26, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Also, here's a helpful LinkedIn help post:
"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928
I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge
added
the 
frontend
User interface or web stuff
label
May 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.
fehmer
fehmer
requested changes
May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

@github-actionsgithub-actionsBot
added
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot
removed
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
fehmer
fehmer
approved these changes
May 26, 2025
View reviewed changes
@fehmerfehmer
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks
Miodec
Miodec
approved these changes
May 26, 2025
View reviewed changes
@MiodecMiodec
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
@Miodec
Miodec
merged commit 07c581f
into
monkeytypegame:masterMay 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603
Feedback and insights from the team are very welcome!
Miodec pushed a commit
to byseif21/monkeytype
that referenced
this pull request
May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees


No one assigned


Labels

frontendUser interface or web stuff

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly


4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598
Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
May 26, 2025
Merged
feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
Conversation
@TryOmar
@TryOmarTryOmar
commented
May 26, 2025

Copy link


Copy Markdown

Contributor
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
  •  Check if any open issues are related to this PR; if so, be sure to tag them below.
  •  Make sure the PR title follows the Conventional Commits standard.
  •  Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.
Closes#6597
@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.

That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
Hi @fehmer, thanks for the smart way of testing!
Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!
I think the tags might be the reason it worked.
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4
@TryOmar
TryOmar
commented
May 26, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Also, here's a helpful LinkedIn help post:
"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928
I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge
added
the 
frontend
User interface or web stuff
label
May 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.
fehmer
fehmer
requested changes
May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

@github-actionsgithub-actionsBot
added
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot
removed
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
fehmer
fehmer
approved these changes
May 26, 2025
View reviewed changes
@fehmerfehmer
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks
Miodec
Miodec
approved these changes
May 26, 2025
View reviewed changes
@MiodecMiodec
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
@Miodec
Miodec
merged commit 07c581f
into
monkeytypegame:masterMay 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603
Feedback and insights from the team are very welcome!
Miodec pushed a commit
to byseif21/monkeytype
that referenced
this pull request
May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees


No one assigned


Labels

frontendUser interface or web stuff

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly


4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598
Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
May 26, 2025
Merged
feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
Conversation
@TryOmar
@TryOmarTryOmar
commented
May 26, 2025

Copy link


Copy Markdown

Contributor
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
  •  Check if any open issues are related to this PR; if so, be sure to tag them below.
  •  Make sure the PR title follows the Conventional Commits standard.
  •  Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.
Closes#6597
@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.

That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
Hi @fehmer, thanks for the smart way of testing!
Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!
I think the tags might be the reason it worked.
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4
@TryOmar
TryOmar
commented
May 26, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Also, here's a helpful LinkedIn help post:
"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928
I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge
added
the 
frontend
User interface or web stuff
label
May 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.
fehmer
fehmer
requested changes
May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

@github-actionsgithub-actionsBot
added
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot
removed
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
fehmer
fehmer
approved these changes
May 26, 2025
View reviewed changes
@fehmerfehmer
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks
Miodec
Miodec
approved these changes
May 26, 2025
View reviewed changes
@MiodecMiodec
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
@Miodec
Miodec
merged commit 07c581f
into
monkeytypegame:masterMay 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603
Feedback and insights from the team are very welcome!
Miodec pushed a commit
to byseif21/monkeytype
that referenced
this pull request
May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees


No one assigned


Labels

frontendUser interface or web stuff

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly


4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598
Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
May 26, 2025
Merged
feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
Conversation
@TryOmar
@TryOmarTryOmar
commented
May 26, 2025

Copy link


Copy Markdown

Contributor
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
  •  Check if any open issues are related to this PR; if so, be sure to tag them below.
  •  Make sure the PR title follows the Conventional Commits standard.
  •  Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.
Closes#6597
@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.

That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
Hi @fehmer, thanks for the smart way of testing!
Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!
I think the tags might be the reason it worked.
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4
@TryOmar
TryOmar
commented
May 26, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Also, here's a helpful LinkedIn help post:
"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928
I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge
added
the 
frontend
User interface or web stuff
label
May 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.
fehmer
fehmer
requested changes
May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

@github-actionsgithub-actionsBot
added
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot
removed
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
fehmer
fehmer
approved these changes
May 26, 2025
View reviewed changes
@fehmerfehmer
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks
Miodec
Miodec
approved these changes
May 26, 2025
View reviewed changes
@MiodecMiodec
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
@Miodec
Miodec
merged commit 07c581f
into
monkeytypegame:masterMay 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603
Feedback and insights from the team are very welcome!
Miodec pushed a commit
to byseif21/monkeytype
that referenced
this pull request
May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees


No one assigned


Labels

frontendUser interface or web stuff

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly


4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598
Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
May 26, 2025
Merged
feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
Conversation
@TryOmar
@TryOmarTryOmar
commented
May 26, 2025

Copy link


Copy Markdown

Contributor
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
  •  Check if any open issues are related to this PR; if so, be sure to tag them below.
  •  Make sure the PR title follows the Conventional Commits standard.
  •  Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.
Closes#6597
@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.

That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
Hi @fehmer, thanks for the smart way of testing!
Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!
I think the tags might be the reason it worked.
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4
@TryOmar
TryOmar
commented
May 26, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Also, here's a helpful LinkedIn help post:
"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928
I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge
added
the 
frontend
User interface or web stuff
label
May 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.
fehmer
fehmer
requested changes
May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

@github-actionsgithub-actionsBot
added
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot
removed
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
fehmer
fehmer
approved these changes
May 26, 2025
View reviewed changes
@fehmerfehmer
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks
Miodec
Miodec
approved these changes
May 26, 2025
View reviewed changes
@MiodecMiodec
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
@Miodec
Miodec
merged commit 07c581f
into
monkeytypegame:masterMay 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603
Feedback and insights from the team are very welcome!
Miodec pushed a commit
to byseif21/monkeytype
that referenced
this pull request
May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees


No one assigned


Labels

frontendUser interface or web stuff

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly


4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598
Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
May 26, 2025
Merged
feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
Conversation
@TryOmar
@TryOmarTryOmar
commented
May 26, 2025

Copy link


Copy Markdown

Contributor
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
  •  Check if any open issues are related to this PR; if so, be sure to tag them below.
  •  Make sure the PR title follows the Conventional Commits standard.
  •  Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.
Closes#6597
@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.

That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
Hi @fehmer, thanks for the smart way of testing!
Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!
I think the tags might be the reason it worked.
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4
@TryOmar
TryOmar
commented
May 26, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Also, here's a helpful LinkedIn help post:
"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928
I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge
added
the 
frontend
User interface or web stuff
label
May 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.
fehmer
fehmer
requested changes
May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

@github-actionsgithub-actionsBot
added
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot
removed
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
fehmer
fehmer
approved these changes
May 26, 2025
View reviewed changes
@fehmerfehmer
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks
Miodec
Miodec
approved these changes
May 26, 2025
View reviewed changes
@MiodecMiodec
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
@Miodec
Miodec
merged commit 07c581f
into
monkeytypegame:masterMay 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603
Feedback and insights from the team are very welcome!
Miodec pushed a commit
to byseif21/monkeytype
that referenced
this pull request
May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees


No one assigned


Labels

frontendUser interface or web stuff

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly


4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) - #6598
Merged
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
May 26, 2025
Merged
feat(profile): add Open Graph meta tags for social sharing (@TryOmar)#6598
Miodec merged 3 commits into
monkeytypegame:masterfrom 
TryOmar:master
Conversation
@TryOmar
@TryOmarTryOmar
commented
May 26, 2025

Copy link


Copy Markdown

Contributor
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
  •  Check if any open issues are related to this PR; if so, be sure to tag them below.
  •  Make sure the PR title follows the Conventional Commits standard.
  •  Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.
Closes#6597
@TryOmar
feat(profile): add Open Graph meta tags for social sharing
7455306
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.
Closesmonkeytypegame#6597
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first.

That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
hi @TryOmar ,
thank you for your contribution.
I am not sure this will actually work. I tested it before with discord links and discord is using the meta information from the page source and does not excute the javascript first. That means we cannot use client-side rendering to set the ogp headers.
I created a demo but i don't have linkedin. Can you test this for me?
https://fehmer.info/linkedin/?profile=Bob
The desired result would be a link to the same page with title Bob's Profile and description Check out Bobs profile. and a green image. But I expect the result to be title Default title , description Default description, link to the /linkedin without the profile query param and a red image.
Hi @fehmer, thanks for the smart way of testing!
Fortunately, it worked — LinkedIn directed to https://fehmer.info/linkedin/?profile=Bob instead of just the domain https://fehmer.info/, which is great!
I think the tags might be the reason it worked.
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Default title</title><metaproperty='og:title' content='Default title' /><metaproperty='og:image' content='/default.png' /><metaproperty='og:description' content='Default description' /><metaproperty='og:url' content='https://fehmer.info/linkedin' /></head>
Recording.2025-05-26.124400.mp4
@TryOmar
TryOmar
commented
May 26, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Also, here's a helpful LinkedIn help post:
"Make your website shareable on LinkedIn": https://www.linkedin.com/help/linkedin/answer/a521928
I shared it in the issue, but adding it here as well since it includes more useful details (in case someone didn't notice it).
@fehmer
fehmer
commented
May 26, 2025

Copy link


Copy Markdown

Member
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
@TryOmar
fix(meta): update og:url meta tag on page transitions
a4eb960
Update the Open Graph URL meta tag dynamically on every page transition to ensure correct URL sharing on social media platforms. This fixes the issue where profile links were redirecting to the homepage when shared on LinkedIn.
Closesmonkeytypegame#6597
@monkeytypegeorgemonkeytypegeorge
added
the 
frontend
User interface or web stuff
label
May 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
the title is still the default title so it doesnt fully work. Maybe we only set the og:url.
What we could do is add a call to the page-controller to update the meta og:url to the current window.location.href. This would work on all pages then and is not specific to the profile page.
Instead of removing all meta elements please just update the 'meta[property="og:url"]'s content.
Hey @fehmer , I finished the fix for dynamic og:url updates as discussed (commit a4eb960). Mind checking it out? Let me know if it looks good.
fehmer
fehmer
requested changes
May 26, 2025
View reviewed changes
Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

Comment threadfrontend/src/ts/controllers/page-controller.ts
Outdated

@github-actionsgithub-actionsBot
added
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
@TryOmar
refactor(meta): improve og:url update timing and remove comments
00a3cc0
Move the call to `updateOpenGraphUrl` after the `beforeShow` hook in the `change` function based on review feedback. Remove unnecessary comments related to the `updateOpenGraphUrl` function and its call for code cleanup.
Closesmonkeytypegame#6597
@github-actionsgithub-actionsBot
removed
the 
waiting for update
Pull requests or issues that require changes/comments before continuing
label
May 26, 2025
fehmer
fehmer
approved these changes
May 26, 2025
View reviewed changes
@fehmerfehmer
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks
Miodec
Miodec
approved these changes
May 26, 2025
View reviewed changes
@MiodecMiodec
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks
@Miodec
Miodec
merged commit 07c581f
into
monkeytypegame:masterMay 26, 2025
@TryOmar
TryOmar
commented
May 26, 2025

Copy link


Copy Markdown

ContributorAuthor
For anyone interested, I’ve started a follow-up discussion about the broader SEO and social sharing challenges related to static meta tags and possible solutions here: #6603
Feedback and insights from the team are very welcome!
Miodec pushed a commit
to byseif21/monkeytype
that referenced
this pull request
May 29, 2025
@TryOmar@Miodec
feat(profile): add Open Graph meta tags for social sharing (@TryOmar) (…
21fcc46
…monkeytypegame#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.
Closesmonkeytypegame#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)
-->
Closesmonkeytypegame#6597
<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#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! :) -->
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@fehmerfehmerfehmer approved these changes
@MiodecMiodecMiodec approved these changes

Assignees


No one assigned


Labels

frontendUser interface or web stuff

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

LinkedIn Profile Link Redirects Incorrectly


4 participants

@TryOmar@fehmer@Miodec@monkeytypegeorge