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
- Create an
OgMeta component (or reuse from findable-ui if upstreamed)
- Render in
pages/_app.tsx
- Pass
pageDescription through pageProps from pages that have frontmatter descriptions
- Provide a default description for pages without one
- Create a 1200x630 OG image with LungMAP branding
- Ensure all pages have title and description metadata
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
OgMetacomponent patternapp/components/common/OgMeta/ogMeta.tsx)Tags to Add
og:title"{pageTitle} - {appTitle}"or just"{appTitle}"og:descriptionog:imageog:image:width1200og:image:height630og:site_name"{appTitle}"og:typewebsiteog:urltwitter:cardsummary_large_imagetwitter:imageog:imagemeta descriptionog:descriptionImplementation Approach
OgMetacomponent (or reuse from findable-ui if upstreamed)pages/_app.tsxpageDescriptionthroughpagePropsfrom pages that have frontmatter descriptions