Skip to content

[LungMAP] Add Open Graph and Twitter meta tags #4798

@frano-m

Description

@frano-m

Summary

LungMAP currently has no Open Graph or Twitter meta tags, so shared links on Slack, Twitter, LinkedIn, etc. show no preview. Adding these tags will enable rich link previews when pages are shared.

Reference Implementation

Tags to Add

Tag Value
og:title "{pageTitle} - {appTitle}" or just "{appTitle}"
og:description Page-specific description, falling back to site-wide default
og:image 1200x630 OG image with LungMAP branding
og:image:width 1200
og:image:height 630
og:site_name "{appTitle}"
og:type website
og:url Canonical URL for the current page
twitter:card summary_large_image
twitter:image Same as og:image
meta description Same as og:description

Implementation Approach

  1. Create an OgMeta component (or reuse from findable-ui if upstreamed)
  2. Render in pages/_app.tsx
  3. Pass pageDescription through pageProps from pages that have frontmatter descriptions
  4. Provide a default description for pages without one
  5. Create a 1200x630 OG image with LungMAP branding
  6. Ensure all pages have title and description metadata

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions