🔖 Feature description
💡 What I noticed
I tried sharing the GitHub Tracker app link on WhatsApp, Twitter, and LinkedIn and noticed there's no preview card — no image, no title, no description. Just a plain URL. This happens because the app is missing Open Graph (OG) and Twitter Card meta tags in index.html.
For a developer tool that people would want to share, this is a big missed opportunity.
🚀 What I'm proposing
Add proper Open Graph and Twitter Card meta tags to index.html so when anyone shares the app link on social media or messaging apps, it shows a rich preview card with image, title, and description.
🏗️ How it would work
┌─────────────────────────────────────┐
│ User shares app link on Twitter │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ Twitter reads OG meta tags │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ Fetches og:image from public/ │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ Rich preview card shown to users │
└─────────────────────────────────────┘
🛠️ Tech Implementation Plan
index.html — add inside <head>:
<!-- Primary Meta Tags -->
<title>GitHub Tracker — Monitor GitHub User Activity</title>
<meta name="title" content="GitHub Tracker — Monitor GitHub User Activity" />
<meta name="description" content="Track and analyze the activity of any GitHub user. Monitor commits, PRs, issues, and repositories in real time." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github-spy.netlify.app/" />
<meta property="og:title" content="GitHub Tracker — Monitor GitHub User Activity" />
<meta property="og:description" content="Track and analyze the activity of any GitHub user. Monitor commits, PRs, issues, and repositories in real time." />
<meta property="og:image" content="https://github-spy.netlify.app/og-image.png" />
<!-- Twitter Card -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://github-spy.netlify.app/" />
<meta property="twitter:title" content="GitHub Tracker — Monitor GitHub User Activity" />
<meta property="twitter:description" content="Track and analyze the activity of any GitHub user. Monitor commits, PRs, issues, and repositories in real time." />
<meta property="twitter:image" content="https://github-spy.netlify.app/og-image.png" />
public/og-image.png:
- Size: 1200x630px (standard OG image size)
- Should show the app name, tagline, and a screenshot or logo
- Can be designed using Figma or Canva and placed in
public/
✅ Acceptance Criteria
📈 Why this matters
Every time someone shares the app link — on Twitter, LinkedIn, WhatsApp, Discord, or Slack — they get a plain ugly URL instead of a rich preview. Adding OG tags takes less than 30 minutes but makes the app look polished and professional everywhere it gets shared. It's one of the highest ROI changes you can make to a web app.
🔗 References
I'd love to work on this if maintainers are open to it. Happy to discuss before starting. 🙌
🎤 Screenshot
No response
🔄️ Additional Information
No response
🔖 Feature description
💡 What I noticed
I tried sharing the GitHub Tracker app link on WhatsApp, Twitter, and LinkedIn and noticed there's no preview card — no image, no title, no description. Just a plain URL. This happens because the app is missing Open Graph (OG) and Twitter Card meta tags in
index.html.For a developer tool that people would want to share, this is a big missed opportunity.
🚀 What I'm proposing
Add proper Open Graph and Twitter Card meta tags to
index.htmlso when anyone shares the app link on social media or messaging apps, it shows a rich preview card with image, title, and description.🏗️ How it would work
┌─────────────────────────────────────┐
│ User shares app link on Twitter │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ Twitter reads OG meta tags │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ Fetches og:image from public/ │
└──────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────┐
│ Rich preview card shown to users │
└─────────────────────────────────────┘
🛠️ Tech Implementation Plan
index.html— add inside<head>:public/og-image.png:public/✅ Acceptance Criteria
index.htmlindex.htmlog-image.png(1200x630px) created and placed inpublic/📈 Why this matters
Every time someone shares the app link — on Twitter, LinkedIn, WhatsApp, Discord, or Slack — they get a plain ugly URL instead of a rich preview. Adding OG tags takes less than 30 minutes but makes the app look polished and professional everywhere it gets shared. It's one of the highest ROI changes you can make to a web app.
🔗 References
I'd love to work on this if maintainers are open to it. Happy to discuss before starting. 🙌
🎤 Screenshot
No response
🔄️ Additional Information
No response