Skip to content

Frontend: index.html missing Open Graph, meta description, and theme-color — poor SEO and link unfurling #191

Description

@k-deejah

Difficulty: Advanced

Problem

1. frontend/index.html has no <meta name="description"> or Open Graph tags
The <head> section of frontend/index.html only contains <title>LineProof — Frontend</title> and a viewport meta tag. No og:title, og:description, og:image, og:url, or twitter:card tags exist. When the LineProof app URL is shared on Slack, Discord, Twitter, or LinkedIn, the link preview shows no meaningful content.

2. No <meta name="theme-color"> — browser chrome stays default
Mobile browsers use theme-color to color the browser UI chrome to match the app. The LineProof brand uses slate-900 (#0f172a) as the primary color, but index.html has no theme-color meta tag. Chrome/Android shows the default white browser bar.

3. No <link rel="manifest"> — app is not installable as a PWA
There is no manifest.json in frontend/public/ and no <link rel="manifest"> in index.html. The app cannot be added to a home screen with a custom icon, which is a standard feature for modern web apps.

Impact: Sharing LineProof links produces empty previews. The app appears unprofessional when shared socially. The mobile experience is degraded without theme-color. No PWA installability.

Proposed Solution

  • Add <meta name="description" content="Provably fair, non-transferable waiting lists on Stellar."> to index.html.
  • Add Open Graph tags: og:title, og:description, og:type="website", og:image (link to a static social preview image in public/).
  • Add <meta name="twitter:card" content="summary_large_image">.
  • Add <meta name="theme-color" content="#0f172a">.
  • Create frontend/public/manifest.json with app name, icons, and start URL. Link it from index.html.

Acceptance Criteria

  • <meta name="description"> added to index.html
  • og:title, og:description, og:type, og:image Open Graph tags added
  • twitter:card meta tag added
  • <meta name="theme-color" content="#0f172a"> added
  • frontend/public/manifest.json created with app name and icon references
  • <link rel="manifest"> added to index.html
  • Social preview tested using the Twitter Card Validator or OG Debugger
  • pnpm build in frontend/ succeeds with no errors

Contributor Note

If assigned, your PR must include a screenshot of the social preview from a link unfurler (ogp.me or the Twitter Card Validator), and confirm the manifest.json validates as a valid Web App Manifest.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardThird CampaignCampaign: Third CampaigndocumentationImprovements or additions to documentationenhancementNew feature or requestfrontend

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions