Add Open Graph Preview Image

[youngcoder45]

Summary*

Add a proper Open Graph preview image (og:image) for social media sharing support.

---

Context*

The SEO audit detected that the website is missing an og:image meta tag.

This causes poor previews when sharing links on:

• Discord
• Twitter/X
• LinkedIn
• WhatsApp
• Telegram

---

Why is this needed?

Social preview images:

• improve branding
• increase click-through rates
• improve social sharing appearance
• make the project look more professional

---

Tasks

• Design/create social preview image
• Add og:image metadata
• Add twitter:image metadata
• Verify preview rendering on social platforms
• Ensure proper image dimensions and optimization

---

Acceptance criteria*

• Website generates proper preview cards
• Preview image renders correctly on Discord and Twitter/X
• Metadata validates successfully
• Image is optimized for web delivery

---

Suggested approach

Recommended dimensions:

• 1200×630px

Helpful tools:

• OpenGraph preview validators
• Twitter Card Validator
• Next.js metadata configuration

---

Out of scope

• Full branding redesign
• Animated preview cards

---

Remember, contributions to this repository should follow its contributing guidelines, security policy and code of conduct.