Skip to content

feat(meta): add the Open Graph preview image - #460

Merged
kNoAPP merged 1 commit into
developfrom
kNoAPP/451-feat-og-preview-image
Sep 26, 2026
Merged

kNoAPP merged 1 commit into
developfrom
kNoAPP/451-feat-og-preview-image

Conversation

@kNoAPP

@kNoAPP kNoAPP commented Sep 26, 2026

Copy link
Copy Markdown
Owner

Description

This finishes the in-repo part of #451. #456 added the Open Graph and Twitter metadata but had no image to point at. #458 then added the social card artwork. This PR connects the two, so a kn0.app link unfurls with the large card.

app/opengraph-image.png: the #458 social card (1200×630, 86 KB), moved here from public/brand/social-card.png using Next's static-file convention. It was moved rather than copied so there's only one copy of the exported PNG.

app/opengraph-image.alt.txt: the alt text for the card. The file has no trailing newline on purpose: Next reads it verbatim, so a newline would end up inside the content attribute.

public/brand/README.md: the social-card.svg row now says where its export lives, the separate social-card.png row is gone, and the export command writes the card to app/opengraph-image.png. I re-ran the command: both PNGs came out byte for byte identical to the committed files.

No twitter-image.png. Next copies the Open Graph image into the Twitter tags on its own, so X gets twitter:image without a second file.

Verification

npm run build, then in out/index.html:

<meta property="og:image" content="https://kn0.app/opengraph-image.png?opengraph-image.3zoje1vxv8dc2.png"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:alt" content="MeshCore Desktop: message, map and manage your MeshCore radio from the browser."/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://kn0.app/opengraph-image.png?opengraph-image.3zoje1vxv8dc2.png"/>
<meta name="twitter:image:alt" content="MeshCore Desktop: message, map and manage your MeshCore radio from the browser."/>
<meta name="twitter:image:type" content="image/png"/>
<meta name="twitter:image:width" content="1200"/>
<meta name="twitter:image:height" content="630"/>

og:title, og:description, og:url, twitter:card and theme-color are still there from #456. out/opengraph-image.png is exported, and the query string on its URL is a content hash that changes whenever the image does, so re-exporting the card also busts crawler caches.

Spell-check, lint, type-check and build all pass. format:check passes once line endings are ignored; locally it only fails on the Windows CRLF checkout. There's no visible UI change, so there are no screenshots, and no radio behavior is involved.

Theme color: #446 hasn't added the per-scheme theme-color entries yet, so the page still has only the plain #4f8ef7 entry from #456, and that's the one Discord reads. Once #446 lands, the comment on viewport.themeColor in app/layout.tsx covers keeping that entry first.

After merge (can't be done from the repo)

  • After deploy, paste https://kn0.app/?v=2 into Discord and check the title, description, large card and blue side bar.
  • Check https://www.opengraph.xyz and LinkedIn Post Inspector.
  • Maintainer: upload public/brand/repo-social.png under Settings → General → Social preview (there's no API for it), then check that a repo link pasted into Discord shows the card.

Issues

Type of Change

  • ❌ ! -- Breaking change (fix or feature that would cause existing
    functionality to change)
  • ✨ feat -- New feature (non-breaking change which adds functionality)
  • 🛠️ fix -- Bug fix (non-breaking change which fixes an issue)
  • 📝 docs -- Additional or updated documentation
  • 🎨 style -- Code style changes (formatting, missing semi colons, etc)
  • 🧹 refactor -- Code refactor
  • ⚡ perf -- Performance improvement
  • 🧪 test -- Tests (adding or updating tests)
  • 🏗️ build -- Build system or external dependencies changes
  • ✅ ci -- Build configuration change
  • 🗑️ chore -- Grunt tasks
  • ⏪ revert -- Revert previous changes

Move the exported social card to app/opengraph-image.png so Next.js emits
og:image and twitter:image as absolute kn0.app URLs with size and alt
text, and point the brand export command at the new path.
@github-actions github-actions Bot added the ui label Sep 26, 2026
@kNoAPP
kNoAPP merged commit 6628c1c into develop Sep 26, 2026
8 checks passed
@kNoAPP
kNoAPP deleted the kNoAPP/451-feat-og-preview-image branch September 26, 2026 20:10
@github-actions github-actions Bot mentioned this pull request Sep 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(meta): rich link previews for kn0.app in Discord and other apps

1 participant