feat(frontend): add Open Graph meta tags for social sharing and a reusable ShareButton component

[portableDD]

Description

Sharing a ByteChain Academy course URL on Telegram or Twitter shows a blank preview with no title, description, or image. Adding Open Graph meta tags to course and profile pages will drive organic growth through peer sharing. A ShareButton component will make sharing intentional and easy.

Background

• Next.js App Router supports generateMetadata for dynamic OG meta tags
• Course detail pages have no OG tags
• Metadata API: export async function generateMetadata({ params }) { return { title, openGraph: { title, description, images } } }

Implementation Guide

Add generateMetadata to frontend/app/courses/[id]/page.tsx fetching the course and returning dynamic OG title, description, and image (use course.thumbnailUrl or a default OG image).

Add generateMetadata to frontend/app/learners/[username]/page.tsx (from Issue 45) with username and XP in the OG description.

Create frontend/components/ui/share-button.tsx using the Web Share API (navigator.share()) with a clipboard copy fallback. Apply it to the certificate card (Issue 38) and course detail page.

Create a default OG image at frontend/public/og-default.png with ByteChain Academy name and tagline.

Acceptance Criteria

• Course pages have dynamic OG title and description via generateMetadata
• Course thumbnail used as OG image when available
• Learner profile pages have OG tags with username
• ShareButton component uses Web Share API with clipboard fallback
• Default OG image exists at public/og-default.png
• Sharing a course URL shows correct preview on social platforms

Complexity: High - 200 points
Join: https://t.me/ByteChainAcademy | Contact: contact@nexacore.org