Suggestion: Improving SEO and Social Sharing for Monkeytype Profile Pages

[TryOmar]

Overview

This is a suggestion to spotlight an important issue affecting SEO and social sharing on Monkeytype: the problem of static meta tags in our current setup. The goal of this discussion is to highlight the impact this has on how our site appears in search engines and when shared on social media, and to outline possible solution paths for the team to consider. I hope this will be reviewed by more experienced team members.

---

Problem Statement

Currently, we have implemented a client-side update for the Open Graph og:url meta tag (see issue #6597 and PR #6598). This approach updates the meta tag dynamically in the browser using JavaScript:

function updateOpenGraphUrl() {
  const ogUrlTag = document.querySelector('meta[property="og:url"]');
  const currentUrl = window.location.href;

  if (ogUrlTag) {
    ogUrlTag.setAttribute("content", currentUrl);
  } else {
    const newOgUrlTag = document.createElement("meta");
    newOgUrlTag.setAttribute("property", "og:url");
    newOgUrlTag.content = currentUrl;
    document.head.appendChild(newOgUrlTag);
  }
}

While this works for users in the browser, the updated meta tags are not present in the static HTML source. As a result, when search engines or social media platforms (like LinkedIn, Facebook, or Twitter) crawl our site, they only see the original HTML without the correct meta tags. This means profile links shared on social media may not display the correct preview or may redirect to the homepage, as described in issue #6597.

---

Potential Solution Paths

Here are some possible approaches to address this issue:

1. Server-Side Rendering (SSR)

   • Migrate the frontend to a framework that supports SSR, such as Next.js (React), Nuxt.js (Vue), or SvelteKit.
   • This ensures that meta tags are rendered on the server and are present in the initial HTML sent to both users and bots.
   • Note: As discussed in GitHub Discussion #2866, this would require a significant codebase change and a move to a React-based stack.

2. Pre-rendering (Static Site Generation or Middleware)

   • Use a pre-rendering service (e.g., Prerender.io) or static site generation tools to generate HTML snapshots of key pages, including meta tags.
   • Serve these snapshots to bots and crawlers, while regular users continue to get the SPA experience.
   • This approach can often be integrated with existing static hosting solutions like Firebase Hosting, with minimal codebase changes.

3. Dynamic Rendering

   • Detect bots on the server and serve them a pre-rendered or SSR version of the page, while serving the SPA to regular users.
   • This can be implemented using middleware or cloud functions, and is a hybrid between SSR and pre-rendering.

---

Conclusion

The main goal of this message is to bring attention to the limitations of static meta tags for SEO and social sharing in our current setup. Addressing this would improve how Monkeytype profile pages appear in search results and on social media, potentially increasing the platform’s reach as users share their profiles.

I am not proposing a specific solution at this stage, but rather highlighting the problem and outlining possible directions for the team to consider. I hope this will be reviewed and discussed by those with more experience in SEO and web infrastructure.

References:

• GitHub Issue #6597
• GitHub PR #6598
• GitHub Discussion #2866