Repository navigation
[Feature] Add meta social preview image and Open Graph / Twitter tags for badges.layer5.io #111
Description
Current Behavior
When sharing links to https://badges.layer5.io on social media platforms, Slack, Discord, or community channels, no link preview image is displayed. The site's HTML head currently lacks Open Graph (og:image) and Twitter Card (twitter:image) metadata.
Expected Behavior
badges.layer5.io should include social metadata tags in its <head> (og:image, og:title, og:description, og:url, twitter:card, and twitter:image) so that sharing the URL generates a rich card preview.
Suggested Image
Use the official Layer5 Recognition Program banner already present in the repository (src/assets/images/recognition-banner.png / .github/readme/images/recognition-banner.webp).
This asset directly represents the program name ("Layer5 Recognition Program"), includes the Layer5 brand mark, displays representative badges, and conforms to standard widescreen social card dimensions.
Environment
- Host OS: Mac Linux Windows
- Platform: Docker or Kubernetes
- Meshery Server Version: stable-v
- Meshery Client Version: stable-v
Contributor Guides and Resources
- 🛠 Meshery Build & Release Strategy
- 📚 Instructions for contributing to documentation
- 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack
Activity
akkki007 commentedon Sep 10, 2026
Started the work on this
akkki007 commentedon Sep 10, 2026
Opened #112 for this.
hii @hiyach28
Adds a shared
Seocomponent wired into every page through Gatsby'sHeadAPI, emittingog:type/site_name/title/description/url/image/image:alt/image:width/height,twitter:card=summary_large_image,twitter:title/description/image/image:alt/site/creator, plus a canonical link. Uses therecognition-banner.pngsuggested above.Two things surfaced while implementing:
title/descriptiontags thatindex.jsanddiscussion-leaderboard.jsalready had were rendered in the component body rather than in<head>, so under React 18 they never reached the document head at all. Those are now moved into theHeadexport.SiteSiteMetadatais explicitly declared viacreateTypesingatsby-node.js, which disables inference — sotitleanddescriptionwere not queryable from GraphQL despite being set ingatsby-config.js. Declared them.Verified with
npm run build: the tags are present in<head>on/,/discussion-leaderboard/and/404/, with fully-qualified image URLs and the asset emitted to the build output. Live unfurl testing needs a deploy.Abh-igyan commentedon Sep 10, 2026
Hi @hiyach28 , I would like to work on this issue. If it's available.
must-not-be-namedd commentedon Sep 10, 2026
hi @hiyach28, I would like to work on this too!